/* ==========================================================================
   Standalone guide pages: final layer
   --------------------------------------------------------------------------
   Shared by /guides/teens/*.html and /guides/women/*.html. Loaded LAST, after
   premium.css, because it has to correct two things that stylesheet does.

   1. SPACING AT THE END OF THE GUIDE.
      On the hubs each guide sat inside <details class="guide-drop">, and the
      padding that gave the text room came from
      `details.guide-drop > .guide-inner { padding: 0 30px 36px; }`. That
      selector needs a real <details> element, so it never applied to the
      standalone pages and the last paragraph ended hard against the panel
      below it, which read as the wording being cut off. The padding is
      restored here, with more room at the end than the accordion had, since
      a full page can afford it.

   2. GUIDE TYPOGRAPHY.
      premium.css tunes the guide body text through
      `body .guide-drop .guide-inner p / li / h3 / h4` and a dozen similar
      rules for .tag, .say-line, .info-callout, .research-source and the
      rest. Every one of those is scoped to .guide-drop, so on a page without
      an accordion the text fell back to the base size and the guides looked
      cramped and slightly smaller than the same words on the hub.

      Rather than copy those rules and let the copies drift apart, the page
      wrapper carries the .guide-drop class so they all apply as written.
      That class also brings the accordion tile's own chrome with it from
      rebrand.css, which a full-width article must not have, so the chrome is
      switched back off immediately below.

   The hub-specific base and layer sheets differ between the two sections
   (guide-teens-*.css, guide-women-*.css); everything in this file is common
   to both, so keep it free of section-specific values.
   ========================================================================== */

/* --- undo the accordion tile chrome that .guide-drop brings with it ------- */
.guide-page.guide-drop {
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  /* premium.css paints the card border, fill and drop shadow with
     !important as part of a large grouped rule, so these have to match it. */
  box-shadow: none !important;
  margin-bottom: 0 !important;
  width: auto;
  transform: none !important;
}
.guide-page.guide-drop:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* --- the spacing the accordion used to provide ---------------------------- */
.guide-page .guide-inner {
  max-width: 760px;
  margin: 0 auto;
  /* Top padding keeps the lead image (or the badge, on guides without one)
     off the card's top edge instead of sitting flush against it. */
  padding: 30px 30px 56px;
}

/* Never let the last thing in the guide sit flush against the bottom edge.
   Several guides end with an inline-block .research-source pill or a <section>
   that carries no bottom margin of its own. */
.guide-page .guide-inner > *:last-child {
  margin-bottom: 0;
}
.guide-page .guide-inner::after {
  content: "";
  display: block;
  height: 8px;
}

@media (max-width: 600px) {
  .guide-page .guide-inner { padding: 18px 18px 44px; }
}

.guide-page { padding: 0; }

/* Mirrors `.guide-inner h2` exactly, for the promoted <h1>. */
.guide-page .guide-inner h1 {
  font-family: 'Cabin', sans-serif;
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 22px;
  line-height: 1.25;
}
.guide-page .guide-inner h1 em { font-style: italic; color: var(--accent); }

/* Breadcrumb trail.
   The trail is a <nav>, so the base sheets' top-menu rules (`nav { ... }`,
   several with !important) land on it too: on phones they zero its margins
   and pin it to the left edge, on desktop they give it the menu's pill
   border and shadow, and at every size they make it sticky. Everything the
   menu sets is reset here, with !important where the menu rule has it
   (including the phone rule that turns off taps on every <nav>).
   The bottom margin keeps the trail clear of the guide image below. */
