/* =========================================================
   The guide pages: laundry, PGs and flats, and tiffin near CU
   ---------------------------------------------------------
   Plain pages that search engines can read, one per list, written by
   tools/make_guides.py from the live lists. They load styles.css first and
   use its colours, buttons, cards and footer; this is only what's theirs.
   There's no JavaScript on them, so nothing here may need any.
   ========================================================= */
/* One width for the header, the page and the footer, so their edges line up */
.guide-page{ --wrap:1000px; min-height:100vh; display:flex; flex-direction:column; }
.guide-page main{ flex:1 0 auto; }
/* styles.css hides the header's button on phones (it's "List your property"
   there); here it's the way into the site, so it stays. */
.guide-page .header-actions > .btn{ display:inline-flex; }

/* the three guides, side by side, like the home page's tabs */
.guide-tabs{ display:flex; gap:8px; padding-top:4px; padding-bottom:6px; overflow-x:auto; scrollbar-width:none; }
.guide-tabs::-webkit-scrollbar{ display:none; }
.guide-tabs a{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  padding:8px 14px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.72); border:1px solid var(--line);
  font-size:13.5px; font-weight:560; color:var(--ink-2);
  transition:background .16s ease, border-color .16s ease;
}
.guide-tabs a:hover{ background:#fff; border-color:#d3cec0; }
.guide-tabs a[aria-current="page"]{ background:var(--green); border-color:var(--green); color:#fff; }
.guide-tabs svg{ flex:none; width:16px; height:16px; }

.guide{ padding-top:22px; padding-bottom:72px; }
.guide-crumbs{ display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--muted); }
.guide-crumbs a{ color:var(--green); font-weight:560; }
.guide-head{ margin-top:14px; }
.guide-head h1{ font-size:clamp(28px,4.6vw,44px); letter-spacing:-.036em; line-height:1.07; max-width:22ch; }
.guide-lede{ margin-top:14px; font-size:16.5px; line-height:1.6; color:var(--ink-2); max-width:64ch; }
.guide-updated{ margin-top:10px; font-size:13px; color:var(--muted); }

.guide-stats{
  list-style:none; margin:26px 0 0; padding:0;
  display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(min(170px, 100%), 1fr));
}
.guide-stats li{
  padding:16px 18px; border-radius:var(--r-lg);
  background:var(--card); border:1px solid var(--line-2); box-shadow:var(--sh-1);
}
.guide-stats b{ display:block; font-size:27px; font-weight:640; letter-spacing:-.03em; line-height:1.1; color:var(--green); }
.guide-stats span{ display:block; margin-top:5px; font-size:13px; line-height:1.4; color:var(--muted); }
.guide-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }

.guide-section{ margin-top:52px; }
.guide-section > h2{ font-size:clamp(22px,2.9vw,29px); letter-spacing:-.031em; }
.guide-sub{ margin-top:9px; max-width:66ch; font-size:15px; line-height:1.6; color:var(--muted); }
.guide-note{ margin-top:16px; max-width:66ch; font-size:13.5px; line-height:1.55; color:var(--muted); }
.guide a.inline{ color:var(--green); font-weight:560; text-decoration:underline; text-underline-offset:2px; }
.guide .guide-cards{ margin-top:20px; }

/* a place to stay, one row each: what and where on the left, the rent on the right */
.guide-list{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:12px; }
.gp{
  position:relative; display:flex; justify-content:space-between; gap:18px;
  padding:16px 18px; border-radius:var(--r-lg);
  background:var(--card); border:1px solid var(--line-2); box-shadow:var(--sh-1);
  transition:border-color .18s ease, box-shadow .2s ease, transform .2s ease;
}
.gp:hover{ border-color:var(--line); box-shadow:var(--sh-2); transform:translateY(-2px); }
.gp:focus-within{ outline:2px solid var(--green); outline-offset:2px; }
.gp-body{ min-width:0; display:grid; gap:6px; align-content:start; }
.gp-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:12.5px; color:var(--muted); }
.gp-type{
  padding:2px 8px; border-radius:6px; background:var(--green-50);
  color:var(--green-700); font-weight:640; font-size:11.5px; letter-spacing:.01em;
}
.gp-title{ font-size:16.5px; font-weight:600; letter-spacing:-.02em; line-height:1.3; overflow-wrap:anywhere; }
.gp-title a:focus{ outline:none; }
.gp-where{ display:flex; flex-wrap:wrap; gap:4px 16px; font-size:13.5px; color:var(--ink-2); }
.gp-where span{ display:inline-flex; align-items:center; gap:6px; min-width:0; overflow-wrap:anywhere; }
.gp-where svg{ flex:none; color:var(--muted); }
.gp-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.gp-badge{
  padding:3px 9px; border-radius:6px; font-size:12px; font-weight:560;
  background:var(--cream-2); border:1px solid var(--line-2); color:var(--ink-2);
}
.gp-badge.is-green{ background:var(--green-50); border-color:var(--green-100); color:var(--green-700); }
.gp-side{ flex:none; display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:12px; text-align:right; }
.gp-rent b{ display:block; font-size:20px; font-weight:650; letter-spacing:-.025em; line-height:1.15; }
.gp-rent span{ font-size:12.5px; color:var(--muted); }
.gp-go{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-size:13px; font-weight:580; color:var(--green); }

