/* The shared guide template (design/guides/_template.html, rendered by
   scripts/render-guide.js from design/guides/content/<slug>.json).

   One template for every guide: header with the premier sponsor column, hero,
   a sticky jump bar, things to do, where to eat, this week,
   stories and before you go. It sits on guide-editorial.css and takes
   everything it can from it: the Playfair/Inter pairing, thin rules, the
   guide's one accent (body[data-guide]), the disclosures, the sources line
   and the newsletter band. What is new is here, scoped to .gt-main.

   Site rules this holds (CLAUDE.md): no fully rounded pills (8px on a 44px
   control, 6px on a tag); a selected control is the pale cool blue #e6eef3
   with its #cfdbe3 hairline and ink text, never a solid fill; nothing depends
   on hover; every tap target is at least 44px. It never styles the shared
   chrome (.lfhx-*, .mobile-bottom-nav), which is nav-footer.css's. */

.gt-main {
  --gt-sticky-top: 77px;           /* the shared header: 76px plus its rule */
  --gt-tint: #e6eef3;
  --gt-tint-line: #cfdbe3;
  --gt-slate: #35576b;             /* tag text: 6.3:1 on the tint */
  /* Every item sits in its own box, edged in the guide's own accent (owner,
     28 September 2026: "give the boxes some colour around the borders",
     "I like boxes for each thing"). Half the accent over white: clearly
     coloured, still quieter than the text inside it. */
  --gt-box-line: #b6c0d0;
  --gt-box-line: color-mix(in srgb, var(--ge-accent) 50%, #fff);
}
.gt-main section[id] { scroll-margin-top: calc(var(--gt-sticky-top) + 4.5rem); }

/* ---------- header: title block, premier sponsor column ---------- */
.gt-head { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 1.75rem; padding-bottom: 1.5rem; }
.gt-title {
  font-family: var(--ge-serif); font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.08; letter-spacing: -.035em;
}
.ge-main .gt-lede { margin-top: .85rem; max-width: 40rem; font-size: 17px; line-height: 1.55; color: rgba(40, 51, 57, .9); }
.gt-head .ge-meta { margin-top: 1rem; }
/* The eyebrow flows as one line of text rather than flex items, so a long
   list of communities wraps after the dot instead of stranding it. */
.gt-head .ge-kicker { display: block; line-height: 1.6; }
.gt-head .ge-kicker > span[aria-hidden] { margin: 0 .45rem; }

/* The premier mount, moved beside the title (owner, 28 September 2026). It
   keeps the shared tiles and tracking from sponsor-spots.js; only the panel
   around them goes, so two logos read as a quiet column, not a banner. */
.gt-head .premier-band.gt-premier { margin: 1.25rem 0 0; padding: 0; border: 0; border-radius: 0; background: none; }
.gt-premier .pb-inner { max-width: none; margin: 0; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: .5rem; }
.gt-premier .pb-label { text-align: left; font-size: 10px; letter-spacing: .18em; color: var(--ge-muted); }
.gt-premier .pb-spots { gap: .6rem; }
.gt-premier .pb-spot { height: 60px; padding: 8px 12px; border-radius: 8px; border-color: var(--ge-line); }
.gt-premier .pb-spot:only-child { width: calc(50% - .3rem); grid-column: auto; justify-self: start; }

@media (min-width: 768px) {
  .gt-head { padding-top: 2.75rem; padding-bottom: 2rem; }
  .ge-main .gt-lede { font-size: 19px; }
}
@media (min-width: 900px) {
  /* With no premier sponsor the band is hidden and the title spans the row. */
  .gt-head:has(> .gt-premier:not([hidden])) { grid-template-columns: minmax(0, 1fr) 176px; column-gap: 3rem; align-items: start; }
  .gt-head .premier-band.gt-premier { margin-top: .25rem; }
  .gt-premier .pb-spots { grid-template-columns: minmax(0, 1fr); }
  .gt-premier .pb-spot { height: 64px; }
  .gt-premier .pb-spot:only-child { width: 100%; }
}

/* ---------- hero ---------- */
.gt-hero { margin: 0; }
/* A band, not a poster (owner, 28 September 2026: "hero seems oversized"):
   at 420px on a laptop it pushed everything under it below the fold. */
.ge-main .gt-hero-img { width: 100%; height: 190px; object-fit: cover; background: var(--ge-sand); }
@media (min-width: 640px)  { .ge-main .gt-hero-img { height: 260px; } }
@media (min-width: 1024px) { .ge-main .gt-hero-img { height: 320px; } }
.gt-hero .ge-hero-cap { padding-bottom: 0; }

/* ---------- jump bar ---------- */
.gt-jump {
  position: sticky; top: var(--gt-sticky-top); z-index: 40;
  margin-top: 1.25rem; background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--ge-line); border-bottom: 1px solid var(--ge-line);
}
.gt-jump-nav { display: flex; gap: .4rem; padding-top: .45rem; padding-bottom: .45rem; overflow-x: auto; scrollbar-width: none; }
.gt-jump-nav::-webkit-scrollbar { display: none; }
.gt-jump-nav a {
  display: inline-flex; flex: none; align-items: center; min-height: 44px; padding: 0 .85rem;
  border: 1px solid transparent; border-radius: 8px;
  font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--ge-ink);
}
.gt-jump-nav a[aria-current="true"] { background: var(--gt-tint); border-color: var(--gt-tint-line); font-weight: 600; }
.gt-jl-short { display: none; }
@media (max-width: 700px) {
  /* Short labels on a phone; the long one stays for screen readers. */
  .gt-jl-short { display: inline; }
  .gt-jl-long { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .gt-jump-nav { gap: .3rem; }
  .gt-jump-nav a { padding: 0 .75rem; }
}

/* ---------- sections ---------- */
.gt-sec { padding-top: 2.25rem; padding-bottom: .75rem; }
.gt-sec:not(#things-to-do)::before { content: ""; display: block; margin-bottom: 2.25rem; border-top: 1px solid var(--ge-line); }
.ge-main .gt-h2 { margin-bottom: 1.1rem; font-family: var(--ge-serif); font-weight: 400; font-size: 29px; line-height: 1.15; letter-spacing: -.02em; }
@media (min-width: 768px) {
  .gt-sec { padding-top: 3rem; padding-bottom: 1.25rem; }
  .gt-sec:not(#things-to-do)::before { margin-bottom: 3rem; }
  .ge-main .gt-h2 { font-size: 38px; margin-bottom: 1.4rem; }
}

/* ---------- tags ---------- */
.gt-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .65rem 0 0; padding: 0; list-style: none; }
.gt-tags li { padding: .2rem .5rem; border-radius: 6px; background: var(--gt-tint); font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--gt-slate); }

.ge-main .gt-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin-top: .2rem; }
/* guide-editorial.css's article reset (.ge-main a { color: inherit }) outranks
   .text-link, which left every Directions and Website link in the body ink;
   in the template they are the guide's accent, so they read as links. */
