/* ============================================================================
   Core theme — Hero.

   A full-bleed commerce hero: the media is the subject, the copy sits directly
   on it, and readability comes from a directional gradient rather than a panel.

   Everything is scoped under .storly-hero so the section cannot leak styles.
   Configuration arrives as data-* attributes and custom properties on the root,
   which is what lets the Builder change layout, height, shading and controls
   live without re-rendering markup.
   ============================================================================ */

.storly-hero {
  /* Live-editable, written by section.php and the Builder */
  --hero-content-w: 560px;
  --hero-overlay: .55;
  --hero-overlay-mobile: .62;
  --hero-heading-scale: 1;

  /* Composition.
     The hero copy starts on the same track as every section below it. It used
     to have a gutter of its own (up to 92px), so on a wide desktop the first
     line of the page sat 46px to the right of the heading under it. */
  --hero-gutter: var(--core-track-inset, clamp(16px, 3vw, 32px));
  --hero-inset: clamp(24px, 3.4vw, 56px);
  --hero-radius: clamp(14px, 1.4vw, 22px);
  --hero-index: 0;
  --hero-dir: 1;

  /* Copy sits on media, so light type is the default. */
  --hero-fg: #fff;
  --hero-fg-soft: rgba(255, 255, 255, .82);
  --hero-surface: var(--bg);
  --hero-ink: var(--text);
  --hero-ink-soft: var(--text-s);

  position: relative;
  isolation: isolate;
  color: var(--hero-fg);
  /* The section surface. With a full-bleed image the media layer covers this,
     but it is what shows while that image loads, behind a transparent one, and
     in the no-media state — so the merchant's Background control is real for
     every layout, not only `split`. Media contrast/overlay is unaffected. */
  background: var(--hero-surface);
}

.storly-hero *,
.storly-hero *::before,
.storly-hero *::after { box-sizing: border-box; }

[dir="rtl"] .storly-hero { --hero-dir: -1; }

.storly-hero--rounded { border-radius: var(--hero-radius); overflow: hidden; }

.storly-hero[data-width="contained"] {
  max-width: var(--container-max, 1360px);
  margin-inline: auto;
}

/* ---------------------------------------------------------------- viewport */

.storly-hero__viewport {
  position: relative;
  overflow: hidden;
  min-height: var(--hero-h, 620px);
}
.storly-hero--rounded .storly-hero__viewport { border-radius: var(--hero-radius); }

.storly-hero[data-height-desktop="small"]  { --hero-h: clamp(400px, 48svh, 500px); }
.storly-hero[data-height-desktop="medium"] { --hero-h: clamp(520px, 64svh, 660px); }
.storly-hero[data-height-desktop="large"]  { --hero-h: clamp(620px, 78svh, 820px); }
.storly-hero[data-height-desktop="screen"] { --hero-h: 100svh; }

/* --------------------------------------------------------------- the track

   Fade and none stack every slide in one grid cell, so the viewport is as tall
   as the tallest slide and swapping slides cannot shift layout. Slide mode
   lays them in a row and moves the track instead. */

.storly-hero__track {
  display: grid;
  grid-template-areas: "slide";
  min-height: inherit;
}
.storly-hero__slide {
  position: relative;
  grid-area: slide;
  display: flex;
  min-width: 0;
  min-height: inherit;
  flex-direction: column;
}

.storly-hero[data-transition="fade"] .storly-hero__slide {
  opacity: 0;
  transition: opacity 640ms var(--ease, cubic-bezier(.4, 0, .2, 1));
  pointer-events: none;
}
.storly-hero[data-transition="fade"] .storly-hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.storly-hero[data-transition="none"] .storly-hero__slide { opacity: 0; pointer-events: none; }
.storly-hero[data-transition="none"] .storly-hero__slide.is-active { opacity: 1; pointer-events: auto; }

.storly-hero[data-transition="slide"] .storly-hero__track {
  display: flex;
  grid-template-areas: none;
  transform: translateX(calc(var(--hero-index) * -100% * var(--hero-dir)));
  transition: transform 640ms var(--ease, cubic-bezier(.4, 0, .2, 1));
  will-change: transform;
}
.storly-hero[data-transition="slide"] .storly-hero__slide { flex: 0 0 100%; }

/* ------------------------------------------------------------------- media */

.storly-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--brand) 30%, #14161a);
}
.storly-hero__media picture { display: contents; }

.storly-hero__img,
.storly-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focal, 50% 50%);
}

