/* =========================================================================
   ABOUT TEMPLATE (template-about.php)

   Hero (copy + reception photograph), an editorial "story" fold for the
   body copy, and the practice video in a proper frame — then the standard
   closing folds, which reuse .cta/.rev/.visit from folds.css verbatim.

   Every word this file styles is copied from the old site's About page
   into the page's own content; nothing here invents copy. Same
   presentation-only discipline as patient-info.css / our-office.css, and
   the hero deliberately matches those two so the reference pages open the
   same way.
   ========================================================================= */

/* -------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------- */
.abt-hero.fold { padding-top: calc(var(--fold) + var(--sp-2)); padding-bottom: var(--sp-6); }

.abt-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: clamp(1.75rem, 3.4vw, 3.6rem);
  align-items: center;
}
.abt-hero-copy { max-width: 62ch; }
.abt-hero-copy .eyebrow + h1 { margin-top: var(--sp-2); }

/* Same reasoning as .pinfo-hero-copy h1: the heading carries .d4 (the
   site's largest display size) but this page's H1 is two short words, and
   at d4 it read as bigger than the H2s further down. Pinned to .d3. */
.abt-hero-copy h1 { font-size: var(--fs-d3); }

/* The old page's opening line ("Welcome to Millway Dental: Your Trusted
   Family Dentist in Mississauga, ON") is a standfirst, not a paragraph —
   it sits between the H1 and the lede at a size that reads as neither. */
.abt-hero-copy h2 {
  margin-top: var(--sp-3);
  font-size: var(--fs-lg); font-weight: 600;
  letter-spacing: var(--track-tight);
  line-height: 1.3;
  color: var(--accent-text);
}
.abt-hero-copy .lead { margin-top: var(--sp-2); }

.abt-hero-actions {
  display: flex; flex-wrap: wrap;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  margin-top: var(--sp-4);
}

.abt-hero-shot {
  position: relative;
  margin: 0; border-radius: var(--r-md); overflow: hidden;
  background: var(--n-10);
  height: 538px;
  box-shadow: 0 30px 60px -34px rgba(var(--deep-rgb), 0.35);
}
.abt-hero-shot img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-3) var(--ease);
}
@media (hover: hover) {
  .abt-hero-shot:hover img { transform: scale(1.05); }
}

/* -------------------------------------------------------------------------
   STORY — the remaining body copy

   A label column beside the prose rather than the prose running the full
   shell width. Four paragraphs set edge-to-edge at this width run past 160
   characters a line; giving a third of the row to a sticky section label
   both fixes the measure and makes the fold read as designed rather than
   as text poured into the page.
   ------------------------------------------------------------------------- */
.abt-story.fold { padding-block: calc(var(--fold) / 2); }

.abt-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
/* travels with the reader down a long column of prose */
.abt-story-label { position: sticky; top: 120px; }
.abt-story-label::after {
  content: '';
  display: block;
  width: 46px; height: 3px;
  margin-top: var(--sp-2);
  border-radius: var(--r-pill);
  background: linear-gradient(to right, var(--graphic), rgba(var(--sage-rgb), 0));
}

.abt-story-body { max-width: 68ch; }
.abt-story-body p { font-size: var(--fs-body); line-height: 1.75; color: var(--ink-mid); }
.abt-story-body p + p { margin-top: var(--sp-3); }

/* -------------------------------------------------------------------------
   VIDEO — the practice's own YouTube introduction
   ------------------------------------------------------------------------- */
.abt-video.fold { padding-block: calc(var(--fold) / 2); }

.abt-video-head {
  max-width: 62ch;
  margin: 0 auto clamp(1.75rem, 3vw, 2.6rem);
  text-align: center;
}
.abt-video-head h2 { margin-top: var(--sp-2); }

.abt-video-frame {
  max-width: 900px;
  margin: 0 auto;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--n-10);
  box-shadow: 0 30px 60px -34px rgba(var(--deep-rgb), 0.4),
              inset 0 0 0 var(--hair) var(--rule);
}
/* aspect-ratio on the iframe itself, not a padding-top box: the element is
   replaced and sized by the box here, so there is nothing to absolutely
   position against. */
.abt-video-frame iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* -------------------------------------------------------------------------
   CLOSING CTA — same reasoning as .pinfo-cta: the fold above runs at half
   padding, so the CTA panel needs its own top space back.
   ------------------------------------------------------------------------- */
.abt-cta { margin-top: calc(var(--sp-2) - 5px); }

/* -------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .abt-hero-grid { grid-template-columns: minmax(0, 1fr); }
  /* No order:-1, same call as .contact-hero-shot: the sequence is the
     point — title, standfirst, lede, then the photograph. */
  .abt-hero-shot { aspect-ratio: 16 / 9; height: auto; }

  .abt-story-grid { grid-template-columns: minmax(0, 1fr); }
  .abt-story-label { position: static; }
  .abt-story-body { max-width: none; }
}

@media (max-width: 640px) {
  /* Mobile-only unification: every reference page's CTA lands on the same
     top space here, though each keeps its own desktop value above. */
  .abt-cta { margin-top: var(--sp-5); }
  .abt-hero.fold { padding-bottom: var(--sp-5); }
  .abt-hero-shot { aspect-ratio: 4 / 3; }
  .abt-hero-actions .btn i { display: none; }
}