.ge-main .gt-links a, .ge-main .gt-more-links a { color: var(--ge-accent); }

/* ---------- the box every item sits in ---------- */
.gt-item, .gt-eat-card, .gt-club, .gt-grownups li,
.lfh-town-events.gt-week .te-row, .gt-story > a, .gt-faq .disclosure {
  border: 1.5px solid var(--gt-box-line); border-radius: 10px; background: #fff;
}
.ge-main .gt-h3 { margin: 2rem 0 .8rem; font-family: var(--ge-sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ge-accent); }
.ge-main .gt-h2 + .gt-h3 { margin-top: 0; }
.ge-main .gt-more-links { margin-top: .6rem; }

/* ---------- things to do ---------- */
.gt-todo { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.gt-item { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1rem 1rem .5rem; }
.gt-item--text { grid-template-columns: minmax(0, 1fr); }
.ge-main .gt-item-img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 6px; background: var(--ge-sand); }
.gt-item h3 { font-family: var(--ge-serif); font-weight: 400; font-size: 21px; line-height: 1.2; letter-spacing: -.01em; }
.gt-item-copy > p:not(.gt-links) { margin-top: .3rem; font-size: 15px; line-height: 1.6; color: var(--ge-muted); }

/* A phone shows the first three and a "Show N more" link. It is a link to the
   list itself, so :target opens it without JavaScript; the script opens it in
   place instead. */
