/* Hero: half and half. Copy on the primary stage (with the diagonal hatch) starts at the container's left edge; the
 * photo fills the right side to the viewport edge with a pressed rating card; an arched triple-stripe band closes both. */
.ocf-hero {
    --cardiff-hero-edge: max(var(--container-pad), calc((100cqw - var(--container-max)) / 2));
    container-type: inline-size;
    --cardiff-hero-photo: 41.7%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ocf-primary);
}

.ocf-hero__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--cardiff-hero-photo);
    /* Most of the first screen: about 97% of the height under the header, so the arch sits just above the fold
     * (capped so very tall screens stay sensible). */
    min-height: clamp(560px, calc((100svh - var(--wp-admin-bar-offset, 0px) - var(--cardiff-nav-row-height, var(--ocf-header-height)) - var(--cardiff-pinstripe-height)) * 0.97 - var(--cardiff-stripe) * 3), 945px);
}

.ocf-hero__stage {
    position: relative;
    overflow: hidden;
    padding: clamp(48px, 5vw, 72px) clamp(32px, 4.5vw, 64px) clamp(56px, 5.5vw, 80px) var(--cardiff-hero-edge);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--ocf-primary);
    color: var(--ocf-heading-alt);
}

.ocf-hero__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 640px;
}

/* Pressed light chip for the eyebrow, with a pin. */
.cardiff-chip {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--ocf-space-unit) * 0.625);
    margin: 0;
    padding: calc(var(--ocf-space-unit) * 0.5) calc(var(--ocf-space-unit) * 1.25);
    border: var(--button-border-width) solid var(--cardiff-ink);
    border-radius: var(--button-radius);
    background: var(--ocf-bg-alt);
    box-shadow: 0 calc(var(--cardiff-press) - 1px) 0 var(--cardiff-ink);
    color: var(--ocf-heading);
    font-family: var(--ocf-font-heading), system-ui, sans-serif;
    font-size: var(--cardiff-label-size);
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
}

.cardiff-chip svg { width: 1.1em; height: 1.1em; flex: none; color: var(--ocf-primary); }

html[data-theme="dark"] .cardiff-chip { background: var(--ocf-dark-heading); color: var(--ocf-dark-bg); }

.ocf-hero .ocf-hero__headline {
    margin: calc(var(--ocf-grid-gap) * 1) 0 0;
    color: inherit;
    font-size: clamp(42px, 5.3vw, 76px);
    line-height: 0.95;
}

.ocf-hero__intro {
    margin: calc(var(--ocf-grid-gap) * 0.875) 0 0;
    color: var(--ocf-body-alt);
    font-size: calc(var(--font-body-size) * 1.11);
    line-height: var(--ocf-font-body-line);
}

.ocf-hero .ocf-actions {
    gap: calc(var(--ocf-space-unit) * 1.125);
    margin-top: calc(var(--ocf-grid-gap) * 1.25);
}

.cardiff-call svg {
    width: calc(var(--ocf-space-unit) * 1.05);
    height: calc(var(--ocf-space-unit) * 1.05);
}

/* Check list under the actions: light circles with a primary tick. */
.ocf-hero__checks {
    display: flex;
    flex-direction: column;
    gap: calc(var(--ocf-space-unit) * 0.75);
    margin: calc(var(--ocf-grid-gap) * 1.25) 0 0;
    padding: 0;
    list-style: none;
    color: var(--ocf-heading-alt);
    font-weight: var(--font-weight-semibold);
}

.ocf-hero__checks li { display: flex; align-items: center; gap: calc(var(--ocf-space-unit) * 0.75); }
.ocf-hero__check { display: inline-flex; flex: none; color: var(--ocf-heading-alt); }
.ocf-hero__check svg { width: calc(var(--ocf-space-unit) * 1.5); height: calc(var(--ocf-space-unit) * 1.5); }

/* Photo: edge to edge on the right, split from the stage by a heading-colored rule. */
.ocf-hero__media {
    position: relative;
    min-height: 100%;
    border-left: calc(var(--button-border-width) * 2) solid var(--cardiff-ink);
    background: var(--ocf-bg-alt);
}

.ocf-hero__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pressed rating card on the photo's lower left. */
.ocf-hero__rating {
    position: absolute;
    left: clamp(20px, 2.8vw, 40px);
    bottom: clamp(24px, 3vw, 44px);
    display: flex;
    flex-direction: column;
    gap: calc(var(--ocf-space-unit) * 0.25);
    margin: 0;
    padding: calc(var(--ocf-space-unit) * 1) calc(var(--ocf-space-unit) * 1.375);
    border: var(--button-border-width) solid var(--cardiff-ink);
    border-radius: var(--card-radius);
    background: var(--ocf-bg);
    box-shadow: 0 calc(var(--cardiff-press) + 1px) 0 var(--cardiff-ink);
    color: var(--ocf-heading);
}

.ocf-hero__rating-top { display: flex; align-items: center; gap: calc(var(--ocf-space-unit) * 0.625); }
.ocf-hero__stars { color: var(--cardiff-star); font-size: calc(var(--font-body-size) * 1.2); letter-spacing: 0.08em; line-height: 1; }
.ocf-hero__rating strong { font-family: var(--ocf-font-heading), system-ui, sans-serif; font-size: calc(var(--font-body-size) * 1.6); font-weight: 800; line-height: 1; }
.ocf-hero__rating-label { color: var(--ocf-body); font-size: var(--ocf-font-small-size); }

html[data-theme="dark"] .ocf-hero__rating { background: var(--ocf-dark-bg-alt); border-color: var(--ocf-dark-border); color: var(--ocf-dark-heading); }
html[data-theme="dark"] .ocf-hero__rating-label { color: var(--ocf-dark-body); }

/* Closing band: the triple stripe as a wide, shallow arch, highest mid-page. The SVG is 66 units tall (24 of rise +
 * 3 x 14 of stripes) and scales with --cardiff-stripe; its top 24 units overlap the hero so the sides show through. */
.cardiff-arch {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: calc(var(--cardiff-stripe) * 3 * 66 / 42);
    max-width: none;
    margin-top: calc(var(--cardiff-stripe) * 3 * -24 / 42);
}

/* Narrower screens show only the arch's flatter middle, so the curve stays as gentle as on desktop. */
@media (max-width: 1023px) { .cardiff-arch { width: 150%; margin-left: -25%; } }
@media (max-width: 767px) { .cardiff-arch { width: 200%; margin-left: -50%; } }

.cardiff-arch__tint { fill: var(--cardiff-tint); }
.cardiff-arch__silver { fill: var(--ocf-border); }
.cardiff-arch__ink { fill: var(--cardiff-ink); }
.cardiff-arch__bg { fill: var(--ocf-bg); }

@media (max-width: 900px) {
    .ocf-hero__split { grid-template-columns: 1fr; min-height: 0; }
    .ocf-hero__stage { padding-inline: var(--container-pad); }
    .ocf-hero__media { aspect-ratio: 4 / 3; min-height: 0; border-left: 0; border-top: calc(var(--button-border-width) * 2) solid var(--cardiff-ink); }
}

@media (max-width: 767px) {
    .ocf-hero .ocf-actions { flex-direction: column; align-items: stretch; width: 100%; }
    .ocf-hero .ocf-actions > a { width: 100%; }
    .cardiff-chip { padding-inline: calc(var(--ocf-space-unit) * 0.875); font-size: calc(var(--cardiff-label-size) * 0.8); letter-spacing: 0.03em; }
}