/* components-content.css — interior-page components (Phase 2).
   Every value comes from tokens.css; no new colour, radius, font or motion pattern is
   introduced here. Loaded by the eleven interior pages only, after components.css and
   components-sections.css, so the cascade order of engineering §3 is preserved. */

/* =====================================================================
   Page hero — the interior counterpart of the home page's slider: same photo
   treatment, same scrim, same type block, one third of the height.
   ===================================================================== */
.page-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: end;
    min-block-size: clamp(280px, 30vw, 360px);
    background-color: var(--color-surface);
    overflow: hidden;
}
.page-hero__media,
.page-hero__scrim {
    position: absolute;
    inset: 0;
}
.page-hero__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}
.page-hero__scrim { background: var(--gradient-scrim-hero-compact); }
.page-hero__inner {
    position: relative;
    display: grid;
    justify-items: start;
    gap: var(--space-md);
    padding-block: var(--space-2xl);
}
.page-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}
.page-hero__eyebrow::before {
    content: "";
    inline-size: var(--kicker-width);
    block-size: var(--hairline);
    background: var(--gradient-gold);
}
.page-hero__title {
    font-size: clamp(var(--fs-xl), 4.2vw, var(--fs-3xl));
    max-inline-size: 22ch;
}
.page-hero__text {
    max-inline-size: 44rem;
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: var(--color-text);
}
.page-hero__badge { margin-block-end: var(--space-xs); }

@media (min-width: 768px) {
    .page-hero__inner { padding-block: var(--space-3xl); }
    .page-hero__text { font-size: var(--fs-lg); }
}

/* =====================================================================
   Page hero — compact modifier. Introduced by R01 for solution-details.html
   and reused unchanged by R02 for solutions.html, so the two neighbouring
   pages share one band height. Opt-in only: the base .page-hero is untouched
   and every template without --compact keeps its current band.
   ===================================================================== */
.page-hero--compact { min-block-size: clamp(140px, 15vw, 180px); }   /* exactly half the base band */
/* The hero image sits inside a <picture>, which is an inline box of auto height, so the
   image's own `block-size: 100%` has nothing to resolve against: it lays out at its natural
   2:1 (1440x720 here) and the hero merely clips the top of it with overflow:hidden —
   `object-fit: cover` never applies. At the full-height band that still showed the subject;
   at half height it clipped to blank wall. Giving the <picture> the media box makes the image
   box 1440x180, so cover does a real crop and object-position starts working.
   Scoped to --compact: the heroes without the modifier keep their current rendering. */
.page-hero--compact .page-hero__media picture {
    display: block;
    block-size: 100%;
}
/* Each page sets its own object-position for its own photograph (css/pages/*.css):
   the focal point of a hero image is per-image, not per-modifier. */
/* Half the band leaves no room for a heading that wraps, so the compact hero gives the
   <h1> a wider measure than the 22ch of the full-height band. It is a ceiling, not a width:
   a heading short enough to fit the base measure is laid out exactly as before. */
.page-hero--compact .page-hero__title { max-inline-size: 26ch; }
.page-hero--compact .page-hero__inner {
    gap: var(--space-xs);
    padding-block: var(--space-sm);
}
.page-hero__subtitle {
    max-inline-size: 60ch;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
}

@media (min-width: 768px) {
    .page-hero--compact .page-hero__inner {
        gap: var(--space-sm);
        padding-block: var(--space-md);
    }
}

/* =====================================================================
   Breadcrumb — slim bar under the page hero (engineering Fix 6: the list's
   own margin/padding is zeroed in the component, not only in the reset)
   ===================================================================== */
.breadcrumb {
    background-color: var(--color-surface);
    border-block-end: var(--hairline) solid var(--color-border-subtle);
}
.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    font-size: var(--fs-sm);
}
.breadcrumb__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-block-size: var(--touch-target);
    color: var(--color-text-muted);
}
.breadcrumb__item + .breadcrumb__item::before {
    content: "";
    inline-size: var(--space-xs);
    block-size: var(--space-xs);
    border: var(--hairline) solid var(--color-accent);
    transform: rotate(45deg);
}
.breadcrumb__link {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44x44 minimum: short labels such as "Home" would otherwise be a 38px-wide target */
    min-inline-size: var(--touch-target);
    min-block-size: var(--touch-target);
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}
.breadcrumb__current { color: var(--color-text); }

@media (hover: hover) {
    .breadcrumb__link:hover { color: var(--color-accent-highlight); }
}

