/* ============================================================
   Lambton Family Hub — Local Guides landing page

   One page only: /local-guides. The card grid it draws is the
   way into the six town guides, so the photography carries the
   page and the palette stays out of its way.

   Photos are square-ish or landscape and cropped with
   object-fit, so a replacement image of any shape drops in
   without touching this file.
   ============================================================ */

/* Type colours are the Bolt mock's, kept as their own tokens rather than
   folded into the site palette: this page is the only thing that wears them,
   and the header and footer above and below it stay on --lfh-*. Amber 700 is
   the accent (5.0:1 on the card surface, 4.6:1 on the page), stone the greys.
   Nothing lighter than stone 500 is used for text -- stone 400 falls under
   4.5:1 on this cream background. */
:root {
  --gl-amber-50:  #f2f5f3;
  --gl-amber-100: #e6eef3;
  --gl-amber-600: #356382;
  --gl-amber-700: #356382;
  --gl-amber-800: #356382;
  --gl-stone-500: #55635c;
  --gl-stone-600: #57534E;
  --gl-stone-700: #44403C;
  --gl-stone-800: #292524;
}

body {
  margin: 0;
  background: var(--lfh-page);
  color: var(--gl-stone-800);
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.gl-wrap { max-width: var(--page-w); margin: 0 auto; padding: 0 var(--page-pad); }

/* ── Hero ──────────────────────────────────────────────────────────────────
   A photograph behind the title, darkened enough that white type clears
   WCAG AA over the brightest part of any picture that gets dropped in. The
   height is capped in rem as well as vh so a short landscape phone does not
   turn it into a letterbox. */
.gl-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(60vh, 30rem);
  padding: 4.5rem 0;
  overflow: hidden;
  text-align: center;
}
.gl-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gl-hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(25, 38, 34, .74), rgba(25, 38, 34, .68) 45%, rgba(25, 38, 34, .82));
}
.gl-hero-inner { position: relative; z-index: 1; max-width: 46rem; margin: 0 auto; padding: 0 var(--page-pad); }
.gl-pin {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 1rem;
  padding: .4rem .9rem;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 8px;
  background: rgba(22, 41, 35, .42);
  color: #FFFFFF;
  font-size: .8rem;
  font-weight: 600;
}
.gl-pin svg { width: 15px; height: 15px; color: var(--gl-amber-100); }
.gl-hero h1 {
  margin: 0;
  color: #FFFFFF;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.08;
  text-shadow: 0 2px 18px rgba(41, 32, 27, .4);
}
.gl-hero-lede {
  max-width: 38ch;
  margin: 1.1rem auto 0;
  color: #FFFFFF;
  font-size: 1.05rem;
  line-height: 1.6;
  text-shadow: 0 1px 12px rgba(41, 32, 27, .45);
}
/* ── Introduction ──────────────────────────────────────────────────────── */
.gl-intro { max-width: 46rem; margin: 0 auto; padding: 3.4rem var(--page-pad) 2.6rem; text-align: center; }
.gl-intro h2 {
  margin: 0;
  color: var(--gl-stone-800);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.2;
}
.gl-intro p { margin: 1.1rem 0 0; color: var(--gl-stone-600); font-size: 1.05rem; line-height: 1.65; }

/* ── The card grid ─────────────────────────────────────────────────────────
   Each card is one anchor, so the whole tile is the target and there is one
   tab stop per town. */
.gl-grid-head { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.4rem; }
.gl-grid-head h2 {
  margin: 0;
  color: var(--gl-stone-700);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.gl-grid-head .gl-rule { flex: 1; height: 1px; background: var(--lfh-border); }
/* Every guide gets the same card: no feature tile, so no town outranks
   another. There are eight guides, so the grid steps 1 -> 2 -> 4 across and
   every row is full; three across would leave a two-card last row. */
.gl-grid {
  display: grid;
  gap: 1.4rem;
  margin: 0 0 3.4rem;
  padding: 0;
  list-style: none;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .gl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .gl-grid { grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } }
.gl-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--lfh-border);
  border-radius: 16px;
  background: var(--lfh-surface);
  color: var(--gl-stone-800);
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(41, 37, 36, .07);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.gl-card:hover {
  border-color: rgba(180, 83, 9, .45);
  box-shadow: 0 12px 28px rgba(41, 37, 36, .16);
  transform: translateY(-3px);
}
.gl-card:focus-visible { outline: 3px solid var(--gl-amber-700); outline-offset: 3px; }
.gl-shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--lfh-soft); }
.gl-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gl-card:hover .gl-shot img { transform: scale(1.06); }
.gl-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(58, 46, 39, .6), rgba(58, 46, 39, .05) 55%, transparent);
}
.gl-card-body { display: flex; flex: 1; flex-direction: column; padding: 1.1rem 1.2rem 1.2rem; }
.gl-card h3 {
  margin: 0;
  color: var(--gl-stone-800);
  transition: color .15s ease;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.gl-card:hover h3 { color: var(--gl-amber-800); }
.gl-tagline { margin: .4rem 0 0; color: var(--gl-stone-600); font-size: .95rem; line-height: 1.5; }
.gl-covers { margin: .6rem 0 0; color: var(--gl-stone-500); font-size: .82rem; line-height: 1.45; }
.gl-explore {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: auto 0 0;
  padding-top: .9rem;
  color: var(--gl-amber-700);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .92rem;
  font-weight: 700;
}
.gl-explore svg { width: 16px; height: 16px; transition: transform .2s ease; }
.gl-card:hover .gl-explore svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .gl-card, .gl-card h3, .gl-shot img, .gl-explore svg { transition: none; }
  .gl-card:hover { transform: none; }
  .gl-card:hover .gl-shot img { transform: none; }
  .gl-card:hover .gl-explore svg { transform: none; }
}

@media (max-width: 700px) {
  .gl-hero { min-height: min(52vh, 22rem); padding: 3.2rem 0; }
  .gl-intro { padding-top: 2.4rem; padding-bottom: 2rem; }
  .gl-grid { gap: 1.1rem; }
}