/**
 * =====================================================================
 * HERO CAROUSEL COMPONENT — STYLES
 * =====================================================================
 * Copied verbatim from the provided CSS. Class names were NOT
 * renamed/prefixed — .hero, .hero__slide, .hero__dot etc. belong to
 * the site's existing shared design system, same reasoning as
 * page_hero/our_story/mission_vision.
 *
 * Relies on tokens already defined in assets/css/global.css: --ink,
 * --white, --red, --ease, --font-mono, --step-1, --gutter, --max.
 * =====================================================================
 */

/*
 * "section.hero" and "img.hero__img" (NOT bare ".hero"/".hero__img"):
 * this is the confirmed fix for the mobile image shrinking bug.
 * global.css has ".entry-content img { height: auto; }" (specificity:
 * class + tag) added earlier to fix general content images — but
 * that has HIGHER specificity than a bare ".hero__img { height: 100%; }"
 * (class only), so it was silently winning. Since <img> is a
 * "replaced element," CSS computes height: auto from the image's own
 * intrinsic aspect ratio, NOT by stretching to fill its container —
 * even with position: absolute + inset: 0 covering all four edges.
 *
 * !important ADDED ON width/height/object-fit BELOW (a deliberate,
 * narrow exception to this project's usual "avoid !important" rule):
 * after several rounds of specificity-based fixes that still weren't
 * fully resolving this on the live site, the most likely remaining
 * explanation is that Blocksy's OWN base theme reset (separate from
 * the child theme's own ".entry-content img" rule already accounted
 * for above) has a competing image-sizing rule at a specificity this
 * project can't fully predict from the outside. Rather than continue
 * guessing at selector specificity, !important on just these three
 * properties guarantees they win regardless of what else exists,
 * without affecting anything else about how the image displays.
 *
 * FULL-BLEED WIDTH BREAK-OUT ADDED ON section.hero BELOW:
 * The original static site's .hero is a direct child of <main> with
 * nothing constraining its width, so it naturally spans the full
 * viewport. In WordPress, this shortcode's output instead renders
 * inside Blocksy's own boxed content wrapper (a max-width container
 * with side padding) — meaning .hero may never reach true full-bleed
 * width no matter what CSS is applied to .hero itself, since its
 * PARENT is what's constraining it. The width/margin-left/margin-right
 * combination below is the standard, well-established CSS technique
 * for breaking an element out of a constrained-width ancestor to span
 * the full viewport regardless of how that ancestor is styled.
 */
section.hero {
  position: relative;
  min-height: min(88vh, 780px);
  background: var(--ink); color: var(--white); overflow: hidden;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}
.hero__slides { position: absolute; inset: 0; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity 1.1s var(--ease), transform 6s var(--ease); }
.hero__slide.is-active { opacity: 1; transform: scale(1); z-index: 1; }
.hero__slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0.75) 100%), linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.05) 60%); z-index: 1; }
img.hero__img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover !important; }


/*
 * padding-block IS THE ORIGINAL VALUE, UNCHANGED: 120px 96px, exactly
 * as provided in the original static site. Earlier attempts to bump
 * this to 170px/112px (for header clearance and controls-row
 * clearance) were also reverted, for the same reason as the
 * min-height change above — the goal now is matching the proven
 * reference exactly, not layering further guesses on top of it. If
 * content still feels too close to this site's own WordPress header
 * (which the original static site never had to account for), that's
 * a real, separate trade-off worth flagging again rather than
 * silently re-guessing at padding numbers.
 */
.hero__inner { position: relative; z-index: 3; min-height: inherit; display: flex; align-items: flex-end; padding-block: 120px 96px; }
.hero__content { max-width: 780px; }
span.hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono) !important; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--white); padding: 8px 14px; border: 1px solid rgba(255,255,255,0.35); border-radius: 999px; margin-bottom: 24px; }
.hero__eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.hero h1 { color: var(--white); font-size: clamp(2.6rem, 1.6rem + 5vw, 5rem); font-weight: 300; line-height: 1.02; letter-spacing: -0.02em; margin-bottom: 24px; }
.hero h1 em { font-style: italic; color: var(--white); font-weight: 300; }
/*
 * font-style/font-weight REMOVED here (the original design had
 * "font-style: italic; font-weight: 400;" on top of the red color) —
 * Fraunces' italic has quite dramatic, swash-heavy letterforms
 * compared to its upright style, making the accented word look like a
 * different typeface rather than just a different color. Per request,
 * .accent now only changes color, inheriting the same font style and
 * weight as the rest of the heading (.hero h1's own font-weight: 300,
 * upright).
 */