.gt-showmore { display: none; }
@media (max-width: 700px) {
  .gt-todo:not(:target):not(.is-open) > .gt-item:nth-child(n+4) { display: none; }
  .gt-showmore {
    display: inline-flex; align-items: center; min-height: 44px; margin-top: .5rem;
    font-size: 15px; font-weight: 600; color: var(--ge-accent);
  }
  .gt-todo:target ~ .gt-showmore, .gt-todo.is-open ~ .gt-showmore { display: none; }
}
@media (min-width: 768px) {
  .gt-todo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .gt-item { grid-template-columns: 112px minmax(0, 1fr); gap: 1.1rem; padding: 1.15rem 1.15rem .6rem; }
  .gt-item--text { grid-template-columns: minmax(0, 1fr); }
  .gt-item h3 { font-size: 22px; }
}

/* ---------- where to eat ---------- */
.gt-eat { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.gt-eat-card { padding: 1rem 1.1rem .5rem; }
.gt-eat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.gt-eat-card h3 { font-family: var(--ge-serif); font-weight: 400; font-size: 21px; line-height: 1.2; }
.gt-price { flex: none; padding: .1rem .45rem; border: 1px solid var(--gt-box-line); border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--ge-accent); }
.ge-main .gt-eat-town { margin-top: .2rem; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ge-muted); }
.gt-eat-card > p:not(.gt-eat-town):not(.gt-links) { margin-top: .5rem; font-size: 15px; line-height: 1.6; color: var(--ge-muted); }
@media (min-width: 700px) { .gt-eat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }

/* ---------- this week (the shared town-events block, placed and restyled) ---------- */
/* town-events.css loads after this sheet, so these carry its block class too. */
.lfh-town-events.gt-week { padding-top: 2.25rem; padding-bottom: .75rem; }
.lfh-town-events.gt-week .te-inner { padding-top: 2.25rem; }
.lfh-town-events.gt-week .te-title { font-weight: 400; font-size: 29px; letter-spacing: -.02em; margin-bottom: 1.1rem; }
.lfh-town-events.gt-week .te-list { gap: .75rem; border-top: 0; }
.lfh-town-events.gt-week .te-row { padding: .85rem 1rem; }
/* Two on a phone; the third is a wide-screen extra. */
@media (max-width: 767px) { .lfh-town-events.gt-week .te-row:nth-child(n+3) { display: none; } }
@media (min-width: 768px) {
  .lfh-town-events.gt-week { padding-top: 3rem; padding-bottom: 1.25rem; }
  .lfh-town-events.gt-week .te-inner { padding-top: 3rem; }
  .lfh-town-events.gt-week .te-title { font-size: 38px; margin-bottom: 1.4rem; }
  .lfh-town-events.gt-week .te-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .lfh-town-events.gt-week .te-row { grid-template-columns: minmax(0, 1fr); gap: .4rem; padding: 1rem 1.1rem; }
  .lfh-town-events.gt-week .te-when time, .lfh-town-events.gt-week .te-time { display: inline; }
  .lfh-town-events.gt-week .te-time::before { content: " · "; }
}