/* =====================================================================
   Panel — bordered content block (ETQAN Approach, Vision & Mission,
   Customer Need). Sits one step off the section it is placed on.
   ===================================================================== */
.panel {
    display: grid;
    align-content: start;
    gap: var(--space-md);
    block-size: 100%;
    padding: var(--space-xl);
    background-color: var(--color-surface);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius-card);
}
.section--raised .panel { background-color: var(--color-bg); }
.panel__head {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}
.panel__icon {
    inline-size: var(--icon-lg);
    block-size: var(--icon-lg);
    color: var(--color-accent);
}
.panel__title {
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    letter-spacing: 0;
}
.panel__text {
    display: grid;
    gap: var(--space-md);
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
}
.panel--feature {
    position: relative;
    padding-block-start: var(--space-2xl);
}
/* gold kicker on the top edge, the page's single separator system */
.panel--feature::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--hairline) * -1);
    inset-block-start: calc(var(--hairline) * -1);
    inline-size: var(--kicker-width);
    block-size: var(--rule);
    background: var(--gradient-gold);
}

/* =====================================================================
   Split — two-column copy + photo block (the home page's intro rhythm)
   ===================================================================== */
.split { display: grid; gap: var(--space-2xl); }
.split__text {
    display: grid;
    gap: var(--space-md);
    color: var(--color-text-muted);
    line-height: var(--lh-body);
}
.split__lead {
    font-size: var(--fs-lg);
    color: var(--color-text);
}
.split__media {
    border-radius: var(--radius-card);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.split__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

@media (min-width: 992px) {
    .split {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        column-gap: var(--space-4xl);
        align-items: center;
    }
    .split--media-start .split__media { order: -1; }
}

/* =====================================================================
   Spec list — capability lists with gold check markers
   ===================================================================== */
.spec-list {
    display: grid;
    gap: var(--space-md);
}
.spec-list__item {
    display: grid;
    grid-template-columns: var(--icon-sm) minmax(0, 1fr);
    gap: var(--space-md);
    align-items: start;
    line-height: var(--lh-body);
    color: var(--color-text);
}
.spec-list__icon {
    inline-size: var(--icon-sm);
    block-size: var(--icon-sm);
    margin-block-start: 0.4em;
    color: var(--color-accent);
}

@media (min-width: 768px) {
    .spec-list--2col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-2xl);
    }
}

/* =====================================================================
   Process — numbered steps joined by a gold connector line
   ===================================================================== */
.process {
    display: grid;
    gap: var(--space-xl);
}
.process__step {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: start;
}
.process__step:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-block-start: var(--btn-height-lg);
    inset-block-end: calc(var(--space-xl) * -1);
    inset-inline-start: calc(var(--btn-height-lg) / 2);
    inline-size: var(--hairline);
    background-image: linear-gradient(180deg, var(--color-border-strong), var(--color-border-subtle));
}
.process__marker {
    display: grid;
    place-items: center;
    inline-size: var(--btn-height-lg);
    block-size: var(--btn-height-lg);
    background-color: var(--color-bg);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius-button);
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    font-weight: var(--fw-light);
    font-variant-numeric: tabular-nums;
    color: var(--color-accent);
}
.section--raised .process__marker { background-color: var(--color-surface); }
.process__body {
    display: grid;
    gap: var(--space-sm);
    padding-block-start: var(--space-sm);
}
.process__title {
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    letter-spacing: 0;
}
.process__text {
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
}
.process--compact .process__title { font-size: var(--fs-md); }
.process--compact .process__text { font-size: var(--fs-sm); }

/* =====================================================================
   Fact strip — key/value band (case-study facts), same grid signature as .stats
   ===================================================================== */
