/* Homepage hero (two selectable text styles per slide) and the announcement strip.
   PHASE 1 PROTOTYPE: loaded only by index-prototype.html. Uses the site's own tokens from astanga-v2.css
   (--ink, --paper, --soft, --wine, --wine-dark, --display, --sans, --gutter, --line) and its .eyebrow / .button classes. */

/* ------------------------------------------------------------------ hero */
.ayf-hero {
  --ayf-header: 94px;
  position: relative;
  isolation: isolate;
  height: 66svh;
  min-height: 440px;
  max-height: 780px;
  overflow: hidden;
  color: var(--white);
  background: #2a211c;
}
.ayf-hero__slides { position: absolute; inset: 0; z-index: 0; }

.ayf-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s ease;
}
.ayf-slide.is-active { opacity: 1; visibility: visible; }
.ayf-slide__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
  transform: scale(1.025);
  transition: transform 7s ease;
}
.ayf-slide.is-active .ayf-slide__img { transform: scale(1); }

/* A thin scrim behind the navigation only (about 150px), so the header reads on any photograph. No full-height wash. */
.ayf-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 150px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(rgba(251, 248, 243, .62), rgba(251, 248, 243, 0));
  transition: opacity .4s ease;
}
.ayf-hero[data-nav="light"]::before { background: linear-gradient(rgba(18, 12, 9, .42), rgba(18, 12, 9, 0)); }

/* Where the text sits: horizontal and vertical position are stored with the slide. */
.ayf-slide__stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  padding: calc(var(--ayf-header) + 1rem) max(var(--gutter), calc((100vw - 1440px) / 2)) clamp(3.25rem, 7vh, 4.25rem);
  pointer-events: none;
}
.ayf-slide[data-vpos="top"] .ayf-slide__stage { align-items: flex-start; }
.ayf-slide[data-vpos="middle"] .ayf-slide__stage { align-items: center; }
.ayf-slide[data-vpos="bottom"] .ayf-slide__stage { align-items: flex-end; }
.ayf-slide[data-hpos="left"] .ayf-slide__stage { justify-content: flex-start; }
.ayf-slide[data-hpos="center"] .ayf-slide__stage { justify-content: center; text-align: center; }
.ayf-slide[data-hpos="right"] .ayf-slide__stage { justify-content: flex-end; }
.ayf-slide[data-hpos="center"] .ayf-button-row { justify-content: center; }

.ayf-slide__copy {
  position: relative;
  isolation: isolate;
  max-width: 33rem;
  pointer-events: auto;
}
.ayf-slide__copy .eyebrow { margin: 0 0 .85rem; }
.ayf-slide__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.02em;
  font-size: clamp(2rem, 3.5vw, 3.35rem);
  text-wrap: balance;
}
.ayf-slide__title em { font-weight: 500; }
.ayf-slide__text {
  margin: .9rem 0 0;
  font-size: clamp(.95rem, 1.15vw, 1.08rem);
  line-height: 1.5;
}
.ayf-button-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.3rem; }
.ayf-button-row .button { min-height: 44px; padding: .65rem 1.3rem; }
.button--outline { color: inherit; background: transparent; border-color: currentColor; }
.button--outline:hover { color: var(--white); background: var(--ink); border-color: var(--ink); }