.guide-areas{
  list-style:none; margin:18px 0 0; padding:0;
  display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(min(230px, 100%), 1fr));
}
.guide-areas li{ padding:14px 16px; border-radius:var(--r-md); background:var(--green-50); border:1px solid var(--green-100); }
.guide-areas b{ display:block; font-size:15px; font-weight:620; letter-spacing:-.015em; overflow-wrap:anywhere; }
.guide-areas span{ display:block; margin-top:3px; font-size:13px; line-height:1.45; color:var(--ink-2); }

.guide-tips{ margin:16px 0 0; padding-left:20px; max-width:68ch; color:var(--ink-2); line-height:1.65; }
.guide-tips li{ margin-bottom:8px; }

.faq{ margin-top:10px; max-width:74ch; }
.faq-item{ padding:16px 0; border-bottom:1px solid var(--line-2); }
.faq-item:last-child{ border-bottom:0; }
.faq-item h3{ font-size:16.5px; font-weight:600; letter-spacing:-.02em; line-height:1.35; }
.faq-item p{ margin-top:7px; color:var(--ink-2); line-height:1.65; }

.guide-owners .btn-white{ flex:none; }
.guide-more ul{
  list-style:none; margin:16px 0 0; padding:0;
  display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
.guide-more a{
  display:block; height:100%; padding:16px 18px; border-radius:var(--r-lg);
  background:var(--card); border:1px solid var(--line-2); box-shadow:var(--sh-1);
  transition:border-color .18s ease, box-shadow .2s ease;
}
.guide-more a:hover{ border-color:var(--line); box-shadow:var(--sh-2); }
.guide-more b{ display:block; font-size:15.5px; font-weight:620; letter-spacing:-.02em; color:var(--green); }
.guide-more span{ display:block; margin-top:4px; font-size:13.5px; line-height:1.5; color:var(--ink-2); }

@media (max-width:640px){
  .gp{ flex-direction:column; gap:12px; }
  .gp-side{ flex-direction:row; align-items:center; text-align:left; }
  .guide-actions .btn{ flex:1 1 auto; }
}
@media (max-width:520px){
  .guide-stats{ grid-template-columns:1fr 1fr; gap:10px; }
  .guide-stats li{ padding:14px; }
  .guide-stats b{ font-size:23px; }
  .guide-section{ margin-top:42px; }
}
/* On a phone the list starts on the first screen: the words above it are
   smaller, the numbers are one row, and "List your laundry, free" waits for
   the owners' box further down, which says the same. Everything stays on
   the page — only smaller — so search engines read what they always did. */
@media (max-width:640px){
  .guide{ padding-top:14px; }
  .guide-head{ margin-top:10px; }
  .guide-head h1{ font-size:clamp(23px, 6.6vw, 28px); line-height:1.12; }
  .guide-lede{ margin-top:8px; font-size:14.5px; line-height:1.55; }
  .guide-updated{ margin-top:6px; font-size:12px; }
  .guide-stats{ grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; margin-top:14px; }
  .guide-stats li{ padding:9px 6px; text-align:center; border-radius:var(--r-md); }
  .guide-stats b{ font-size:18px; }
  .guide-stats span{ margin-top:2px; font-size:11px; line-height:1.3; }
  .guide-actions{ margin-top:14px; }
  .guide-actions .btn-ghost{ display:none; }
  .guide-actions .btn-lg{ padding:12px 18px; font-size:14px; }
  .guide-actions + .guide-section{ margin-top:28px; }
  .guide-section > h2{ font-size:21px; }
  .guide-sub{ margin-top:6px; font-size:14px; line-height:1.55; }
}
@media (prefers-reduced-motion:reduce){
  .gp, .gp:hover{ transition:none; transform:none; }
}