.fact-strip {
    display: grid;
    /* one column on the narrowest phones: two columns clip the tracked-out labels at 320px */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hairline);
    background-color: var(--color-border);
    border: var(--hairline) solid var(--color-border);
}
.fact-strip__item {
    display: grid;
    align-content: start;
    gap: var(--space-xs);
    padding: var(--space-lg);
    background-color: var(--color-bg);
}
.section--raised .fact-strip__item { background-color: var(--color-surface); }
.fact-strip__label {
    overflow-wrap: break-word;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.fact-strip__value {
    overflow-wrap: break-word;
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    line-height: var(--lh-snug);
    color: var(--color-accent);
}

@media (min-width: 576px) {
    .fact-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .fact-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =====================================================================
   Detail layout — main column plus a rail on wide screens
   ===================================================================== */
.detail-layout { display: grid; gap: var(--space-3xl); }
.detail-layout__main { display: grid; align-content: start; gap: var(--space-3xl); }
.detail-layout__aside { display: grid; align-content: start; gap: var(--space-lg); }

@media (min-width: 1200px) {
    .detail-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
        column-gap: var(--space-4xl);
        align-items: start;
    }
    .detail-layout__aside { position: sticky; inset-block-start: calc(var(--header-height-compact) + var(--space-lg)); }
}

.rail {
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background-color: var(--color-bg);
    border: var(--hairline) solid var(--color-border-subtle);
    border-radius: var(--radius-card);
}
.section--raised .rail { background-color: var(--color-surface); }
.rail__title {
    margin-block-end: var(--space-xs);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-accent);
}
.rail__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    min-block-size: var(--touch-target);
    padding-block: var(--space-sm);
    border-block-end: var(--hairline) solid var(--color-border-subtle);
    font-size: var(--fs-sm);
    color: var(--color-text);
    transition: color var(--transition-fast);
}
.rail__list > li:last-child .rail__link { border-block-end: 0; }
.rail__icon {
    inline-size: var(--icon-sm);
    block-size: var(--icon-sm);
    color: var(--color-accent);
    transition: transform var(--transition-base);
}

@media (hover: hover) {
    .rail__link:hover { color: var(--color-accent-highlight); }
    .rail__link:hover .rail__icon { transform: translateX(calc(var(--space-xs) * var(--dir-sign))); }
}

/* =====================================================================
   Note strip, empty state, static chip, pagination
   ===================================================================== */
.note {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background-color: var(--color-surface-2);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius-card);
}
.note__icon {
    inline-size: var(--icon-lg);
    block-size: var(--icon-lg);
    color: var(--color-accent);
}
.note__text {
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-button);
    color: var(--color-text);
}

.empty-state {
    display: grid;
    justify-items: start;
    gap: var(--space-sm);
    padding: var(--space-xl);
    border: var(--hairline) dashed var(--color-border-subtle);
    border-radius: var(--radius-card);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
}
.empty-state__icon {
    inline-size: var(--icon-lg);
    block-size: var(--icon-lg);
    color: var(--color-accent);
}

.chip--static { cursor: default; }

.pagination__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
}
.pagination__link {
    display: grid;
    place-items: center;
    min-inline-size: var(--touch-target);
    min-block-size: var(--touch-target);
    padding-inline: var(--space-sm);
    border: var(--hairline) solid var(--color-border-subtle);
    border-radius: var(--radius-button);
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}
.pagination__link[aria-current="page"] {
    background-color: var(--color-accent-wash);
    border-color: var(--color-border-strong);
    color: var(--color-accent);
}
.pagination__link[aria-disabled="true"] {
    color: var(--color-text-muted);
    opacity: 0.6;
    pointer-events: none;
}
.pagination__icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

@media (hover: hover) {
    .pagination__link:hover { border-color: var(--color-border-strong); color: var(--color-accent-highlight); }
}

/* =====================================================================
   Brand card — the card component carrying the home page's tinted logo plate
   ===================================================================== */
.brand-card__plate {
    display: grid;
    place-items: center;
    inline-size: 100%;
    /* block-size: calc(var(--btn-height-lg) + var(--space-lg)); */
    padding-inline: var(--space-md);
    background-color: var(--color-surface);
    border: var(--hairline) solid var(--color-border-subtle);
    transition: background-color var(--transition-base), border-color var(--transition-base);
}
.brand-card__logo {
    grid-area: 1 / 1;
    inline-size: auto;
    /* the width/height attributes act as a fixed height unless this is auto, which would
       squash the logo when max-inline-size binds (Lighthouse image-aspect-ratio) */
    block-size: auto;
    max-inline-size: 70%;
    max-block-size: 100%;
    filter: url("#tint-logo-rest");
    transition: opacity var(--transition-slow);
}
.brand-card__logo--gold {
    filter: url("#tint-logo-gold");
    opacity: 0;
}
.brand-card__wordmark {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-button);
    color: var(--color-text-muted);
    transition: color var(--transition-slow);
}
.brand-card__title { font-size: var(--fs-md); }