/* ---------- clubs: a box per kids' club, a quick grid of grown-ups' clubs ---------- */
.gt-clubs, .gt-grownups { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.gt-club { padding: 1rem 1.1rem .5rem; }
.gt-club h4 { margin: 0; font-family: var(--ge-serif); font-weight: 400; font-size: 20px; line-height: 1.25; }
.gt-club > p:not(.gt-links) { margin-top: .35rem; font-size: 15px; line-height: 1.55; color: var(--ge-muted); }
.gt-grownups { gap: .5rem; }
/* The link fills its box, so the whole 48px row is the tap target, not the line of text. */
.gt-grownups li { display: flex; min-height: 48px; font-size: 15px; font-weight: 500; line-height: 1.35; }
.gt-grownups li > a, .gt-grownups li > span { display: flex; align-items: center; width: 100%; padding: .55rem .9rem; }
.ge-main .gt-grownups a { color: var(--ge-accent); text-decoration: underline; text-decoration-color: var(--gt-box-line); text-underline-offset: 3px; }
@media (min-width: 640px) { .gt-grownups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .gt-clubs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1024px) { .gt-clubs, .gt-grownups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Fee help: the one box that is filled, not just edged, because it decides
   whether a family can join at all. The tint is the guide's own sand, the
   edge the accent at full strength; every piece of text is ink or accent. */
.gt-help { margin: 0 0 1.75rem; padding: 1.1rem 1.15rem .6rem; border: 2px solid var(--ge-accent); border-radius: 12px; background: var(--ge-sand); }
.ge-main .gt-help-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ge-accent); }
.ge-main .gt-help-title { margin: .3rem 0 .45rem; font-family: var(--ge-serif); font-weight: 400; font-size: 26px; line-height: 1.15; }
.gt-help > p:not([class]) { font-size: 16px; line-height: 1.6; color: var(--ge-ink); max-width: 46rem; }
.ge-main .gt-help-contact { margin-top: .5rem; font-size: 15px; line-height: 1.55; color: var(--ge-muted); }
.ge-main .gt-help-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .85rem; }
.ge-main .gt-help-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border-radius: 8px; background: var(--ge-accent); color: #fff; font-size: 15px; font-weight: 600; }
.ge-main .gt-help-btn + .gt-help-btn { background: #fff; color: var(--ge-accent); border: 1.5px solid var(--ge-accent); }
@media (min-width: 768px) { .gt-help { padding: 1.4rem 1.6rem .8rem; } .ge-main .gt-help-title { font-size: 30px; } }

/* ---------- stories ---------- */
.gt-stories { display: flex; gap: .9rem; margin: 0 -1.5rem; padding: 0 1.5rem .25rem; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 1.5rem; scrollbar-width: none; }
.gt-stories::-webkit-scrollbar { display: none; }
.gt-story { flex: 0 0 68%; scroll-snap-align: start; }
.gt-story > a { display: block; height: 100%; min-height: 44px; overflow: hidden; padding-bottom: .9rem; }
.ge-main .gt-story-img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; background: var(--ge-sand); }
.gt-story h3 { margin: .75rem .9rem 0; font-family: var(--ge-serif); font-weight: 400; font-size: 19px; line-height: 1.25; }
.gt-story-time { display: block; margin: .35rem .9rem 0; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ge-muted); }
@media (min-width: 640px) {
  .gt-stories { margin: 0 -2.5rem; padding: 0 2.5rem .25rem; scroll-padding-left: 2.5rem; }
  .gt-story { flex-basis: 40%; }
}
@media (min-width: 900px) {
  .gt-stories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; overflow: visible; }
  .gt-story h3 { font-size: 21px; }
  /* Five stories would leave one alone on a second row, so the first becomes
     the feature: two columns by two rows, with the other four beside it. */
  .gt-stories:has(> .gt-story:nth-child(5):last-child) > .gt-story:first-child { grid-column: span 2; grid-row: span 2; }
  .gt-stories:has(> .gt-story:nth-child(5):last-child) > .gt-story:first-child > a { display: flex; flex-direction: column; }
  .ge-main .gt-stories:has(> .gt-story:nth-child(5):last-child) > .gt-story:first-child .gt-story-img { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
  .gt-stories:has(> .gt-story:nth-child(5):last-child) > .gt-story:first-child h3 { font-size: 28px; }
  /* Three stories (Plympton-Wyoming) fill the row as three wider cards rather
     than leaving a fourth column empty. */
  .gt-stories:has(> .gt-story:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- before you go ---------- */
.gt-faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.gt-faq .disclosure { padding: 0 1rem; }
.gt-faq .disclosure summary { font-size: 15px; }
.gt-faq .disclosure .ge-answer { font-size: 15px; padding-bottom: 1.1rem; }
@media (min-width: 900px) {
  .gt-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
}
.ge-body--guide .ge-sources { padding-top: 2rem; }