/**
 * cg/hero block — frontend styles.
 *
 * Self-contained layout CSS for the three render shapes the block emits:
 *   image-bg     wp-block-cover style (absolute-positioned image + overlay + content)
 *   image-right  wp-block-media-text style with image on the right
 *   image-left   wp-block-media-text style with image on the left
 *   solid        wp-block-group style with centered content
 *
 * We don't depend on WP core Cover / MediaText / Group stylesheets because the
 * cg/hero block re-uses their class names structurally but is registered
 * separately, so core wouldn't auto-enqueue them.
 */

.cg-hero {
    position: relative;
    /* The block always renders `alignfull`. width:auto (not 100%) lets it
       expand into the negative breakout margins WP applies to .alignfull
       children of a root-padding-aware constrained layout; a percentage width
       resolves against the padded content box and stops short of the edges. */
    width: auto;
    box-sizing: border-box;
}

/* ---------- heights ----------
   Scoped to the doubled class (.cg-hero.<core-class>, specificity 0,2,0) so the
   hero min-height always beats WP core's .wp-block-cover{min-height:430px}
   (0,1,0), which WP enqueues whenever a real core/cover block is on the page.
   Relying on the Tailwind min-h-[…] utility (also 0,1,0) loses to core. */
.cg-hero.wp-block-cover,
.cg-hero.wp-block-media-text,
.cg-hero.wp-block-group { min-height: 0; }

.cg-hero.cg-hero--h-small  { min-height: 400px; }
.cg-hero.cg-hero--h-medium { min-height: 460px; }
.cg-hero.cg-hero--h-large  { min-height: 520px; }
.cg-hero.cg-hero--h-full   { min-height: 560px; }

@media (min-width: 1024px) {
    .cg-hero.cg-hero--h-small  { min-height: 460px; }
    .cg-hero.cg-hero--h-medium { min-height: 620px; }
    .cg-hero.cg-hero--h-large  { min-height: 760px; }
    .cg-hero.cg-hero--h-full   { min-height: 820px; }
}

/* ---------- image-bg layout ---------- */

.cg-hero.wp-block-cover {
    display: flex;
    /* Column flex centres the content vertically (justify-content) while the
       inner-container's width:min() resolves against the cover width on the
       CROSS axis — avoiding the row-flex percentage-sizing quirk. */
    flex-direction: column;
    justify-content: center;
    /* Override core cover's align-items:center (loaded when a real cover block is
       on the page) so the inner stretches full-width and the frame can size. */
    align-items: stretch;
    overflow: hidden;
    /* Image bleeds full-width; the inner-container positions the text on the
       page content frame (see below) so the headline aligns with the nav logo /
       page content at EVERY width, not just at 1512. */
    padding-block: 5rem;
    padding-inline: 0;
}
.cg-hero.wp-block-cover .wp-block-cover__image-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.cg-hero.wp-block-cover .wp-block-cover__background {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
/* WP-style dim opacity helpers (since we emit has-background-dim-N classes
   but core Cover CSS isn't loaded). */
.cg-hero .wp-block-cover__background.has-background-dim    { opacity: 0.5; }
.cg-hero .wp-block-cover__background.has-background-dim-0  { opacity: 0; }
.cg-hero .wp-block-cover__background.has-background-dim-10 { opacity: 0.1; }
.cg-hero .wp-block-cover__background.has-background-dim-20 { opacity: 0.2; }
.cg-hero .wp-block-cover__background.has-background-dim-30 { opacity: 0.3; }
.cg-hero .wp-block-cover__background.has-background-dim-40 { opacity: 0.4; }
.cg-hero .wp-block-cover__background.has-background-dim-50 { opacity: 0.5; }
.cg-hero .wp-block-cover__background.has-background-dim-60 { opacity: 0.6; }
.cg-hero .wp-block-cover__background.has-background-dim-70 { opacity: 0.7; }
.cg-hero .wp-block-cover__background.has-background-dim-80 { opacity: 0.8; }

.cg-hero.wp-block-cover .wp-block-cover__inner-container {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Block-level content frame: caps at the content width and centres, so the hero
   text sits on the SAME column as the nav / page content at every width (left
   edge tracks the content gutter, not the viewport edge). A block resolves
   width:min() against the cover; a flex item does not (intrinsic-sizing quirk). */
.cg-hero .cg-hero__frame {
    width: min(100% - 2 * var(--cg-gutter, 1.5rem), var(--cg-content-max, 1352px));
    margin-inline: auto;
}

/* Keep the text a readable column within the frame. */
.cg-hero .cg-hero__headline { max-width: 45rem; }

/* ---------- image-bg text placement ----------
   Vertical: the cover is a column flex, so justify-content moves the frame
   along the hero height. Own modifiers (not core is-position-* classes —
   core's has-custom-content-position rules assume a row-flex cover and would
   fight this layout when a real core/cover is on the page). */
.cg-hero.cg-hero--v-top    { justify-content: flex-start; }
.cg-hero.cg-hero--v-middle { justify-content: center; }
.cg-hero.cg-hero--v-bottom { justify-content: flex-end; }

/* Horizontal: alignment within the content frame. The headline/body keep
   their readable max-width caps, so the capped blocks are pulled to the
   chosen side with margins. Left is the default flow — no rule needed. */
.cg-hero.cg-hero--x-center .cg-hero__frame { text-align: center; }
.cg-hero.cg-hero--x-center .cg-hero__headline,
.cg-hero.cg-hero--x-center .cg-hero__body { margin-inline: auto; }

.cg-hero.cg-hero--x-right .cg-hero__frame { text-align: right; }
.cg-hero.cg-hero--x-right .cg-hero__headline,
.cg-hero.cg-hero--x-right .cg-hero__body { margin-inline-start: auto; }

/* ---------- image-right / image-left layout ---------- */

.cg-hero.wp-block-media-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    /* Constrained variant: breathing room from the header above and the section
       below (the page ground shows in this space). The content-width cap +
       centring come from the editor's constrained layout. */
    margin-block: clamp(2rem, 4vw, 3rem);
}
.cg-hero.wp-block-media-text .wp-block-media-text__media {
    margin: 0;
    overflow: hidden;
    min-height: 100%;
}
.cg-hero.wp-block-media-text .wp-block-media-text__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cg-hero.wp-block-media-text .wp-block-media-text__content {
    /* The hero is constrained to the content frame, so the text column's left
       edge already sits on the page gutter — no extra start inset. End padding
       is just the gap to the image. */
    padding-block: clamp(1.5rem, 3vw, 2.5rem);
    padding-inline-start: 0;
    padding-inline-end: clamp(1.5rem, 3vw, 3rem);
    display: flex;
    flex-direction: column;
    /* Top-aligned: breadcrumb + headline sit at the top of the hero, with empty
       space below (Figma 4288:8092 — pt, no vertical centering). */
    justify-content: flex-start;
}
.cg-hero.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
    order: 1;
}
.cg-hero.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
    order: 2;
}

