/* SFH2026 jumbotron panel — full-bleed photo with a centered translucent panel */
.sfh-jpanel {
    position: relative;
    overflow: hidden;
    background: #0c0c0c;
    color: #fff;
    display: flex;
    align-items: center;
    /* Left, not centre — the copy sits on the page's own grid line. */
    justify-content: flex-start;
    padding: clamp(32px, 6vh, 64px) 0;
}
.sfh-jpanel-full   { min-height: 92vh; }
.sfh-jpanel-large  { min-height: clamp(440px, 62vh, 700px); }
.sfh-jpanel-medium { min-height: clamp(330px, 44vh, 480px); }
.sfh-jpanel-small  { min-height: clamp(220px, 30vh, 340px); }
.sfh-jpanel-media { position: absolute; inset: 0; background-position: center; background-size: cover; }

/* The shade replaces the old translucent box. Darkest at the left edge where the
   copy sits and clearing by the middle, so the photograph is still a photograph
   -- the SFH sign in this one is the whole point of the picture.
   --sfh-jpanel-shade comes from the overlay_opacity setting, and the stops are
   calc'd off it so the field still does something over its whole range. */
.sfh-jpanel-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        100deg,
        rgba(12,12,12, calc(var(--sfh-jpanel-shade, .55) + .25)) 0%,
        rgba(12,12,12, var(--sfh-jpanel-shade, .55)) 38%,
        rgba(12,12,12, calc(var(--sfh-jpanel-shade, .55) * .35)) 68%,
        rgba(12,12,12, calc(var(--sfh-jpanel-shade, .55) * .15)) 100%);
}

/* On the theme grid, like every other full-bleed section: the +40 is the
   border-box gutter this box carries itself (see the max-width note in
   CLAUDE.md). Without it the copy sits 20px off every other section's left. */
.sfh-jpanel-box {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: calc(var(--cms2-max-width, 1280px) + 40px);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}
/* Red, as the design has it — the eyebrow is the one accent above the heading. */
.sfh-jpanel-eyebrow {
    margin: 0 0 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #ff5f6d;
}
.sfh-jpanel-heading {
    margin: 0 0 0px;
    font-size: clamp(38px, 7vw, 72px);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.sfh-jpanel-heading-white { color: #fff; }
/* Figma's fill for this heading: a RADIAL gradient, F55A67 to BE202E. Not the
   hero's linear one -- that was tried and it put an orange cast on the last
   letters that the design does not have. The two accents are different on
   purpose; the hero's is tuned against the water. */
.sfh-jpanel-heading-red {
    color: #fff;
    background: radial-gradient(circle at top left, #F55A67 0%, #BE202E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    paint-order: stroke fill;
}

/* The pin icon in the CTA. Height alone is enough: the viewBox supplies the
   ratio, so swapping the icon for one with a different aspect needs no change
   here. (This rule and the pin itself were lost when the panel was redrawn in
   ab5773a and the button picked up the generic long arrow -- Figma has a map pin
   on a "Get directions" button, which is also what the words promise.) */
.sfh-jpanel-pin { height: 16px; width: auto; flex: 0 0 auto; }

.sfh-jpanel-desc { font-size: 17px; line-height: 1.6; max-width: 540px; color: rgba(255,255,255,.9); }
.sfh-jpanel-actions { margin: 34px 0 0; }
/* The pin is gone — the design's button carries the theme's long arrow, the same
   one every other SFH pill uses, so .sfh-btn-arrow sizes it and no rule is needed
   here. The old note about an inline <svg> having no intrinsic size still applies
   to anything added back: a viewBox is a coordinate system, not a size, and
   without a dimension the browser falls back to 300x150. */

@media (max-width: 760px) {
    /* Still left on a phone — centring here would put the copy on a different
       axis from every other section on the page. */
    .sfh-jpanel-box { align-items: flex-start; text-align: left; }
    .sfh-jpanel-heading { align-items: flex-start; }
    /* Straight down rather than across: at this width there is no clear side to
       protect, and the copy needs the contrast over the whole frame. */
    .sfh-jpanel-shade {
        background: linear-gradient(
            180deg,
            rgba(12,12,12, calc(var(--sfh-jpanel-shade, .55) * .5)) 0%,
            rgba(12,12,12, calc(var(--sfh-jpanel-shade, .55) + .2)) 100%);
    }
    /* No horizontal padding on the section: the box carries the gutter now, and
       both together put the copy 34px in while the header sits at 20 -- measured.
       The vertical padding is still the section's. */
    .sfh-jpanel { padding: 24px 0; }
    .sfh-jpanel-box { padding: 32px 20px; }
}

/* Photo for this section, and the mobile one when it has been supplied.
 *
 * cms2_bg_style() emits --cms2-bg (always) and --cms2-bg-m (only when the
 * "Image (mobile)" slot is filled), and nothing else — no inline
 * `background-image`, because an inline style would outrank the media query
 * below and the swap would silently never happen.
 *
 * The swap is CSS rather than PHP because one cached HTML file serves every
 * visitor: the server must not pick a photo per device. The fallback chain means
 * a section with no mobile image keeps the desktop one.
 */
.sfh-jpanel-media { background-image: var(--cms2-bg); }
@media (max-width: 760px) {
    /* Still left on a phone — centring here would put the copy on a different
       axis from every other section on the page. */
    .sfh-jpanel-box { align-items: flex-start; text-align: left; }
    .sfh-jpanel-heading { align-items: flex-start; }
    /* Straight down rather than across: at this width there is no clear side to
       protect, and the copy needs the contrast over the whole frame. */
    .sfh-jpanel-shade {
        background: linear-gradient(
            180deg,
            rgba(12,12,12, calc(var(--sfh-jpanel-shade, .55) * .5)) 0%,
            rgba(12,12,12, calc(var(--sfh-jpanel-shade, .55) + .2)) 100%);
    }
    .sfh-jpanel-media { background-image: var(--cms2-bg-m, var(--cms2-bg)); }
}