/* ============================================================
   LOCAL GUIDES — things-to-do.html and the three guides under it

   One stylesheet for four pages rather than one each, because
   they are the same layout with different lists in it. That is a
   deliberate exception to the one-stylesheet-per-page rule in the
   README; if a fifth guide needs a different shape, give it its
   own file rather than bending this one.
============================================================ */

/* ============================================================
   PAGE HERO — same treatment as the rest of the site
============================================================ */
.page-hero {
  background: var(--navy);
  background-image:
    radial-gradient(ellipse at 80% 50%, rgba(74,184,232,.2) 0%, transparent 60%),
    radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,.3) 1px, transparent 1px);
  background-size: 100% 100%, 150px 150px, 220px 220px;
  background-position: center, 20px 30px, 80px 70px;
  padding: 60px 20px 56px; text-align: center; color: #FFF;
}
.page-hero-eyebrow {
  display: inline-block; font-size: .76rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 12px;
}
.page-hero-title {
  font-family: var(--font-display); font-size: clamp(1.9rem, 5.4vw, 2.9rem);
  line-height: 1.15; margin-bottom: 16px;
}
.page-hero-sub {
  font-size: .97rem; font-weight: 600; color: rgba(255,255,255,.72);
  max-width: 620px; margin: 0 auto 28px; line-height: 1.65;
}
.page-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ============================================================
   EDITORIAL NOTE

   Sits directly under the hero on every guide. It is the reason
   to trust the list — that we do not republish other people's
   hours, and that our own place is in here on the same terms as
   everything else. Do not quietly drop it to save space.
============================================================ */
.g-note {
  background: var(--bg-alt); border-bottom: 2px solid var(--border);
}
.g-note-inner {
  max-width: 780px; margin: 0 auto; padding: 26px 20px;
  display: flex; gap: 16px; align-items: flex-start;
}
.g-note-icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1.3; }
.g-note p {
  font-size: .89rem; font-weight: 600; color: var(--text-2);
  line-height: 1.7; margin: 0 0 10px;
}
.g-note p:last-child { margin-bottom: 0; }
.g-note strong { color: var(--text-1); font-weight: 800; }

/* ============================================================
   QUICK PICKS — the answer before the list
============================================================ */
.g-picks { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 620px) { .g-picks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .g-picks { grid-template-columns: repeat(4, 1fr); } }

.g-pick {
  background: var(--card-bg); border: 2px solid var(--border);
  border-top: 5px solid var(--sky); border-radius: var(--radius-lg);
  padding: 22px 20px; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.g-pick:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.g-pick-when {
  display: block; font-size: .72rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--eyebrow); margin-bottom: 8px;
}
.g-pick-name {
  font-family: var(--font-display); font-size: 1.02rem;
  color: var(--heading); margin-bottom: 7px; line-height: 1.25;
}
.g-pick-why { font-size: .84rem; font-weight: 600; color: var(--text-2); line-height: 1.6; }

/* ============================================================
   THE LIST

   One row per place: name and town, what it is, who it suits,
   and a link out. No hours and no prices for anyone but us —
   see the note component above for why.
============================================================ */
.g-group { margin-bottom: 44px; }
.g-group:last-child { margin-bottom: 0; }
.g-group-title {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-size: 1.25rem;
  color: var(--heading); margin-bottom: 8px;
}
.g-group-icon { font-size: 1.5rem; }
.g-group-intro {
  font-size: .9rem; font-weight: 600; color: var(--text-2);
  line-height: 1.7; margin-bottom: 20px; max-width: 720px;
}

.g-list { display: flex; flex-direction: column; gap: 14px; }
.g-item {
  display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: start;
  background: var(--card-bg); border: 2px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  transition: transform var(--transition), box-shadow var(--transition);
}
@media (min-width: 620px) {
  .g-item { grid-template-columns: 116px 1fr; gap: 22px; padding: 22px 24px; }
}