/* Missing or broken media still needs to look deliberate rather than blank. */
.storly-hero__media-fallback {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(110% 90% at 72% 30%, color-mix(in srgb, var(--brand) 42%, var(--core-primary)), transparent 62%),
    linear-gradient(150deg, color-mix(in srgb, var(--brand) 18%, var(--core-primary)), var(--core-primary));
}

.storly-hero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Directional is the default: it darkens only the side the copy sits on, so
   the product keeps its own light. The gradient follows the text position. */
.storly-hero[data-overlay-style="directional"] .storly-hero__shade {
  background:
    linear-gradient(
      to right,
      rgba(8, 9, 11, calc(var(--hero-overlay) * 1.12)) 0%,
      rgba(8, 9, 11, calc(var(--hero-overlay) * .82)) 28%,
      rgba(8, 9, 11, calc(var(--hero-overlay) * .28)) 58%,
      rgba(8, 9, 11, 0) 82%
    ),
    linear-gradient(to top, rgba(8, 9, 11, calc(var(--hero-overlay) * .42)), rgba(8, 9, 11, 0) 46%);
}
[dir="rtl"] .storly-hero[data-overlay-style="directional"] .storly-hero__shade,
.storly-hero[data-overlay-style="directional"][data-content-x="end"] .storly-hero__shade {
  background:
    linear-gradient(
      to left,
      rgba(8, 9, 11, calc(var(--hero-overlay) * 1.12)) 0%,
      rgba(8, 9, 11, calc(var(--hero-overlay) * .82)) 28%,
      rgba(8, 9, 11, calc(var(--hero-overlay) * .28)) 58%,
      rgba(8, 9, 11, 0) 82%
    ),
    linear-gradient(to top, rgba(8, 9, 11, calc(var(--hero-overlay) * .42)), rgba(8, 9, 11, 0) 46%);
}
/* Centred copy has no single side to shade, so it falls back to a soft bloom. */
.storly-hero[data-overlay-style="directional"][data-content-x="center"] .storly-hero__shade {
  background:
    radial-gradient(120% 96% at 50% 52%, rgba(8, 9, 11, calc(var(--hero-overlay) * .72)) 0%, rgba(8, 9, 11, calc(var(--hero-overlay) * .3)) 62%, rgba(8, 9, 11, 0) 100%),
    linear-gradient(to top, rgba(8, 9, 11, calc(var(--hero-overlay) * .7)), rgba(8, 9, 11, 0) 58%);
}

.storly-hero[data-overlay-style="gradient"] .storly-hero__shade {
  background: linear-gradient(
    to top,
    rgba(8, 9, 11, calc(var(--hero-overlay) * 1.08)) 0%,
    rgba(8, 9, 11, calc(var(--hero-overlay) * .64)) 36%,
    rgba(8, 9, 11, calc(var(--hero-overlay) * .16)) 70%,
    rgba(8, 9, 11, 0) 100%
  );
}
.storly-hero[data-overlay-style="scrim"] .storly-hero__shade {
  background: rgba(8, 9, 11, var(--hero-overlay));
}
.storly-hero[data-overlay-style="vignette"] .storly-hero__shade {
  background:
    radial-gradient(120% 92% at 50% 46%, rgba(8, 9, 11, 0) 26%, rgba(8, 9, 11, calc(var(--hero-overlay) * .95)) 100%),
    linear-gradient(to top, rgba(8, 9, 11, calc(var(--hero-overlay) * .5)), rgba(8, 9, 11, 0) 52%);
}

/* ----------------------------------------------------------------- content */

.storly-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  max-width: var(--container-max, 1360px);
  flex: 1;
  margin-inline: auto;
  padding: var(--hero-inset) var(--hero-gutter);
}

/* The arrows sit in a fixed lane at each edge. When they are on, the copy has
   to start clear of that lane or a long line will run underneath one — the
   gutter alone is narrower than the lane at most widths. */
.storly-hero:not([data-arrows="off"]) .storly-hero__inner {
  padding-inline: max(var(--hero-gutter), var(--hero-arrow-lane));
}
.storly-hero { --hero-arrow-lane: calc(clamp(14px, 2.2vw, 34px) + 56px + 18px); }

.storly-hero[data-content-y="start"]  .storly-hero__inner { align-items: flex-start; }
.storly-hero[data-content-y="center"] .storly-hero__inner { align-items: center; }
.storly-hero[data-content-y="end"]    .storly-hero__inner { align-items: flex-end; }