@media (min-width: 1024px) {
    /* Image-right/left heroes size to their image (Figma uses a 670×470 photo,
       ~1.43:1), so the band stays ~530px like the design instead of stretching
       the photo to a tall cover min-height. The cg-hero--h-* min-heights are for
       the full-bleed image-bg hero; neutralise them for the two-column layout. */
    .cg-hero.wp-block-media-text.cg-hero--h-small,
    .cg-hero.wp-block-media-text.cg-hero--h-medium,
    .cg-hero.wp-block-media-text.cg-hero--h-large,
    .cg-hero.wp-block-media-text.cg-hero--h-full {
        min-height: 0;
    }
    .cg-hero.wp-block-media-text .wp-block-media-text__media {
        aspect-ratio: 67 / 47;
        min-height: 0;
    }
}

@media (max-width: 768px) {
    .cg-hero.wp-block-media-text {
        grid-template-columns: 1fr;
    }
    .cg-hero.wp-block-media-text .wp-block-media-text__media,
    .cg-hero.wp-block-media-text .wp-block-media-text__content {
        order: unset;
    }
}

/* ---------- solid (no-image) layout ---------- */

.cg-hero.wp-block-group {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* ---------- breadcrumb (two-tone: muted ancestors, bright current) ---------- */

.cg-hero__breadcrumb a,
.cg-hero__breadcrumb .cg-breadcrumb__sep {
    color: var(--color-theme-400);
    text-decoration: none;
}
.cg-hero__breadcrumb [aria-current="page"] {
    color: inherit; /* the hero's text colour (off-white-ish on a dark hero) */
}

/* ---------- typography defaults inside any cg-hero ---------- */

.cg-hero .cg-hero__headline {
    margin: 0;
    /* Figma hero titles (e.g. 4288:8095) are Martina Regular at leading 1.15 with
       tracking-tight -0.2px — not the cramped leading-none/tracking-tight the
       block used before. */
    line-height: 1.15;
    letter-spacing: -0.2px;
}
.cg-hero .cg-hero__body {
    margin: 1.5rem 0 0;
    max-width: 36rem;
}
.cg-hero .cg-hero__cta {
    text-decoration: none;
    display: inline-block;
}