/* Style A: cream editorial plate, kept light (a compact, slightly translucent panel, not a big opaque block). */
.ayf-slide[data-layout="plate"] .ayf-slide__copy {
  padding: 1.5rem 1.75rem 1.65rem;
  color: var(--ink);
  background: rgba(251, 248, 243, .93);
  border-radius: .5rem;
  box-shadow: 0 10px 32px rgba(20, 12, 8, .14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ayf-slide[data-layout="plate"] .ayf-slide__title { font-size: clamp(1.85rem, 2.9vw, 2.8rem); }
.ayf-slide[data-layout="plate"] .eyebrow { color: var(--wine); }
.ayf-slide[data-layout="plate"] .ayf-slide__text { color: var(--ink-soft); }

/* Style B: text directly on the photograph, with an optional soft local scrim behind the text block only. */
.ayf-slide[data-layout="overlay"][data-tone="light"] { --scrim-rgb: 18, 12, 9; --scrim-a: .6; }
.ayf-slide[data-layout="overlay"][data-tone="dark"] { --scrim-rgb: 251, 248, 243; --scrim-a: .78; }
.ayf-slide[data-layout="overlay"][data-tone="light"] .ayf-slide__copy { color: var(--white); text-shadow: 0 1px 14px rgba(0, 0, 0, .28); }
.ayf-slide[data-layout="overlay"][data-tone="dark"] .ayf-slide__copy { color: var(--ink); }
.ayf-slide[data-layout="overlay"][data-tone="light"] .eyebrow { color: rgba(255, 255, 255, .92); }
.ayf-slide[data-layout="overlay"][data-tone="dark"] .eyebrow { color: var(--wine); }
.ayf-slide[data-layout="overlay"] .ayf-slide__copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -3.5rem -5rem;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--scrim-rgb), var(--scrim-a)) 0%, rgba(var(--scrim-rgb), calc(var(--scrim-a) * .55)) 55%, transparent 100%);
}
.ayf-slide[data-scrim="off"] .ayf-slide__copy::before { display: none; }
.ayf-slide[data-layout="overlay"][data-tone="light"][data-scrim="strong"] { --scrim-a: .82; }
.ayf-slide[data-layout="overlay"][data-tone="dark"][data-scrim="strong"] { --scrim-a: .92; }
.ayf-slide[data-layout="overlay"][data-tone="light"] .button--primary { box-shadow: 0 0 0 1px rgba(255, 255, 255, .4); text-shadow: none; }
.ayf-slide[data-layout="overlay"][data-tone="light"] .button--outline { text-shadow: none; }
.ayf-slide[data-layout="overlay"][data-tone="light"] .button--outline:hover { color: var(--ink); background: var(--white); border-color: var(--white); }

/* Slide indicators: the original homepage's small, quiet dots in the bottom-right corner (same 8px dots and 24px active pill as
   .hero-carousel__dot). No bar behind them. Their colour follows the slide (data-dots, default from data-nav) and a faint halo
   keeps them legible on any photograph. The pause button is only drawn when it receives keyboard focus. */