/* ============================================================
   ENTRY THUMBNAIL

   Two kinds, and the difference is deliberate.

   A PHOTOGRAPH is only ever used for a place we own and have
   photographed ourselves. We do not put a stock photograph beside
   somebody else's venue: a picture next to a name reads as a
   picture OF that name, and a page whose whole promise is that we
   only publish what we can verify cannot then illustrate itself
   with a stranger's forest captioned Duke Farms.

   Everything else gets a TILE — a flat brand-coloured square with
   a symbol on it. It is obviously a symbol rather than a
   photograph, it costs no HTTP request and no licence, and it
   cannot misrepresent anywhere.

   To swap a tile for a real photo, get one from the venue itself
   (worth asking — it starts the conversation that also gets you a
   link back) and use the img form.
============================================================ */
.g-thumb {
  width: 100%; aspect-ratio: 1 / 1; display: block;
  border-radius: var(--radius-md); border: 2px solid var(--border);
  object-fit: cover; background: var(--bg-alt);
}
.g-thumb--tile {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; line-height: 1; border-color: transparent;
  background: linear-gradient(150deg, var(--tile-a), var(--tile-b));
}
@media (min-width: 620px) { .g-thumb--tile { font-size: 2.4rem; } }
.g-thumb--tile[data-tone="green"]  { --tile-a: #E2F4E7; --tile-b: #A9DDBD; }
.g-thumb--tile[data-tone="blue"]   { --tile-a: #DEEFFA; --tile-b: #A9D8F0; }
.g-thumb--tile[data-tone="orange"] { --tile-a: #FDEAD6; --tile-b: #F8C98E; }
.g-thumb--tile[data-tone="purple"] { --tile-a: #EBE4FA; --tile-b: #C7B7EE; }
.g-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* min-width:0 stops a long unbroken string in the body from forcing
   the grid wider than its column. */
.g-body { min-width: 0; }

.g-item-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin-bottom: 9px;
}
.g-name { font-family: var(--font-display); font-size: 1.08rem; color: var(--heading); }
.g-town {
  font-size: .74rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted);
  padding: 3px 10px; background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: var(--radius-full);
}
.g-what {
  font-size: .89rem; font-weight: 600; color: var(--text-2);
  line-height: 1.7; margin-bottom: 10px;
}
.g-who {
  font-size: .85rem; font-weight: 700; color: var(--text-1);
  line-height: 1.6; margin-bottom: 12px;
}
.g-who span {
  font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--eyebrow); margin-right: 8px;
}
.g-link { font-size: .85rem; font-weight: 800; color: var(--sky); transition: opacity .2s; }
.g-link:hover { opacity: .75; }

/* Our own entry. Marked so nobody has to wonder whether the list
   is impartial — it is a stronger position than pretending. */
.g-item.is-ours { border-color: var(--yellow); border-left: 6px solid var(--yellow); }
.g-ours-flag {
  display: inline-block; font-size: .68rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  background: var(--yellow); color: var(--navy-dark);
  padding: 4px 10px; border-radius: var(--radius-full);
}

/* ============================================================
   CROSS-LINKS BETWEEN GUIDES
============================================================ */
.g-more { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) { .g-more { grid-template-columns: repeat(3, 1fr); } }
.g-more-card {
  display: block; background: var(--card-bg);
  border: 2px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px 22px; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.g-more-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.g-more-icon  { font-size: 1.8rem; margin-bottom: 10px; }
.g-more-title { font-family: var(--font-display); font-size: 1.02rem; color: var(--heading); margin-bottom: 7px; }
.g-more-text  { font-size: .85rem; font-weight: 600; color: var(--text-2); line-height: 1.6; }

/* ============================================================
   FAQ — plain accordion, matched by FAQPage markup in the head
============================================================ */
.g-faq { max-width: 780px; margin: 0 auto; }
.g-faq-item {
  background: var(--card-bg); border: 2px solid var(--border);
  border-radius: var(--radius-md); margin-bottom: 12px; overflow: hidden;
}
.g-faq-item summary {
  list-style: none; cursor: pointer;
  padding: 18px 22px; font-size: .95rem; font-weight: 800;
  color: var(--heading); display: flex; justify-content: space-between;
  align-items: center; gap: 16px;
}
.g-faq-item summary::-webkit-details-marker { display: none; }
.g-faq-item summary:hover { background: var(--bg-alt); }
.g-faq-chevron { font-size: .7rem; color: var(--text-muted); transition: transform var(--transition); flex-shrink: 0; }
.g-faq-item[open] .g-faq-chevron { transform: rotate(180deg); }
.g-faq-answer { padding: 0 22px 20px; }
.g-faq-answer p {
  font-size: .88rem; font-weight: 600; color: var(--text-2); line-height: 1.75;
}
.g-faq-answer a { color: var(--sky); font-weight: 800; }

/* ============================================================
   CLOSING BAND
============================================================ */
.g-cta { background: var(--navy); text-align: center; }
.g-cta .container { padding-top: 56px; padding-bottom: 56px; }
.g-cta-title {
  font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.1rem);
  color: #FFF; margin-bottom: 14px; line-height: 1.2;
}
.g-cta-text {
  font-size: .94rem; font-weight: 600; color: rgba(255,255,255,.7);
  max-width: 560px; margin: 0 auto 26px; line-height: 1.7;
}
.g-cta-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }