/* --------------------------------------------------------------------------
   The Hastas page

   Attached to the two hasta-* bands rather than a page slug, so a group can be
   placed anywhere. Nothing here is measured against a deck canvas and no
   colour below is a new hex — ink, rule and ground come from site.css.
   -------------------------------------------------------------------------- */

/* Each band paints its own background, reverted on request from the single
   page-wide image. --section-bg is the property every other band on the site
   uses and swati_style_attr() writes it inline, so this needs nothing on <body>
   and no attachment trick to join the two. */
.hasta-band {
  background-image: var(--section-bg, none);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

.hasta-intro { padding-block: clamp(2rem, 5vw, 4rem) clamp(1rem, 2.5vw, 2rem); }
.hasta-group { padding-block: clamp(1rem, 2.5vw, 2rem) clamp(2rem, 5vw, 4rem); }
.hasta-video { padding-block: clamp(1rem, 2.5vw, 2rem); }

/* The engraved face in caps, as the screenshot has both headings. Cinzel
   carries 400 and 600, so this is a real weight and not a synthesised one. */
.hasta-band__title {
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  font-family: var(--font-engraved);
  font-size: clamp(1.35rem, 2.9vw, 2.35rem);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   The film beside the copy
   -------------------------------------------------------------------------- */

/* The still is narrow in the intro and wider in the rows, which is the only
   difference between the two layouts — so the grid is declared once and the
   ratio overridden per band rather than the whole thing written twice. */
.hasta-intro__body,
.hasta-row {
  display: grid;
  grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
  gap: clamp(1rem, 2.6vw, 2.25rem);
  align-items: start;
}

.hasta-row {
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
}

.hasta-row + .hasta-row {
  margin-top: clamp(1.5rem, 3.5vw, 2.75rem);
}

.hasta-media { min-width: 0; }

/* position: relative is what the play mark is placed against. The link is a
   block so the whole still is the target, not just the picture's own box. */
.hasta-media__link {
  position: relative;
  display: block;
  cursor: pointer;
}

.hasta-media img,
.hasta-media picture {
  width: 100%;
  height: auto;
  display: block;
}

.hasta-media__link:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
}

/* The films play in place, so the media column is an embed frame rather than a
   still. The ratio is on the wrapper, not the iframe, so an oEmbed response
   carrying its own width and height still fills it. */
.hasta-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.hasta-media iframe,
.hasta-media video,
.hasta-media > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.hasta-media video { object-fit: contain; }

/* The intro film is portrait and the ten demonstrations are not.

   Every hasta film is 1920x1080 and sits in the 16/9 frame above exactly. The
   film that opens the page is a phone capture, 720x1280 — 9:16 to the pixel —
   and in a 16/9 frame object-fit: contain was doing the only thing it can:
   holding the whole film inside the box and filling the rest with the black
   the frame is painted. That left the picture about a third of the width it
   had, with a band of black either side of it wider than the film itself.

   So the frame follows the film here rather than the band. Scoped to
   .hasta-intro__body, which holds that one film and no other — the rows below
   keep 16/9 because their films are 16/9.

   If the intro film is ever swapped for a landscape one this wants changing
   back; the ratio is a fact about the file, not about the section. */
.hasta-intro__body .hasta-media { aspect-ratio: 9 / 16; }

/* A picture chosen in place of the film. All of the frame above — the ratio
   held on the wrapper, the black ground, the child pinned to fill it — is there
   because an embed has no height of its own. A picture has one, so it drops the
   frame and shows whole at its own proportions: nothing cropped to the film's
   9:16, and no black around a picture of another shape. The two classes weigh
   the same as the 9:16 rule and come after it, which is what lets them win. */
.hasta-media.hasta-media--image {
  aspect-ratio: auto;
  background: none;
}

.hasta-media.hasta-media--image > * { position: static; }

/* With nothing in the left column the copy is the grid's only child, and would
   otherwise sit in the narrow first track with the wide one empty beside it. */
.hasta-intro__copy:only-child { grid-column: 1 / -1; }

/* WordPress wraps oEmbed output in its own aspect helpers; the frame already
   holds the ratio, so they are flattened rather than fought. */
.hasta-media [class*="wp-embed-aspect"] { padding: 0; height: 100%; }

.hasta-media__fallback { padding: 1rem; color: #fff; word-break: break-all; }

/* A lead film on its own, no copy beside it — deliberately not nested inside
   .hasta-intro__body, so it keeps the 16/9 the .hasta-media rule above already
   draws rather than that band's 9:16 portrait override. Full width of .page,
   the same column every other band reads at, so the band lands as a section
   in its own right and not a clip floating in the middle of the page. */
.hasta-video__frame {
  width: 100%;
}

/* --------------------------------------------------------------------------
   The copy
   -------------------------------------------------------------------------- */

.hasta-intro__copy p { margin: 0 0 1em; }
.hasta-intro__copy p:last-child { margin-bottom: 0; }

/* Larger and lighter than the band heading, in the engraved face: in the
   screenshot the hasta's name is the loudest thing in its row. */
.hasta-row__title {
  margin: 0 0 0.5em;
  font-family: var(--font-engraved);
  font-size: clamp(1.15rem, 2.1vw, 1.75rem);
  line-height: 1.2;
  font-weight: 400;
  color: var(--c-ink);
}

.hasta-row__copy-para {
  margin: 0 0 0.75em;
  line-height: 1.5;
  color: var(--c-ink);
}

.hasta-row__copy-para:last-child { margin-bottom: 0; }

/* Sits at the end of the last sentence rather than on its own line, so it
   reads as a continuation and not as a button. */
.hasta-row__more {
  color: var(--c-nav-active);
  text-decoration: none;
  white-space: nowrap;
}

.hasta-row__more::after { content: "\2026"; }

.hasta-row__more:hover,
.hasta-row__more:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* One column at the width the rest of the site already breaks at. The still
   leads, which is the order the two read in on a narrow screen, and it is
   capped so a portrait still cannot fill a phone screen on its own. */
@media (max-width: 1024px) {
  .hasta-intro__body,
  .hasta-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .hasta-media {
    max-width: 26rem;
  }

  /* Stays full width here too — the 26rem cap above is for a still beside
     copy, not for this band, which has no copy to make room for. */
  .hasta-video__frame {
    max-width: none;
  }
}