.ayf-hero__controls {
  position: absolute;
  z-index: 4;
  right: max(var(--gutter), calc((100vw - 1440px) / 2));
  bottom: clamp(1.4rem, 3.2vh, 2.2rem);
  display: flex;
  align-items: center;
  gap: .85rem;
  color: var(--white);
  filter: drop-shadow(0 0 3px rgba(20, 14, 10, .55));
}
.ayf-hero[data-dots="dark"] .ayf-hero__controls { color: #1f1f1c; filter: drop-shadow(0 0 3px rgba(251, 248, 243, .8)); }
.ayf-hero__dots { display: flex; align-items: center; gap: .55rem; }
.ayf-hero__dot { position: relative; width: 8px; height: 8px; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: width .25s ease, background .25s ease; }
.ayf-hero__dot::after { content: ""; position: absolute; inset: -9px -4px; }   /* larger click target, same look */
.ayf-hero__dot.is-active { width: 24px; border-radius: 999px; background: currentColor; }
.ayf-hero__pause { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; color: inherit; background: none; border: 0; }
.ayf-hero__pause:focus { position: static; width: 22px; height: 22px; overflow: visible; clip: auto; clip-path: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ayf-hero__pause svg { width: 12px; height: 12px; fill: currentColor; }
.ayf-hero__pause .i-play { display: none; }
.ayf-hero__pause[aria-pressed="true"] .i-play { display: block; }
.ayf-hero__pause[aria-pressed="true"] .i-pause { display: none; }
.ayf-hero button:focus-visible, .ayf-strip button:focus-visible, .ayf-card:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
.ayf-hero__controls button:focus-visible { outline-color: currentColor; }

/* Header on a photograph. Over a photo the home header is white until the page scrolls (the existing is-scrolled state).
   A slide with a bright top sets data-nav="dark": the header turns dark ink instead, exactly as it already does over the
   cream gradient (same logo swap), and changes with the slide. */
body:has(.ayf-hero[data-nav="dark"]) .site-header:not(.is-scrolled) .wordmark__title,
body:has(.ayf-hero[data-nav="dark"]) .site-header:not(.is-scrolled) .wordmark__place,
body:has(.ayf-hero[data-nav="dark"]) .site-header:not(.is-scrolled) .menu-toggle { color: var(--ink) !important; text-shadow: none !important; }
body:has(.ayf-hero[data-nav="dark"]) .site-header:not(.is-scrolled) .wordmark__logo-image--light { opacity: 0 !important; }
body:has(.ayf-hero[data-nav="dark"]) .site-header:not(.is-scrolled) .wordmark__logo-image--dark { opacity: 1 !important; }
@media (min-width: 981px) {
  body:has(.ayf-hero[data-nav="dark"]) .site-header:not(.is-scrolled) .primary-nav a:not(.nav-book) { color: var(--ink) !important; text-shadow: none !important; }
}

@media (max-width: 640px) {
  .ayf-hero { --ayf-header: 78px; height: 42svh; min-height: 330px; max-height: 440px; }
  .ayf-slide__stage { padding: calc(var(--ayf-header) + .5rem) var(--gutter) 1.1rem; }
  .ayf-slide[data-vpos="top"] .ayf-slide__stage,
  .ayf-slide[data-vpos="middle"] .ayf-slide__stage { align-items: flex-end; }
  .ayf-slide__copy { max-width: none; }
  .ayf-slide__copy .eyebrow { margin-bottom: .35rem; font-size: .6rem; }
  .ayf-slide__title { font-size: 1.6rem; line-height: 1.08; }
  .ayf-slide[data-layout="plate"] .ayf-slide__title { font-size: 1.4rem; }
  .ayf-slide__title br { display: none; }
  .ayf-slide__title em { display: inline; }
  .ayf-slide__text, .ayf-button-row .button--outline { display: none; }
  .ayf-button-row { margin-top: .65rem; }
  .ayf-button-row .button { min-height: 38px; padding: .4rem 1.05rem; font-size: .76rem; }
  .ayf-slide[data-layout="plate"] .ayf-slide__copy { padding: .8rem 1rem .9rem; }
  .ayf-slide[data-layout="overlay"] .ayf-slide__copy::before { inset: -2.25rem -1.5rem; }
  .ayf-slide__img { object-position: var(--fxm, var(--fx, 50%)) var(--fym, var(--fy, 50%)); }
  .ayf-hero__controls:not(:focus-within) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; filter: none; }
  .ayf-hero__controls:focus-within { right: auto; left: 50%; bottom: .6rem; transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ayf-slide { transition: none; }
  .ayf-slide__img { transform: none; transition: none; }
}

/* ------------------------------------------------------------------ content-page heroes
   The same hero as the homepage (plate or text on the photograph, same type, buttons and navigation), as a single photograph without slideshow or dots.
   Each page keeps the height its old hero had: schedule-type pages min(76svh, 760px) (620px on tablets and phones), workshop pages clamp(620px, 78vh, 820px)
   (690px), studio page 680px (650px), rental pages 88svh. */
.ayf-hero--page { height: auto; max-height: none; min-height: var(--ayf-min, min(76svh, 760px)); color: var(--ink); }
.ayf-hero--page[data-hero-type="workshop"] { --ayf-min: clamp(620px, 78vh, 820px); }
.ayf-hero--page[data-hero-type="content"] { --ayf-min: 680px; }
.ayf-hero--page[data-hero-type="rental"] { --ayf-min: 88svh; }
@media (max-width: 900px) {
  .ayf-hero--page { --ayf-min: 620px; }
  .ayf-hero--page[data-hero-type="workshop"] { --ayf-min: 690px; }
  .ayf-hero--page[data-hero-type="content"] { --ayf-min: 650px; }
  .ayf-hero--page[data-hero-type="rental"] { --ayf-min: 88svh; }
}
.ayf-hero--page .ayf-slide__stage { padding-bottom: clamp(2.5rem, 7vh, 4.5rem); }
.ayf-hero--page .ayf-slide__copy { max-width: 36rem; }
.ayf-hero--page .ayf-slide[data-layout="overlay"] .ayf-slide__copy { max-width: 40rem; }
/* Page heroes are taller than the homepage's on phones, so the whole intro and both buttons stay visible there. */
@media (max-width: 640px) {
  .ayf-hero--page .ayf-slide__stage { padding: calc(var(--ayf-header) + .75rem) var(--gutter) 1.5rem; }
  .ayf-hero--page .ayf-slide[data-vpos="top"] .ayf-slide__stage,
  .ayf-hero--page .ayf-slide[data-vpos="middle"] .ayf-slide__stage { align-items: flex-end; }
  .ayf-hero--page .ayf-slide__title { font-size: 1.9rem; line-height: 1.08; }
  .ayf-hero--page .ayf-slide[data-layout="plate"] .ayf-slide__title { font-size: 1.75rem; }
  .ayf-hero--page .ayf-slide__text { display: block; margin-top: .65rem; font-size: .95rem; line-height: 1.45; }
  .ayf-hero--page .ayf-button-row .button--outline { display: inline-flex; }
  .ayf-hero--page .ayf-slide[data-layout="plate"] .ayf-slide__copy { padding: 1.1rem 1.2rem 1.25rem; }
  .ayf-hero--page .ayf-slide__copy .eyebrow { font-size: .64rem; }
}
/* Content kept inside a page hero (for example the live dates on the Intro class pages, or a teacher's credential line) inherits the hero's text colour. */
.ayf-hero--page .ayf-slide__copy [data-ayf-keep] { margin-top: 1rem; }
.ayf-hero--page .ayf-slide__copy [data-ayf-keep="before"] { margin: 0 0 .6rem; font-weight: 600; }
.ayf-hero--page .ayf-slide__copy [data-ayf-keep] a { color: inherit; }
.ayf-hero--page .intro-course-hero__meta { margin-top: 1.1rem; font-size: .78rem; }
.ayf-hero--page .ayf-slide[data-layout="plate"] .intro-course-hero__meta { color: var(--wine); }

/* Navigation over a dark photograph (white), explicit so it also holds on pages whose header is dark by default. Desktop widths only: on tablets and phones
   the header is always the solid cream bar, so its logo and menu button stay dark. */
@media (min-width: 981px) {
  body:has(.ayf-hero[data-nav="light"]) .site-header:not(.is-scrolled) .primary-nav a:not(.nav-book) { color: var(--white) !important; text-shadow: 0 1px 8px rgba(0, 0, 0, .28) !important; }
  body:has(.ayf-hero[data-nav="light"]) .site-header:not(.is-scrolled) .wordmark__title,
  body:has(.ayf-hero[data-nav="light"]) .site-header:not(.is-scrolled) .wordmark__place,
  body:has(.ayf-hero[data-nav="light"]) .site-header:not(.is-scrolled) .menu-toggle { color: var(--white) !important; }
  body:has(.ayf-hero[data-nav="light"]) .site-header:not(.is-scrolled) .wordmark__logo-image--light { opacity: 1 !important; }
  body:has(.ayf-hero[data-nav="light"]) .site-header:not(.is-scrolled) .wordmark__logo-image--dark { opacity: 0 !important; }
}

/* ------------------------------------------------------------------ announcement strip */
.ayf-strip { position: relative; background: var(--soft); border-bottom: 1px solid var(--line); }
.ayf-strip[hidden] { display: none; }
.ayf-strip__inner { position: relative; width: min(calc(100% - (2 * var(--gutter))), 1440px); margin-inline: auto; }
.ayf-strip__viewport { overflow: hidden; }
.ayf-strip__track { display: flex; will-change: transform; }

.ayf-card {
  position: relative;
  flex: 0 0 calc(100% / var(--cols, 4));
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label arrow" "title title" "text text";
  align-content: start;
  column-gap: .75rem;
  padding: 1.2rem 1.35rem 1.25rem;
  color: var(--ink);
  text-decoration: none;
  border-left: 1px solid var(--line);
  transition: background .25s ease;
}
.ayf-card:first-child { border-left: 0; padding-left: 0; }
.ayf-card:hover { background: rgba(255, 255, 255, .55); }
.ayf-card__label { grid-area: label; margin: 0 0 .3rem; font-size: .64rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #a3471a; }
.ayf-card__title { grid-area: title; margin: 0; font-family: var(--display); font-size: clamp(1.05rem, 1.35vw, 1.3rem); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ayf-card__text { grid-area: text; margin: .3rem 0 0; font-size: .8rem; line-height: 1.4; color: var(--ink-soft); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ayf-card__arrow { grid-area: arrow; font-size: .95rem; line-height: 1; color: var(--ink-soft); transition: transform .25s ease, color .25s ease; }
.ayf-card:hover .ayf-card__arrow { transform: translate(2px, -2px); color: var(--wine); }

/* Manual stepping for 5+ announcements (desktop and tablet). Hidden until the strip is hovered or focused. */
.ayf-strip__nav { position: absolute; top: 50%; right: -.5rem; z-index: 3; display: flex; gap: .35rem; transform: translateY(-50%); opacity: 0; transition: opacity .25s ease; }
.ayf-strip:hover .ayf-strip__nav, .ayf-strip:focus-within .ayf-strip__nav { opacity: 1; }
.ayf-strip__nav button { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 50%; box-shadow: 0 2px 8px rgba(20, 12, 8, .12); cursor: pointer; }
.ayf-strip__nav[hidden] { display: none; }

/* Phones: still one row. Exactly two cards share the width (50% each); one announcement takes the full width; three or more
   swipe sideways in the same 50% cards and rotate on their own. Text is scaled down and clamped so the row stays compact. */
@media (max-width: 720px) {
  .ayf-strip__inner { width: 100%; }
  .ayf-strip__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .ayf-strip__viewport::-webkit-scrollbar { display: none; }
  .ayf-strip__track { transform: none !important; }
  .ayf-card, .ayf-card:first-child { flex: 0 0 50%; scroll-snap-align: start; padding: .8rem .85rem .85rem; border-left: 1px solid var(--line); column-gap: .4rem; }
  .ayf-card:first-child { border-left: 0; }
  .ayf-strip--one .ayf-card, .ayf-strip--one .ayf-card:first-child { flex-basis: 100%; padding: .8rem var(--gutter) .85rem; }
  .ayf-strip__nav { display: none; }
  .ayf-card__label { margin-bottom: .22rem; font-size: .56rem; letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ayf-card__title { font-size: .98rem; line-height: 1.15; -webkit-line-clamp: 2; }
  .ayf-card__text { margin-top: .2rem; font-size: .7rem; line-height: 1.3; -webkit-line-clamp: 1; }
  .ayf-card__arrow { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ayf-card, .ayf-card__arrow, .ayf-strip__nav { transition: none; }
}

/* On tablets and phones the header is a solid cream bar. Over a hero photograph it becomes a soft fade (cream at the top, clear at the bottom edge), so the
   photograph is not cut off by a block; the logo, language button and menu stay dark and readable. Once the page is scrolled the normal solid bar returns. */
@media (max-width: 980px) {
  body:has(.ayf-hero) .site-header:not(.is-scrolled) {
    background: linear-gradient(to bottom, rgba(251, 248, 243, .62) 0%, rgba(251, 248, 243, .34) 55%, rgba(251, 248, 243, 0) 100%) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
}
/* Over a dark photograph (navigation set to white in the Admin) the fade is dark and the logo and menu are white. */
@media (max-width: 980px) {
  body:has(.ayf-hero[data-nav="light"]) .site-header:not(.is-scrolled) {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .22) 55%, rgba(0, 0, 0, 0) 100%) !important;
  }
  body:has(.ayf-hero[data-nav="light"]) .site-header:not(.is-scrolled) .wordmark__title,
  body:has(.ayf-hero[data-nav="light"]) .site-header:not(.is-scrolled) .wordmark__place,
  body:has(.ayf-hero[data-nav="light"]) .site-header:not(.is-scrolled) .menu-toggle { color: var(--white) !important; }
  body:has(.ayf-hero[data-nav="light"]) .site-header:not(.is-scrolled) .wordmark__logo-image--light { opacity: 1 !important; }
  body:has(.ayf-hero[data-nav="light"]) .site-header:not(.is-scrolled) .wordmark__logo-image--dark { opacity: 0 !important; }
}

/* Phones: the cream plate is a compact panel (about 70% of the width), not an edge-to-edge block, so more of the photograph shows around it. */
@media (max-width: 640px) {
  .ayf-slide[data-layout="plate"] .ayf-slide__copy,
  .ayf-hero--page .ayf-slide[data-layout="plate"] .ayf-slide__copy { width: fit-content; max-width: min(100%, 17rem); }
}