.hero h1 .accent { color: var(--red); }
/*
 * NOTE ON "p.hero__sub" (NOT JUST ".hero__sub"): a bare, single-class
 * selector has lower CSS specificity than global.css's ".entry-content
 * p" rule (added to override Blocksy's own paragraph styling for
 * headings/body text) — meaning ".hero__sub" alone would silently
 * lose EVERY property to that rule, exactly as reported (font-size,
 * color, max-width, and margin-bottom all showing as overridden in
 * DevTools). Adding the "p" tag qualifier ties the specificity, and
 * since this stylesheet loads after global.css in the dependency
 * chain, the tie resolves in this rule's favor.
 */
p.hero__sub { font-size: var(--step-1); color: rgba(255,255,255,0.85); max-width: 640px; margin-bottom: 36px; }
/*
 * margin-top REMOVED — this was an unrequested addition on top of the
 * original design (".hero__actions { display: flex; gap: 14px;
 * flex-wrap: wrap; }" had no margin-top in the reference). Reverted
 * to match exactly.
 */
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero__controls { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); bottom: 32px; max-width: calc(var(--max) - 0px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.hero__dots { display: flex; gap: 10px; }
.hero__dot { width: 36px; height: 4px; background: rgba(255,255,255,0.28); border-radius: 2px; position: relative; overflow: hidden; transition: background 0.3s var(--ease); }
.hero__dot.is-active { background: rgba(255,255,255,0.4); }
.hero__dot .bar { position: absolute; inset: 0; background: var(--white); transform-origin: left; transform: scaleX(0); }
.hero__dot.is-active .bar { animation: hero-progress 7s linear forwards; }
@keyframes hero-progress { to { transform: scaleX(1); } }

.hero__arrows { display: flex; gap: 8px; }
.hero__arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35); color: var(--white); display: inline-flex; align-items: center; justify-content: center; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); }
.hero__arrow:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.hero__arrow svg { width: 18px; height: 18px; }

/*
 * white-space: nowrap added here (wasn't in the original design) —
 * this is the actual fix for the reported counter/button overlap.
 * Without it, "01 /" and "04" can wrap onto separate lines when
 * horizontal space is tight (exactly what showed up in testing),
 * which makes this row visually taller than its normal single-line
 * height, pushing its effective top edge up into the button row
 * above it. Keeping it on one line keeps this row's height
 * consistent and predictable.
 */
/*
 * "div.hero__counter" + "!important", and explicit rules for its
 * un-classed "b"/"span" children: the same two-part fix confirmed on
 * statistics' .stat__num counter — (1) a bare single-class selector
 * loses to Blocksy's own styling, and Blocksy's font-family
 * specifically needs !important to beat, not just specificity; (2)
 * the VISIBLE counter text lives on un-classed <b data-current> and
 * <span data-total> children, which don't inherit font-mono reliably
 * either, for the same reason — this project's own site-wide
 * "body span"/safety-net rule in global.css explicitly sets a
 * different font-family on any plain span, which wins over
 * inheritance regardless of what the parent sets.
 */
div.hero__counter { font-family: var(--font-mono) !important; font-size: 12px; letter-spacing: 0.2em; color: rgba(255,255,255,0.7); white-space: nowrap; }
.hero__counter b { color: var(--white); font-weight: 500; margin-right: 8px; }
.hero__counter b,
.hero__counter span {
	font-family: var(--font-mono) !important;
}

/* Overlay texture */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>"); opacity: 0.35; mix-blend-mode: overlay; }

/*
 * NOTE: an earlier revision of this file added a @media (max-width:
 * 700px) block here that reduced .hero's height specifically on
 * mobile, intended to show more of each image's width by cropping
 * less. That was reverted — the height is meant to stay the SAME
 * fixed value across every screen size (set once, above, in the base
 * ".hero" rule), with only the WIDTH cropping responsively via
 * object-fit: cover on .hero__img, exactly as originally designed.
 */