/* ================================================================
   page-header.css
   The site-wide page header chrome: breadcrumb strip + optional hero.
   Loaded globally from base.html so every page can drop in the
   `{% block breadcrumbs %}` and `{% block page_hero %}` overrides
   without needing to pull in `page-detail-frame.css` (which is now
   detail-page-specific).

   Sections
   ────────
     1. Body padding (auto)         body:has(.cc-detail-breadcrumb, .cc-detail-hero)
     2. Breadcrumb strip            .cc-detail-breadcrumb*
     3. Hero strip                  .cc-detail-hero*

   Used by
   ───────
   Every page that renders the breadcrumb or hero block from base.html.
   The body padding is applied automatically via :has() when either
   piece of chrome is present, so the homepage (which has neither)
   doesn't get the extra top space.
   ================================================================ */


/* === 1. Body padding (auto) =====================================
   The fixed top nav doesn't take flow space. Pages that render a
   breadcrumb or hero get pushed down by --nav-h so the chrome sits
   flush against the bottom of the nav. Pages with neither (e.g.
   the homepage) keep their natural top edge under the nav. The
   :has() selector handles both cases automatically, no per-page
   body class needed. */
body:has(.cc-detail-breadcrumb, .cc-detail-hero) {
    padding-top: var(--nav-h);
}
body:has(.cc-detail-breadcrumb, .cc-detail-hero) .content {
    margin-top: 0;
    padding-top: 0;
}


/* === 2. Breadcrumb strip ========================================
   White full-bleed strip directly under the fixed nav. Single line
   on wide viewports, wraps on narrow ones. Each <li> sets its own
   font-family + font-size so unscoped page-level `li` rules can't
   bleed through via specificity ties. */
.cc-detail-breadcrumb {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    background: var(--white);
    padding-block: var(--space-sm);
    box-sizing: border-box;
}

.cc-detail-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--space-md);
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    color: var(--color-muted);
    flex-wrap: wrap;
}

.cc-detail-breadcrumb li {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
}

.cc-detail-breadcrumb li + li::before {
    content: "›";
    margin-right: var(--space-xs);
    color: var(--color-muted);
}

.cc-detail-breadcrumb a {
    color: var(--color-muted);
    text-decoration: none;
    transition: color var(--transition-base);
}

.cc-detail-breadcrumb a:hover {
    color: var(--ae-darkblue);
}

.cc-detail-breadcrumb [aria-current="page"] {
    color: var(--ae-black);
    font-weight: 600;
}


/* === 3. Hero strip ==============================================
   Grey full-bleed strip below the breadcrumb. Two-column grid:
   optional image (flag / logo / icon) on the left, title + lede on
   the right. When the image is absent, the grid auto-collapses to
   a single full-width text column via the :has() selector below. */
.cc-detail-hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--ae-white);
    border-block: 1px solid var(--color-input-border);
    padding-block: var(--space-xl);
    box-sizing: border-box;
}

.cc-detail-hero__inner {
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--space-md);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-lg);
    align-items: center;
}

/* Hero without an image collapses to a single full-width text
   column. The 2-column auto+1fr template above would otherwise
   leave the text shrink-wrapped to content width. */
.cc-detail-hero__inner:not(:has(.cc-detail-hero__flag)) {
    grid-template-columns: 1fr;
}

.cc-detail-hero__flag {
    flex: 0 0 auto;
}

.cc-detail-hero__flag img {
    /* Width-only + height:auto preserves the natural ratio of the
       image (typically ~3:2 for flags, square for commodity icons,
       variable for company logos). Small radius works at any aspect. */
    width: 96px;
    height: auto;
    border-radius: 4px;
    box-shadow: var(--shadow);
    background: var(--white);
    display: block;
}

/* Bare modifier — strips the background, shadow and rounded corners
   from the hero image. Use on pages where the asset already carries
   its own visual treatment (company logos, transparent commodity
   icons) and the surrounding box reads as a stray box around a small
   icon. Country / EU flag pages keep the default chrome since flat
   SVG flags benefit from the rounded white tile against the hero's
   coloured background. */
.cc-detail-hero__flag--bare img {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    /* Slightly larger so a transparent-edged icon doesn't read as
       smaller than a flag would. */
    width: 120px;
}

.cc-detail-hero__text h1 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    color: var(--ae-black);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* Optional status pill between the title and the intro. Two-state
   modifier system: --available paints the pill in the AE land-dark
   green, --unavailable paints it in AE orange to signal that the
   resource (e.g. company profile PDF) hasn't been published yet.
   The dot inherits currentColor so a single modifier sets both
   the ring and the dot. */
.cc-detail-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: var(--space-sm) 0 0;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: transparent;
    border: 1.5px solid currentColor;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
}

.cc-detail-hero__badge--available   { color: var(--ae-land-dark); }
.cc-detail-hero__badge--unavailable { color: var(--ae-orange); }

.cc-detail-hero__badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}


.cc-detail-hero__intro {
    margin: var(--space-sm) 0 0;
    max-width: 70ch;
    font-family: var(--font-body);
    font-size: var(--fs-lg);
    line-height: 1.55;
    color: var(--text-muted);
}


/* === Responsive (≤900px) ========================================
   Stack the hero's image above the text on narrow viewports. */
@media (max-width: 900px) {
    .cc-detail-hero__inner {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .cc-detail-hero__flag img {
        width: 72px;
    }
}