nav.guide-crumbs { position: static !important; top: auto !important;
  z-index: auto !important; display: block !important;
  pointer-events: auto !important;
  width: min(820px, 92%) !important; max-width: none !important;
  margin: 22px auto 22px !important; padding: 0 !important;
  background: transparent !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  font-size: 12.5px; letter-spacing: .02em; line-height: 1.5;
  color: var(--mid, #5A5A5A); }
@media (max-width: 600px) {
  nav.guide-crumbs { margin: 18px auto 24px !important; }
}
/* The top menu is a see-through bar floating in from the screen edges (10px
   on phones, 14px on desktop), so the trail (the first thing under it)
   showed through the bar and in the gap around it while scrolling.
   A fixed strip in the page colour sits just below the menu (z-index 100)
   and covers the top of the screen down to the menu's bottom edge, so
   scrolled content slides out of sight behind it. The heights track the
   menu's bottom edge at each width: 72px on phones, 86px on desktop, and
   100px in the narrow band where the menu grows taller. */
main#main-content::before { content: ""; position: fixed; z-index: 99;
  top: 0; left: 0; right: 0; height: 86px;
  background: var(--lux-bone, #F2ECE5); pointer-events: none; }
@media (min-width: 821px) and (max-width: 879px) {
  main#main-content::before { height: 100px; }
}
@media (max-width: 800px) {
  main#main-content::before { height: 72px; }
}
.guide-crumbs ol { list-style: none; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 6px 10px; margin: 0; padding: 0; }
.guide-crumbs li { display: flex; align-items: center; gap: 10px; }
/* Separator trails each item rather than leading the next, so when a long
   guide name wraps onto its own line on a phone it doesn't start with a
   stray arrow. */
.guide-crumbs li:not(:last-child)::after { content: "\2023"; opacity: .5; }
.guide-crumbs a { color: var(--mid, #5A5A5A); text-decoration: none;
  border-bottom: 1px solid transparent; }
.guide-crumbs a:hover, .guide-crumbs a:focus-visible {
  color: var(--charcoal, #1C1C1C); border-bottom-color: currentColor; }
.guide-crumbs [aria-current="page"] { color: var(--charcoal, #1C1C1C); font-weight: 600; }

/* "More guides like this" */
.guide-more { width: min(820px, 92%); margin: 10px auto 0; padding: 30px 0 6px;
  border-top: 1px dashed var(--border, #D98F9D); }
.guide-more h2 { font-family: 'Cabin', sans-serif; font-weight: 300;
  font-size: clamp(1.3rem, 3.2vw, 1.7rem); margin: 0 0 18px; text-align: center; }
/* 300px minimum gives two columns at full width (a neat 2x2 for the usual
   four cards, rather than three plus an orphan) and one column on phones. */
.guide-more ul { list-style: none; margin: 0; padding: 0; display: grid;
  gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
/* Each card stacks the emoji above the title and category label, all
   centred, which matches the site-wide centred text set in the base sheets
   (`body, body * { text-align: center !important; }`). A side-by-side emoji
   left the centred lines floating off-centre beside it. Cards in a row share
   the row's height and centre their content vertically, so short and long
   titles sit level with each other. */
.guide-more li { display: flex; }
.guide-more a { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; width: 100%; box-sizing: border-box;
  text-align: center !important;
  padding: 18px 20px; text-decoration: none; background: var(--white, #FAF5F1);
  border: 1.5px solid var(--border, #D98F9D); border-radius: 18px;
  transition: transform .18s ease, box-shadow .18s ease; }
.guide-more a:hover, .guide-more a:focus-visible {
  transform: translateY(-2px); box-shadow: 0 12px 28px rgba(110,95,142,.14); }
.guide-more .gm-emoji { display: block; font-size: 24px; line-height: 1; }
.guide-more a > span:last-child { display: block; max-width: 32ch; }
.guide-more .gm-title { display: block; font-family: 'Cabin', sans-serif;
  font-weight: 600; font-size: 14.5px; line-height: 1.3;
  color: var(--charcoal, #1C1C1C); margin-bottom: 3px; }
.guide-more .gm-title em { font-style: italic; color: var(--accent); }
.guide-more .gm-kicker { display: block; font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 600; color: var(--mid, #5A5A5A); }

/* Back-to-hub button under the article */
.guide-back { width: min(820px, 92%); margin: 26px auto 0; text-align: center; }
.guide-back a { display: inline-block; padding: 13px 30px; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  background: var(--charcoal, #1C1C1C); color: #fff; border-radius: 100px; }
.guide-back a:hover, .guide-back a:focus-visible { opacity: .88; }

/* Crisis note, matched to the panel used on the contact and 404 pages */
.guide-crisis { width: min(820px, 92%); margin: 30px auto 0;
  background: var(--white, #FAF5F1); border: 1px solid var(--border, #D98F9D);
  border-left-width: 4px; border-radius: 14px; padding: 20px 24px;
  font-size: 13.5px; line-height: 1.7; color: var(--mid, #5A5A5A); }
.guide-crisis strong { color: var(--charcoal, #1C1C1C); }

/* The hub's guide image is capped for the accordion; give it more room here.
   The rounded corners are clipped on the wrapper so the image and any border
   premium.css paints on .guide-image share one outline. */
.guide-page .guide-image { width: 100%; max-width: 460px; margin: 0 auto 26px;
  border-radius: 20px; overflow: hidden; }
.guide-page .guide-image img { display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; }

/* Extra room above the lead image so it does not crowd the panel's top
   edge; on phones it is also inset from the sides, since the article's own
   18px side padding left it almost touching the panel edges. */
.guide-page .guide-inner > .guide-image:first-child { margin-top: 18px; }

/* Desktop: the 30px panel padding plus 18px still read as the image sitting
   on the guide's top edge at full width, so give it a clearly visible gap.
   Phones keep the spacing set in the block below. */
@media (min-width: 601px) {
  .guide-page .guide-inner { padding-top: 48px; }
  .guide-page .guide-inner > .guide-image:first-child { margin-top: 32px; }
}

@media (max-width: 600px) {
  .guide-page .guide-image { max-width: min(calc(100% - 40px), 400px);
    margin-bottom: 24px; border-radius: 16px; }
  .guide-page .guide-inner > .guide-image:first-child { margin-top: 14px; }
}