/* ============================================================================
   08-article.css — the supporting-page (article) shell.

   Supporting pages are where the organic traffic actually lands: they answer
   one reader question each and hand the reader to the booking page. So the
   shell is deliberately quieter than the homepage — no full-bleed photo hero,
   no stat strip, no competing CTAs above the fold. The article earns the click
   with the text, and the CTA rail is always one glance away.

   Loaded with 07-prose.css, only by article-type pages.
   ============================================================================ */

/* Height of the frosted navbar: 3rem min + xs padding top and bottom.
   Anything that sticks or scroll-anchors has to clear it. */
:root { --navbar-h: calc(3rem + (var(--space-xs) * 2)); }

/* ---- editorial hero ------------------------------------------------------
   Type only. A photo here would push the opening paragraph — the part that
   tells the reader they are in the right place — below the fold on a phone. */
/* Same construction as the homepage hero at roughly half the height. An
   article still needs a room to stand in, but the reader came for the text, so
   it must not push the opening paragraph off a phone screen. */
.arthero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-block-size: clamp(19rem, 56svh, 34rem);
  color: #fff;
  overflow: hidden;
}
.arthero__media { position: absolute; inset: 0; z-index: -1; }
.arthero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.arthero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgb(var(--scrim-rgb) / 0.82) 0%, rgb(var(--scrim-rgb) / 0.44) 55%, rgb(var(--scrim-rgb) / 0.30) 100%),
    linear-gradient(rgb(var(--scrim-rgb) / 0.38), rgb(var(--scrim-rgb) / 0.38));
}
/* See the homepage note: inline-size:100% stops .center's auto margins from
   collapsing this grid item to the width of its widest child. */
.arthero__body { inline-size: 100%; padding-block: var(--space-3xl) var(--space-2xl); text-align: center; }
.arthero__body .stack { align-items: center; }
.arthero h1 {
  color: #fff;
  font-size: clamp(2rem, 1.1rem + 3.4vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-inline-size: 22ch;
  margin-inline: auto;
}
.arthero .byline { justify-content: center; }
.arthero__kicker {
  display: inline-flex; align-items: center;
  align-self: center;  /* .stack is a flex column; without this the pill stretches */
  inline-size: fit-content;
  padding: 0.4rem 0.95rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.38);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}
/* The byline sits on the image, so it inverts here. Breadcrumbs deliberately do
   NOT live in the hero: grey-on-photo never contrasts reliably across 200 sites
   with 200 different images, and the reference puts none there either. */
.arthero .byline { color: rgba(255,255,255,0.86); }
.arthero .byline__site { color: #fff; }
.arthero .byline__sep { background: rgba(255,255,255,0.5); }

/* ---- byline --------------------------------------------------------------
   Site name + last-updated date, no fake author. Inventing a human byline for
   200 affiliate sites is the kind of thing that reads as deceptive and is
   trivially disprovable; a freshness date is the signal that actually helps
   the reader, and it is true. */
.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-s);
  font-size: var(--type-footnote);
  color: var(--label-secondary);
}
.byline__site { font-weight: var(--weight-semibold); color: var(--label); }
.byline__sep {
  inline-size: 3px; block-size: 3px; border-radius: 50%;
  background: var(--label-tertiary); flex: none;
}

/* ---- article + CTA rail --------------------------------------------------
   --sidebar-content-min is the wrap trigger: while the article can hold 62% of
   the row the rail stays beside it, otherwise the rail drops underneath. No
   media query decides this — the content does. */
/* Breadcrumbs sit between hero and article; pull the article up to compensate. */
.artwrap {
  --sidebar-width: 19rem;
  --sidebar-content-min: 62%;
  --sidebar-gap: var(--space-2xl);
  padding-block: var(--space-m) var(--section-gap);
}

.artrail > * {
  position: sticky;
  inset-block-start: calc(var(--navbar-h) + var(--space-m));
}
/* Once the rail has wrapped under the article, sticky is pointless and would
   pin the card to the top of a section it no longer sits beside. */
@media (max-width: 60rem) {
  .artrail > * { position: static; }
}

/* ---- CTA card ------------------------------------------------------------ */
.ctacard {
  background: var(--bg-elevated);
  border: 0.5px solid var(--separator);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-md);
  padding: var(--space-m);
  display: flex; flex-direction: column; gap: var(--space-s);
}
.ctacard__media { border-radius: var(--radius-m); overflow: hidden; }
.ctacard__title {
  font-size: var(--type-headline);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-wrap: balance;
}
.ctacard__price {
  display: flex; align-items: baseline; gap: var(--space-2xs);
}
.ctacard__from { font-size: var(--type-footnote); color: var(--label-secondary); }
.ctacard__value {
  font-size: var(--type-title-2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-title);
}
.ctacard__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-s);
  font-size: var(--type-footnote); color: var(--label-secondary);
}
.ctacard__meta > span { display: inline-flex; align-items: center; gap: 4px; }
.ctacard .btn { inline-size: 100%; justify-content: center; }
.ctacard__note {
  font-size: var(--type-caption);
  /* --label-tertiary (0.32 alpha) measures 2.65:1 here and fails AA. */
  color: var(--label-secondary);
  text-align: center;
}

/* ---- key-takeaways box ---------------------------------------------------
   Answers the question in the title before the reader scrolls. This is the
   block that wins featured snippets, so it is real content, not decoration. */
.takeaway {
  /* NOT --bg-grouped: body already uses it, so the box vanished into the page
     in light mode and again in dark, where --bg-grouped is pure black. */
  background: var(--bg-elevated);
  border: 0.5px solid var(--separator);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  box-shadow: var(--shadow-sm);
}
.takeaway h2 {
  font-size: var(--type-subhead);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--label-secondary);
}
.takeaway ul { margin-block-start: var(--space-xs); }
.takeaway li { max-inline-size: none; }

/* ---- last-updated / sources footer --------------------------------------- */
.artmeta {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-m);
  border-block-start: 0.5px solid var(--separator);
  font-size: var(--type-footnote);
  color: var(--label-secondary);
}