@media (hover: hover) {
    .card:hover .brand-card__plate { border-color: var(--color-border); background-color: var(--color-surface-2); }
    .card:hover .brand-card__logo { opacity: 0; }
    .card:hover .brand-card__logo--gold { opacity: 1; }
    .card:hover .brand-card__wordmark { color: var(--color-accent); }
}

/* =====================================================================
   Map frame — one live map (Baghdad) and two framed placeholders
   ===================================================================== */
.map-frame {
    position: relative;
    aspect-ratio: 4 / 3;
    background-color: var(--color-surface);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
}
.map-frame__embed {
    inline-size: 100%;
    block-size: 100%;
    border: 0;
}
.map-frame--pending {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border-style: dashed;
    border-color: var(--color-border-subtle);
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}
.map-frame__icon {
    inline-size: var(--icon-xl);
    block-size: var(--icon-xl);
    color: var(--color-accent);
}
.map-frame__label {
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    color: var(--color-text);
}

/* =====================================================================
   Logo row — compact authorized-brand row on the detail templates.
   Same two-copy tint swap as the home page's brand grid.
   ===================================================================== */
.logo-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}
.logo-row__link {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 10rem;
    block-size: calc(var(--touch-target) + var(--space-md));
    padding-inline: var(--space-md);
    background-color: var(--color-bg);
    border: var(--hairline) solid var(--color-border-subtle);
    border-radius: var(--radius-button);
    transition: border-color var(--transition-base), background-color var(--transition-base);
}
.section--raised .logo-row__link { background-color: var(--color-surface); }
.logo-row__logo {
    grid-area: 1 / 1;
    inline-size: auto;
    block-size: auto;
    max-inline-size: 100%;
    max-block-size: 60%;
    filter: url("#tint-logo-rest");
    transition: opacity var(--transition-slow);
}
.logo-row__logo--gold {
    filter: url("#tint-logo-gold");
    opacity: 0;
}
.logo-row__wordmark {
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-button);
    color: var(--color-text-muted);
    transition: color var(--transition-slow);
}
.logo-row__link:focus-visible .logo-row__logo { opacity: 0; }
.logo-row__link:focus-visible .logo-row__logo--gold { opacity: 1; }

@media (hover: hover) {
    .logo-row__link:hover { border-color: var(--color-border-strong); background-color: var(--color-accent-wash); }
    .logo-row__link:hover .logo-row__logo { opacity: 0; }
    .logo-row__link:hover .logo-row__logo--gold { opacity: 1; }
    .logo-row__link:hover .logo-row__wordmark { color: var(--color-accent); }
}

/* =====================================================================
   Brand hero block — logo plate + Authorized Distributor badge in the page hero
   ===================================================================== */
.page-hero__brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-lg);
}
.page-hero__brand-plate {
    display: grid;
    place-items: center;
    min-inline-size: 11rem;
    /* block-size: calc(var(--btn-height-lg) + var(--space-md)); */
    padding-inline: var(--space-lg);
    background-color: var(--color-scrim-badge);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius-button);
}
.page-hero__brand-logo {
    inline-size: auto;
    block-size: auto;
    max-inline-size: 100%;
    max-block-size: 60%;
    max-height: 55px;
    filter: url("#tint-logo-gold");
}

/* Between 1200px and 1360px the container edge runs into the floating contact stack, so the
   sticky rail keeps its interactive content clear of it (engineering Fix 9: a tap at one
   target's edge must not land on its neighbour). Above 1360px the gutter is wide enough. */
@media (min-width: 1200px) and (max-width: 1359.98px) {
    .detail-layout__aside { padding-inline-end: var(--space-3xl); }
}

/* =====================================================================
   Map facade — the click-to-load stand-in for the Google Maps iframe.
   It fills the same 4:3 frame, so swapping in the real map shifts nothing.
   ===================================================================== */
.map-facade {
    position: relative;
    display: block;
    inline-size: 100%;
    block-size: 100%;
    overflow: hidden;
    cursor: pointer;
}
.map-facade:focus-visible { outline-offset: calc(var(--focus-offset) * -1); }
.map-facade__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}
.map-facade__overlay {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background-color: var(--color-backdrop);
    text-align: center;
    transition: background-color var(--transition-base);
}
.map-facade__note {
    max-inline-size: 26rem;
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--color-text-muted);
}

@media (hover: hover) {
    .map-facade:hover .map-facade__overlay { background-color: var(--color-scrim-badge); }
    .map-facade:hover .map-facade__btn { background-position: 0 0; box-shadow: var(--shadow-glow-gold); }
}