.storly-hero[data-content-x="start"]  .storly-hero__inner { justify-content: flex-start; }
.storly-hero[data-content-x="center"] .storly-hero__inner { justify-content: center; }
.storly-hero[data-content-x="end"]    .storly-hero__inner { justify-content: flex-end; }

/* A slide may override the section default. Same specificity, so these must
   stay after the rules above. */
.storly-hero__slide[data-align="start"]  .storly-hero__inner { justify-content: flex-start; }
.storly-hero__slide[data-align="center"] .storly-hero__inner { justify-content: center; }
.storly-hero__slide[data-align="end"]    .storly-hero__inner { justify-content: flex-end; }

.storly-hero__content {
  display: flex;
  width: 100%;
  max-width: var(--hero-content-w);
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
}
.storly-hero[data-content-x="center"] .storly-hero__content { align-items: center; text-align: center; }
.storly-hero[data-content-x="end"]    .storly-hero__content { align-items: flex-end; text-align: end; }
.storly-hero__slide[data-align="start"]  .storly-hero__content { align-items: flex-start; text-align: start; }
.storly-hero__slide[data-align="center"] .storly-hero__content { align-items: center; text-align: center; }
.storly-hero__slide[data-align="end"]    .storly-hero__content { align-items: flex-end; text-align: end; }

/* --------------------------------------------------------------- typography */

.storly-hero__badge {
  margin: 0 0 16px;
  padding: 7px 13px;
  border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
  border-radius: 999px;
  color: var(--hero-fg);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  line-height: 1;
  text-transform: uppercase;
}

.storly-hero__eyebrow {
  margin: 0 0 18px;
  color: var(--hero-fg-soft);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  line-height: 1.3;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}

/* A heavy grotesk, not the theme's editorial serif: this headline has to read
   as a campaign statement at full-bleed scale. */
.storly-hero__heading {
  margin: 0;
  color: var(--hero-fg);
  font-family: var(--font);
  font-size: calc(clamp(2.6rem, 5vw, 4.5rem) * var(--hero-heading-scale));
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.022em;
  text-wrap: balance;
  overflow-wrap: break-word;
  text-shadow: 0 2px 34px rgba(0, 0, 0, .34);
}

.storly-hero__text {
  max-width: 42ch;
  margin: 20px 0 0;
  color: var(--hero-fg-soft);
  font-size: clamp(1rem, 1.1vw, 1.09rem);
  line-height: 1.6;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .42);
  text-wrap: pretty;
}

.storly-hero__trust {
  margin: 20px 0 0;
  color: var(--hero-fg-soft);
  font-size: 12.5px;
  line-height: 1.5;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .42);
}

/* --------------------------------------------------------------------- CTAs */

.storly-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}

.storly-hero__cta {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--r-sm, 10px);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform var(--dur-fast, .16s) var(--ease, ease),
              background-color var(--dur-fast, .16s) var(--ease, ease),
              border-color var(--dur-fast, .16s) var(--ease, ease),
              color var(--dur-fast, .16s) var(--ease, ease);
}
.storly-hero__cta:hover { transform: translateY(-2px); }
.storly-hero__cta:active { transform: translateY(0); }
.storly-hero__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* White reads on any photograph; a brand colour does not. */
.storly-hero__cta--primary {
  background: #fff;
  border-color: #fff;
  color: #14161a;
}
.storly-hero__cta--primary::after {
  width: 15px;
  height: 15px;
  flex: none;
  background: currentColor;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-fast, .16s) var(--ease, ease);
}
[dir="rtl"] .storly-hero__cta--primary::after { transform: scaleX(-1); }
.storly-hero__cta--primary:hover { background: rgba(255, 255, 255, .9); border-color: rgba(255, 255, 255, .9); }
.storly-hero__cta--primary:hover::after { transform: translateX(3px); }
[dir="rtl"] .storly-hero__cta--primary:hover::after { transform: scaleX(-1) translateX(3px); }

.storly-hero__cta--outline {
  background: transparent;
  border-color: rgba(255, 255, 255, .62);
  color: #fff;
}
.storly-hero__cta--outline:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .12);
}

.storly-hero__cta--link {
  min-height: 0;
  padding: 6px 2px;
  border: 0;
  border-radius: 0;
  color: var(--hero-fg);
  letter-spacing: .06em;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, .5);
}
.storly-hero__cta--link:hover { text-decoration-color: currentColor; transform: none; }

/* ------------------------------------------------------- reassurance row */

.storly-hero[data-features="0"] .storly-hero__features { display: none; }

.storly-hero__features {
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(20px, 2.6vw, 42px);
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.storly-hero[data-content-x="center"] .storly-hero__features { justify-content: center; }
.storly-hero[data-content-x="end"] .storly-hero__features { justify-content: flex-end; }
.storly-hero__slide[data-align="center"] .storly-hero__features { justify-content: center; }
.storly-hero__slide[data-align="end"] .storly-hero__features { justify-content: flex-end; }

.storly-hero__feature {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.storly-hero__feature-icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 50%;
  color: var(--hero-fg);
  font-size: 12px;
  place-items: center;
}
.storly-hero__feature-icon svg { width: 13px; height: 13px; }
.storly-hero__feature-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.storly-hero__feature-title {
  color: var(--hero-fg);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}
.storly-hero__feature-text {
  color: var(--hero-fg-soft);
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.25;
  opacity: .82;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}

/* ============================================= split + editorial (ink-on-surface) ===
   Two alternative compositions that put the copy on the merchant's surface
   instead of over the media:
     split     — media holds half the band, copy sits beside it
     editorial — media is an offset rounded panel, copy is a raised card that
                 overlaps its inner edge (a magazine spread) */

.storly-hero:is([data-layout="split"], [data-layout="editorial"]) {
  --hero-fg: var(--hero-ink);
  --hero-fg-soft: var(--hero-ink-soft);
  background: var(--hero-surface);
}
.storly-hero[data-layout="split"] .storly-hero__media {
  inset-inline-start: 50%;
  inset-inline-end: 0;
}
.storly-hero[data-layout="split"][data-media-side="start"] .storly-hero__media {
  inset-inline-start: 0;
  inset-inline-end: 50%;
}
.storly-hero:is([data-layout="split"], [data-layout="editorial"]) .storly-hero__shade { display: none; }
.storly-hero[data-layout="split"] .storly-hero__inner { padding-inline-end: 54%; }
.storly-hero[data-layout="split"][data-media-side="start"] .storly-hero__inner {
  padding-inline: 54% var(--hero-gutter);
}
.storly-hero:is([data-layout="split"], [data-layout="editorial"]) .storly-hero__eyebrow { color: var(--brand, var(--hero-ink)); }
.storly-hero:is([data-layout="split"], [data-layout="editorial"]) :is(
  .storly-hero__heading, .storly-hero__text, .storly-hero__trust, .storly-hero__eyebrow,
  .storly-hero__feature-title, .storly-hero__feature-text
) { text-shadow: none; }
.storly-hero:is([data-layout="split"], [data-layout="editorial"]) .storly-hero__cta--primary {
  background: var(--btn-bg, var(--brand));
  border-color: var(--btn-bg, var(--brand));
  color: var(--btn-color, var(--on-brand));
}
.storly-hero:is([data-layout="split"], [data-layout="editorial"]) .storly-hero__cta--outline {
  border-color: color-mix(in srgb, var(--hero-ink) 26%, transparent);
  color: var(--hero-ink);
}
.storly-hero:is([data-layout="split"], [data-layout="editorial"]) .storly-hero__cta--outline:hover {
  border-color: var(--hero-ink);
  background: color-mix(in srgb, var(--hero-ink) 6%, transparent);
}
.storly-hero:is([data-layout="split"], [data-layout="editorial"]) .storly-hero__cta--link { color: var(--hero-ink); }
.storly-hero:is([data-layout="split"], [data-layout="editorial"]) .storly-hero__feature-icon {
  border-color: color-mix(in srgb, var(--hero-ink) 20%, transparent);
}

/* ── editorial geometry (desktop) ──────────────────────────────────────── */
@media (min-width: 1025px) {
  .storly-hero[data-layout="editorial"] .storly-hero__viewport { min-height: var(--hero-h, 620px); }
  .storly-hero[data-layout="editorial"] .storly-hero__media {
    inset-block: clamp(24px, 4vw, 56px);
    inset-inline-end: clamp(24px, 4vw, 64px);
    inset-inline-start: 42%;
    border-radius: var(--hero-radius, 18px);
    overflow: hidden;
  }
  .storly-hero[data-layout="editorial"][data-media-side="start"] .storly-hero__media {
    inset-inline: clamp(24px, 4vw, 64px) 42%;
  }
  .storly-hero[data-layout="editorial"] .storly-hero__inner { padding-inline-end: 46%; align-items: center; }
  .storly-hero[data-layout="editorial"][data-media-side="start"] .storly-hero__inner {
    padding-inline: 46% var(--hero-gutter);
  }
  .storly-hero[data-layout="editorial"] .storly-hero__content {
    position: relative;
    z-index: 3;
    padding: clamp(28px, 3vw, 44px);
    background: var(--hero-surface, var(--core-background));
    border: 1px solid color-mix(in srgb, var(--hero-ink) 8%, transparent);
    border-radius: var(--hero-radius, 16px);
    box-shadow: 0 30px 70px -24px color-mix(in srgb, var(--hero-ink) 30%, transparent);
    margin-inline-end: -12%;
  }
  .storly-hero[data-layout="editorial"][data-media-side="start"] .storly-hero__content {
    margin-inline: -12% 0;
  }
}
/* editorial stacks like split below 1025 — handled by the split tablet/mobile
   rules matching data-layout via the :is() groups added there. */

/* -- Per-slide tone override --------------------------------------------
   Only meaningful for `overlay`, where the copy sits ON the media. In split
   and editorial the copy is always ink-on-surface, so a saved "light" tone
   (from a slide authored for the old overlay hero) must not turn the heading
   white on the panel. */
.storly-hero[data-layout="overlay"] .storly-hero__slide[data-tone="light"] {
  --hero-fg: #fff;
  --hero-fg-soft: rgba(255, 255, 255, .82);
}
.storly-hero[data-layout="overlay"] .storly-hero__slide[data-tone="dark"] {
  --hero-fg: var(--hero-ink);
  --hero-fg-soft: var(--hero-ink-soft);
}
.storly-hero:is([data-layout="split"], [data-layout="editorial"]) .storly-hero__slide[data-tone] {
  --hero-fg: var(--hero-ink);
  --hero-fg-soft: var(--hero-ink-soft);
}
.storly-hero[data-layout="overlay"] .storly-hero__slide[data-tone="dark"] :is(
  .storly-hero__heading, .storly-hero__text, .storly-hero__trust, .storly-hero__eyebrow,
  .storly-hero__feature-title, .storly-hero__feature-text
) { text-shadow: none; }

/* ================================================================ arrows === */

.storly-hero__arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  display: grid;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(18, 20, 24, .34);
  color: #fff;
  cursor: pointer;
  place-items: center;
  transform: translateY(-50%);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
  transition: background-color var(--dur-fast, .16s) var(--ease, ease),
              border-color var(--dur-fast, .16s) var(--ease, ease),
              opacity var(--dur, .28s) var(--ease, ease),
              transform var(--dur-fast, .16s) var(--ease, ease);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.storly-hero__arrow svg { width: 22px; height: 22px; }
.storly-hero__arrow--prev { inset-inline-start: clamp(14px, 2.2vw, 34px); }
.storly-hero__arrow--next { inset-inline-end: clamp(14px, 2.2vw, 34px); }
[dir="rtl"] .storly-hero__arrow svg { transform: scaleX(-1); }

.storly-hero__arrow:hover {
  background: rgba(18, 20, 24, .56);
  border-color: rgba(255, 255, 255, .55);
  transform: translateY(-50%) scale(1.06);
}
.storly-hero__arrow:active { transform: translateY(-50%) scale(.97); }
.storly-hero__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.storly-hero[data-arrow-style="solid"] .storly-hero__arrow {
  border-color: transparent;
  background: #fff;
  color: #14161a;
  backdrop-filter: none;
}
.storly-hero[data-arrow-style="solid"] .storly-hero__arrow:hover { background: #fff; border-color: transparent; }
.storly-hero[data-arrow-style="solid"] .storly-hero__arrow:focus-visible { outline-color: var(--brand); }

.storly-hero[data-arrow-style="outline"] .storly-hero__arrow {
  border-color: rgba(255, 255, 255, .7);
  background: rgba(18, 20, 24, .14);
  backdrop-filter: blur(6px);
}

/* Show on hover, but never hide them from keyboard users. */
.storly-hero[data-arrows="hover"] .storly-hero__arrow { opacity: 0; }
.storly-hero[data-arrows="hover"]:hover .storly-hero__arrow,
.storly-hero[data-arrows="hover"] .storly-hero__arrow:focus-visible { opacity: 1; }

.storly-hero[data-arrows="off"] .storly-hero__arrow { display: none; }

/* In split view the arrows belong to the image, not the whole band. */
.storly-hero[data-layout="split"] .storly-hero__arrow--prev { inset-inline-start: calc(50% + clamp(12px, 1.4vw, 20px)); }
.storly-hero[data-layout="split"][data-media-side="start"] .storly-hero__arrow--prev { inset-inline-start: clamp(12px, 1.4vw, 20px); }
.storly-hero[data-layout="split"][data-media-side="start"] .storly-hero__arrow--next { inset-inline-end: calc(50% + clamp(12px, 1.4vw, 20px)); }

/* ============================================================ pagination === */

.storly-hero__nav {
  position: absolute;
  z-index: 4;
  inset-block-end: clamp(20px, 2.4vw, 34px);
  inset-inline: var(--hero-gutter);
  display: flex;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}
.storly-hero__nav > * { pointer-events: auto; }

.storly-hero[data-pagination-x="start"]  .storly-hero__nav { justify-content: flex-start; }
.storly-hero[data-pagination-x="center"] .storly-hero__nav { justify-content: center; }
.storly-hero[data-pagination-x="end"]    .storly-hero__nav { justify-content: flex-end; }

.storly-hero[data-pagination="off"] .storly-hero__nav { display: none; }

/* Sit the indicator over the image half in split view. */
.storly-hero[data-layout="split"] .storly-hero__nav { inset-inline-start: 52%; }
.storly-hero[data-layout="split"][data-media-side="start"] .storly-hero__nav {
  inset-inline: var(--hero-gutter) 52%;
}

.storly-hero__pagination {
  display: flex;
  align-items: center;
  gap: 9px;
}

.storly-hero__page {
  position: relative;
  display: block;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .4));
}
.storly-hero__page-fill {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  display: block;
  margin-inline: auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, .48);
  transform: translateY(-50%);
  transition: background-color var(--dur-fast, .16s) var(--ease, ease),
              width var(--dur, .28s) var(--ease, ease);
}
.storly-hero__page:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }

/* Dots: small marks, with the active slide drawn as a bar. */
.storly-hero[data-pagination="dots"] .storly-hero__page { width: 18px; }
.storly-hero[data-pagination="dots"] .storly-hero__page-fill { width: 7px; height: 7px; }
.storly-hero[data-pagination="dots"] .storly-hero__page.is-active { width: 42px; }
.storly-hero[data-pagination="dots"] .storly-hero__page.is-active .storly-hero__page-fill {
  width: 42px;
  height: 3px;
  background: #fff;
}

/* Bars: every slide is a bar, the active one is filled. */
.storly-hero[data-pagination="bars"] .storly-hero__page { width: 38px; }
.storly-hero[data-pagination="bars"] .storly-hero__page-fill { width: 100%; height: 3px; }
.storly-hero[data-pagination="bars"] .storly-hero__page.is-active .storly-hero__page-fill { background: #fff; }

.storly-hero__counter {
  margin: 0;
  color: #fff;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}
.storly-hero__counter-sep { margin-inline: 7px; opacity: .55; }

.storly-hero__pause {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(18, 20, 24, .34);
  color: #fff;
  cursor: pointer;
  place-items: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.storly-hero__pause svg { width: 13px; height: 13px; }
.storly-hero__pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.storly-hero__pause-off { display: none; }
.storly-hero.is-paused .storly-hero__pause-on { display: none; }
.storly-hero.is-paused .storly-hero__pause-off { display: block; }

/* Over the light surface of a split hero the white controls would vanish. */
.storly-hero[data-layout="split"] .storly-hero__page-fill { background: color-mix(in srgb, var(--hero-ink) 26%, transparent); }
.storly-hero[data-layout="split"] .storly-hero__page.is-active .storly-hero__page-fill { background: var(--hero-ink); }
.storly-hero[data-layout="split"] .storly-hero__page { filter: none; }

/* Screen-reader only slide announcements. */
.storly-hero__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ========================================================== empty state === */

.storly-hero--empty {
  display: grid;
  min-height: 340px;
  padding: 48px 24px;
  border: 1px dashed color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: var(--hero-radius);
  background: var(--bg-s);
  place-items: center;
  text-align: center;
}
.storly-hero__empty-title {
  margin: 0 0 6px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.3rem;
}
.storly-hero__empty-text { margin: 0; color: var(--text-s); font-size: 14px; }

/* ================================================================ tablet === */

@media (max-width: 1024px) {
  .storly-hero {
    --hero-gutter: clamp(20px, 4.4vw, 48px);
    --hero-arrow-lane: calc(clamp(12px, 1.8vw, 26px) + 46px + 14px);
  }
  .storly-hero__heading { font-size: calc(clamp(2.3rem, 5vw, 3.2rem) * var(--hero-heading-scale)); }
  .storly-hero__arrow { width: 46px; height: 46px; }
  .storly-hero__arrow svg { width: 19px; height: 19px; }
  .storly-hero__arrow--prev { inset-inline-start: clamp(12px, 1.8vw, 26px); }
  .storly-hero__arrow--next { inset-inline-end: clamp(12px, 1.8vw, 26px); }
  .storly-hero__features { gap: 12px 22px; margin-top: 26px; }

  /* A half-width column is too narrow for a headline at this size, so the split
     becomes a stack. The media joins the flow rather than staying absolute:
     percentage padding resolves against WIDTH, so it cannot clear an absolutely
     positioned image reliably. `editorial` collapses to the same stack and
     drops its overlapping-card treatment. */
  .storly-hero:is([data-layout="split"], [data-layout="editorial"]) .storly-hero__slide { display: flex; flex-direction: column; }
  .storly-hero:is([data-layout="split"], [data-layout="editorial"]) .storly-hero__media,
  .storly-hero:is([data-layout="split"], [data-layout="editorial"])[data-media-side="start"] .storly-hero__media {
    position: relative;
    inset: auto;
    inset-inline: auto;
    width: 100%;
    flex: none;
    aspect-ratio: 16 / 9;
    border-radius: 0;
  }
  .storly-hero[data-layout="editorial"] .storly-hero__content {
    margin-inline: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .storly-hero:is([data-layout="split"], [data-layout="editorial"]) .storly-hero__inner,
  .storly-hero:is([data-layout="split"], [data-layout="editorial"])[data-media-side="start"] .storly-hero__inner {
    flex: 1;
    align-items: center;
    padding-inline: var(--hero-gutter);
    padding-block: var(--hero-inset);
  }
  .storly-hero[data-layout="split"] .storly-hero__arrow--prev { inset-inline-start: clamp(12px, 1.8vw, 26px); }
  .storly-hero[data-layout="split"] .storly-hero__arrow--next { inset-inline-end: clamp(12px, 1.8vw, 26px); }
  .storly-hero[data-layout="split"] .storly-hero__arrow { top: 28.1vw; }
  .storly-hero[data-layout="split"] .storly-hero__nav,
  .storly-hero[data-layout="split"][data-media-side="start"] .storly-hero__nav {
    position: static;
    justify-content: center;
    margin: 0 0 20px;
    padding-inline: var(--hero-gutter);
  }
}

/* ================================================================ mobile ===
   The full-bleed composition holds on phones — the media stays the subject and
   the copy anchors to the lower half, clear of the arrows and the indicator. */

@media (max-width: 767px) {
  .storly-hero {
    --hero-gutter: 20px;
    --hero-inset: 22px;
    --hero-overlay: var(--hero-overlay-mobile);
  }

  .storly-hero[data-height-mobile="small"]  { --hero-h: 460px; }
  .storly-hero[data-height-mobile="medium"] { --hero-h: 560px; }
  .storly-hero[data-height-mobile="large"]  { --hero-h: 660px; }
  .storly-hero[data-height-mobile="screen"] { --hero-h: 100svh; }

  /* Vertical shading on phones: the copy sits across the full width, so a
     side gradient would leave the start of each line unprotected. */
  .storly-hero[data-overlay-style="directional"] .storly-hero__shade,
  .storly-hero[data-overlay-style="directional"][data-content-x="center"] .storly-hero__shade,
  .storly-hero[data-overlay-style="directional"][data-content-x="end"] .storly-hero__shade {
    background: linear-gradient(
      to top,
      rgba(8, 9, 11, calc(var(--hero-overlay) * 1.22)) 0%,
      rgba(8, 9, 11, calc(var(--hero-overlay) * .92)) 34%,
      rgba(8, 9, 11, calc(var(--hero-overlay) * .38)) 66%,
      rgba(8, 9, 11, calc(var(--hero-overlay) * .18)) 100%
    );
  }

  /* A dedicated mobile image is already cropped for portrait, so the desktop
     focal point would shift a composition that is right as it stands. */
  .storly-hero__slide[data-mobile-media="1"] .storly-hero__img { object-position: 50% 50%; }

  .storly-hero__inner {
    align-items: flex-end;
    padding-block: var(--hero-inset) calc(var(--hero-inset) + 32px);
  }
  .storly-hero__content { max-width: 100%; }

  .storly-hero__heading {
    font-size: calc(clamp(2rem, 8.6vw, 2.6rem) * var(--hero-heading-scale));
    line-height: 1.06;
  }
  .storly-hero__eyebrow { margin-bottom: 12px; font-size: 12px; letter-spacing: .18em; }
  .storly-hero__text { margin-top: 12px; font-size: 14.5px; }
  .storly-hero__trust { margin-top: 14px; font-size: 12px; }

  .storly-hero__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 22px;
  }
  .storly-hero__cta { width: 100%; }
  .storly-hero__cta--link { width: auto; align-self: flex-start; }
  .storly-hero[data-content-x="center"] .storly-hero__cta--link { align-self: center; }

  /* The reassurance row costs more vertical space than it earns on a phone. */
  .storly-hero__features { display: none; }

  /* Arrows join the indicator as one control bar along the bottom edge. Kept at
     mid-height they would sit on the copy, which is full width on a phone and
     has no side lane to give them. */
  .storly-hero[data-arrows-mobile="0"] .storly-hero__arrow { display: none; }
  .storly-hero__arrow {
    top: auto;
    inset-block-end: 12px;
    width: 40px;
    height: 40px;
    transform: none;
  }
  .storly-hero__arrow:hover { transform: none; }
  .storly-hero__arrow:active { transform: scale(.94); }
  .storly-hero__arrow svg { width: 17px; height: 17px; }
  .storly-hero__arrow--prev { inset-inline-start: 14px; }
  .storly-hero__arrow--next { inset-inline-end: 14px; }

  .storly-hero__nav { inset-block-end: 26px; justify-content: center; }
  .storly-hero[data-pagination-x="start"] .storly-hero__nav,
  .storly-hero[data-pagination-x="end"] .storly-hero__nav { justify-content: center; }

  /* Leave room for that control bar under the copy. */
  .storly-hero__inner { padding-block-end: calc(var(--hero-inset) + 46px); }
  .storly-hero:not([data-arrows="off"]) .storly-hero__inner { padding-inline: var(--hero-gutter); }

  /* Split + editorial stack on phones too. */
  .storly-hero:is([data-layout="split"], [data-layout="editorial"]) .storly-hero__slide { display: flex; flex-direction: column; }
  .storly-hero:is([data-layout="split"], [data-layout="editorial"]) .storly-hero__media,
  .storly-hero:is([data-layout="split"], [data-layout="editorial"])[data-media-side="start"] .storly-hero__media {
    position: relative;
    inset: auto;
    inset-inline: auto;
    width: 100%;
    flex: none;
    aspect-ratio: 4 / 3;
    border-radius: 0;
  }
  .storly-hero:is([data-layout="split"], [data-layout="editorial"]) .storly-hero__inner,
  .storly-hero:is([data-layout="split"], [data-layout="editorial"])[data-media-side="start"] .storly-hero__inner {
    flex: 1;
    align-items: flex-start;
    padding: 24px var(--hero-gutter) calc(var(--hero-inset) + 4px);
  }
  .storly-hero[data-layout="editorial"] .storly-hero__content {
    margin-inline: 0; padding: 0; background: none; border: 0; box-shadow: none;
  }
  .storly-hero[data-layout="split"] .storly-hero__arrow { top: 37.5vw; }
  .storly-hero[data-layout="split"] .storly-hero__nav,
  .storly-hero[data-layout="split"][data-media-side="start"] .storly-hero__nav {
    position: static;
    justify-content: center;
    margin: 0 0 18px;
    padding-inline: var(--hero-gutter);
  }
}

@media (max-width: 400px) {
  .storly-hero__heading { font-size: calc(clamp(1.8rem, 8.4vw, 2.2rem) * var(--hero-heading-scale)); }
  .storly-hero__cta { min-height: 48px; font-size: 12px; }
  .storly-hero__arrow { width: 36px; height: 36px; }
}

/* ========================================================= reduced motion === */

@media (prefers-reduced-motion: reduce) {
  .storly-hero__slide,
  .storly-hero__track,
  .storly-hero__cta,
  .storly-hero__cta--primary::after,
  .storly-hero__arrow,
  .storly-hero__page-fill { transition-duration: .01ms; }
  .storly-hero__cta:hover { transform: none; }
  .storly-hero__arrow:hover { transform: translateY(-50%); }
}