/*
 * Content pages: news/articles, success stories, jobs (Phase 4 / Brief D).
 * Tokens + logical properties only — see docs/DESIGN_SYSTEM.md.
 * Loaded from resources/views/{articles,success-stories,jobs}/*.blade.php and
 * components/modal.blade.php via @section('custom_css') + asset_v().
 */

/* Page header: <x-page-header> (ds.css §12, .ds-page-header). */

/* ==========================================================================
   2. Listing pages (Articles, Success Stories, Jobs).
   ========================================================================== */
.content-list {
    padding-block: var(--space-12) var(--space-16);
}
.content-list__pagination {
    margin-block-start: var(--space-10);
}
.content-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}
.content-card__date {
    margin: 0;
}

/* Job rows: ds-card used as a plain (non-link) container with two actions. */
.job-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin-block-end: var(--space-1);
}
.job-card__description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}
.job-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* ==========================================================================
   3. Detail pages (article / success story) — shared layout.
   ========================================================================== */
.content-detail__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-block: var(--space-8) var(--space-6);
}
.content-detail__title {
    margin: 0;
}
.content-detail__byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
}
.content-detail__date {
    color: var(--ink-secondary);
}

/* Share links: icon buttons with an accessible name, never a bare image link. */
.content-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}
.content-share__label {
    color: var(--ink-secondary);
}
.content-share__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    padding-inline: var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--border-subtle);
    color: var(--ink-secondary);
    background-color: var(--surface-raised);
    font-size: var(--type-footnote-size);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--duration-micro) var(--ease-standard), color var(--duration-micro) var(--ease-standard);
}
.content-share__link:hover {
    border-color: var(--border-strong);
    color: var(--ink-brand);
    text-decoration: underline;
}
.content-share__link:focus-visible,
.ds-modal__close:focus-visible,
.ds-modal__content a:not(.ds-btn):focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--focus-ring);
}

/* Lead image: never covered by a sticky bar (audit #12), fixed aspect ratio
   so tall/short uploads never dominate the layout. */
.content-detail__hero {
    margin-block-end: var(--space-8);
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--surface-sunken);
}
.content-detail__hero img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.content-detail__body {
    margin-block-end: var(--space-12);
}
/* GrapesJS-built bodies keep their own CSS; only neutralise the font so it
   still inherits the site typeface (docs/DESIGN_SYSTEM.md, audit #12). */
.content-detail__body.ds-prose :not(.ds-icon) {
    font-family: inherit;
}

.content-detail__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding-block: var(--space-6);
    border-block-start: 1px solid var(--border-subtle);
    margin-block-end: var(--space-12);
}

.content-related {
    padding-block-end: var(--space-16);
}
.content-related__heading {
    margin-block-end: var(--space-6);
}

/* ==========================================================================
   4. Empty states — a little extra breathing room in a plain container.
   ========================================================================== */
.content-empty {
    padding-block: var(--space-8);
}

/* ==========================================================================
   5. Modal (jobs "Details" dialog) — audit #17/#31: replaces the fixed
   1070px-wide inline <style> block with a responsive, token-based dialog.
   ========================================================================== */
.ds-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-6) var(--gutter);
    background-color: var(--surface-scrim);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-standard) var(--ease-standard);
}
.ds-modal.open {
    opacity: 1;
    visibility: visible;
}
/* The page behind an open dialog does not scroll (content.js). */
html.modal-open { overflow: hidden; }
.ds-modal__dialog {
    position: relative;
    inline-size: 100%;
    max-inline-size: min(90vw, calc(var(--content-max) * 0.6));
    margin-block: var(--space-10) auto;
}
.ds-modal__content {
    position: relative;
    padding: var(--space-8);
    border-radius: var(--radius-md);
    background-color: var(--surface-raised);
    color: var(--ink-primary);
    box-shadow: var(--elevation-4);
}
.ds-modal__close {
    position: absolute;
    inset-block-start: var(--space-4);
    inset-inline-end: var(--space-4);
    inline-size: 44px;
    block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--ink-secondary);
    cursor: pointer;
}
.ds-modal__close:hover {
    background-color: var(--surface-sunken);
    color: var(--ink-primary);
}
/* Above the content box, which follows it in the markup. */
.ds-modal__close { z-index: var(--z-raised); }
/* Loading state: spinner and "Loading…" while the details are fetched. */
.ds-modal__status {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-block-size: var(--space-24);
    padding-inline-end: var(--space-12);
}
.ds-modal__spinner {
    flex-shrink: 0;
    inline-size: var(--space-5);
    block-size: var(--space-5);
    border: 2px solid var(--border-default);
    border-block-start-color: var(--brand-red);
    border-radius: var(--radius-full);
    animation: ds-spin 700ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .ds-modal__spinner { animation-duration: 1400ms; }
}
.ds-modal__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin-block-end: var(--space-4);
    padding-inline-end: var(--space-12);
}
.ds-modal__title {
    margin-block-end: var(--space-4);
    padding-inline-end: var(--space-12);
}
.ds-modal__body {
    margin-block-end: var(--space-8);
}
.ds-modal__actions {
    display: flex;
    justify-content: center;
}
@media (max-width: 767px) {
    .ds-modal { padding-inline: var(--space-4); }
    .ds-modal__content { padding: var(--space-6); }
}

/* ==========================================================================
   Job application (/Jobs/Apply/{id}): facts in the page header, form card.
   ========================================================================== */
.job-apply-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-8);
    margin: var(--space-2) 0 0;
}
.job-apply-facts dt,
.job-apply-facts dd {
    margin: 0;
}
.job-apply-card {
    max-inline-size: calc(var(--content-max) * 0.75);
    margin-inline: auto;
    padding: var(--space-5);
}
@media (min-width: 768px) {
    .job-apply-card { padding: var(--space-8); }
}

/* ==========================================================================
   Job page (/Jobs/{id}) and the Details dialog: summary, duties, actions.
   ========================================================================== */
.job-detail {
    max-inline-size: calc(var(--content-max) * 0.75);
    padding: var(--space-5);
}
@media (min-width: 768px) {
    .job-detail { padding: var(--space-8); }
}
.job-detail__summary {
    margin: 0 0 var(--space-6);
    max-inline-size: 72ch;
}
.job-detail__duties > * + * {
    margin-block-start: var(--space-3);
}
.job-detail__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: var(--space-8);
    padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--separator);
}