/* MobTreks · CITY-GUIDE components — hero, facts, cards, splits, chips, video facade, footer.
   Linked by city guide pages only (not the hub). Foundation + tokens come from mbt-base.css. */

/* ---- hero ---- */
.mbt-hero{position:relative;border-radius:14px;overflow:hidden;margin:18px 0 26px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);}
.mbt-hero img{width:100%;height:clamp(220px,40vw,380px);object-fit:cover;}
.mbt-hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(39,78,19,.10) 0%, rgba(39,78,19,.18) 45%, rgba(39,78,19,.82) 100%);}
.mbt-hero-text{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;color:var(--text-light);}
.mbt-kicker{font-size:clamp(13px, calc(7.8px + 0.65vw), 13px);font-weight:700;letter-spacing:2px;text-transform:uppercase;
  opacity:.92;margin:0 0 6px;}
.mbt-hero h1{margin:0;font-weight:700;line-height:1.05;font-size:clamp(30px,7vw,52px);
  text-shadow:0 2px 8px rgba(0,0,0,.35);}
.mbt-hero .mbt-sub{margin:8px 0 0;font-size:clamp(15px,3.4vw,19px);font-weight:600;
  text-shadow:0 1px 4px rgba(0,0,0,.4);}

/* ---- quick-fact strip ---- */
.mbt-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;
  margin:0 0 30px;}
.mbt-fact{background:var(--brand-dark-green);color:var(--text-light);border-radius:10px;
  padding:12px 10px;text-align:center;}
.mbt-fact b{display:block;font-size:clamp(17px, calc(12px + 1vw), 20px);font-weight:700;line-height:1.15;}
.mbt-fact span{display:block;font-size:12px;font-weight:600;letter-spacing:.5px;
  text-transform:uppercase;opacity:.85;margin-top:3px;}

/* ---- section + cards ---- */
.mbt-h2{display:flex;align-items:center;gap:10px;margin:34px 0 14px;color:var(--brand-dark-green);
  font-size:clamp(13px, calc(9px + 0.75vw), 15px);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;}
.mbt-h2::after{content:"";flex:1;height:2px;background:var(--checker-dark);border-radius:2px;}
.mbt-card{background:var(--card-bg);border-left:5px solid var(--accent);border-radius:8px;
  padding:18px 20px;margin-bottom:14px;box-shadow:0 1px 3px rgba(0,0,0,.10);}
.mbt-card:nth-of-type(even){background:var(--card-bg-alt);}

.mbt-card h3{margin:0 0 6px;font-size:clamp(16px, calc(11.4px + 0.95vw), 19px);font-weight:700;color:var(--brand-dark-green);}

/* ONE link treatment for every in-content link — heading, body sentence, bold lead-in,
   figcaption, or note. Always-on (not hover-gated), because mobile has no hover and is
   most of the audience. .mbt-chip is the deliberate exception (a pill/tag UI element, not
   running prose). The selector spans cards, splits, figcaptions AND notes so that every
   city's link locations are reached (Dallas has none in figcaption/note; Texarkana does). */
.mbt-card a:not(.mbt-chip), .mbt-split a:not(.mbt-chip), .mbt-figure figcaption a:not(.mbt-chip), .mbt-note a:not(.mbt-chip){color:var(--brand-green);font-weight:600;text-decoration:none;border-bottom:1px solid var(--brand-light-green);}
/* hover previews the exact "clicked" look; .mbt-clicked (set by the click-tracker in
   mbt-guide.js, via localStorage) makes it permanent. Can't use :visited for this —
   content/border-style are blocked from :visited for anti-history-sniffing reasons, so the
   dashed underline + checkmark below would silently never render. */
.mbt-card a:not(.mbt-chip):hover, .mbt-split a:not(.mbt-chip):hover, .mbt-figure figcaption a:not(.mbt-chip):hover, .mbt-note a:not(.mbt-chip):hover,
.mbt-card a.mbt-clicked:not(.mbt-chip), .mbt-split a.mbt-clicked:not(.mbt-chip), .mbt-figure figcaption a.mbt-clicked:not(.mbt-chip), .mbt-note a.mbt-clicked:not(.mbt-chip){
  color:var(--visited-teal);border-bottom:none;text-decoration:underline dashed var(--visited-teal);text-underline-offset:3px;}
/* checkmark is click-only, not hover — hover previews color+underline, the check is the
   thing that's actually permanent and earned by clicking */
.mbt-card a.mbt-clicked:not(.mbt-chip)::after, .mbt-split a.mbt-clicked:not(.mbt-chip)::after, .mbt-figure figcaption a.mbt-clicked:not(.mbt-chip)::after, .mbt-note a.mbt-clicked:not(.mbt-chip)::after{
  content:"✓";display:inline-block;text-decoration:none;color:var(--visited-teal);margin-left:3px;font-weight:700;font-size:0.7em;vertical-align:5px;}
/* clamp: 16px on narrow mobile → 17px at desktop width; fluid between */
.mbt-card p{margin:0 0 10px;font-size:clamp(16px,4.2vw,17px);}
.mbt-card p:last-child{margin-bottom:0;}
.mbt-lead{font-size:clamp(17px,4.5vw,18px);}

.mbt-figure{margin:0 0 14px;border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.14);}
.mbt-figure img{width:100%;height:auto;}
.mbt-figure figcaption{background:#fff;color:var(--text-muted);font-size:12.5px;
  padding:7px 12px;border-left:5px solid var(--accent);}
/* portrait/small source images: cap width + center so a low-res scan isn't upscaled blurry */
.mbt-figure--portrait{max-width:280px;margin-left:auto;margin-right:auto;}

/* two-up media + text where it fits */
.mbt-split{display:grid;grid-template-columns:1fr;gap:16px;align-items:start;}
@media(min-width:620px){
  .mbt-split{grid-template-columns:1.1fr 1fr;}
  .mbt-split.flip>figure{order:2;}
}

/* card grid */
.mbt-card-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media(min-width:620px){.mbt-card-grid{grid-template-columns:1fr 1fr;}}

/* pull quote */
.mbt-quote{background:linear-gradient(135deg,var(--brand-green),var(--brand-dark-green));
  color:var(--text-light);border-radius:12px;padding:22px 24px;margin:18px 0 26px;
  font-size:clamp(17px,3.6vw,21px);font-weight:600;line-height:1.4;box-shadow:0 4px 14px rgba(39,78,19,.3);}
.mbt-quote cite{display:block;font-size:clamp(13px, calc(7.8px + 0.65vw), 13px);font-weight:600;opacity:.8;margin-top:10px;font-style:normal;}

/* pills / chips */
.mbt-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
/* static informational tag: dashed border, light bg, default cursor — must NOT look clickable */
.mbt-chip{background:var(--checker-light);border:1px dashed var(--brand-light-green);
  color:var(--brand-dark-green);font-size:13px;font-weight:700;padding:5px 13px;border-radius:6px;cursor:default;}

/* linked variant — chips that ARE clickable (e.g. Famous Natives bios): solid pill, pointer */
.mbt-chip-link{background:var(--brand-green);border-style:solid;border-color:var(--brand-green);
  color:var(--text-light);border-radius:20px;padding:var(--mbt-chip-pad, 6px 14px);
  text-decoration:none;cursor:pointer;}
/* hover previews the clicked look; .mbt-clicked makes it permanent (see inline-link note above) */
.mbt-chip-link:hover, .mbt-chip-link.mbt-clicked{background:var(--checker-light);border-color:var(--visited-teal);color:var(--visited-teal);}
/* checkmark is click-only — same reasoning as the inline-link rule above */
.mbt-chip-link.mbt-clicked::after{content:"✓";margin-left:3px;font-weight:700;font-size:0.8em;vertical-align:5px;}

/* video facade grid — shows the YouTube thumbnail; the player iframe loads ONLY on click
   (nothing video-weighted loads until the visitor opts in) */
.mbt-vidgrid{display:grid;grid-template-columns:1fr;gap:16px;}
@media(min-width:560px){.mbt-vidgrid{grid-template-columns:1fr 1fr;}}
.mbt-vplayer{background:var(--card-bg);border:1px solid var(--checker-dark);border-radius:12px;
  overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.10);}
.mbt-vplay{display:block;position:relative;width:100%;padding:0;border:0;cursor:pointer;
  aspect-ratio:16/9;background:#000;}
.mbt-vplay img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;transition:opacity .15s ease;}
.mbt-vplay:hover img{opacity:1;}
.mbt-vplay-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:44px;border-radius:11px;background:rgba(56,118,29,.92);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  box-shadow:0 3px 10px rgba(0,0,0,.35);transition:transform .15s ease,background .15s ease;}
.mbt-vplay:hover .mbt-vplay-btn{transform:translate(-50%,-50%) scale(1.08);background:#c00;}
.mbt-vframe{display:block;width:100%;aspect-ratio:16/9;border:0;}
.mbt-vmeta{padding:11px 14px;}
.mbt-vmeta b{display:block;font-size:clamp(13px, calc(8.7px + 0.725vw), 14.5px);line-height:1.3;}
.mbt-vmeta small{display:block;color:var(--text-muted);font-size:12.5px;margin-top:3px;}

.mbt-note{background:#fff;border:1px dashed var(--brand-light-green);border-radius:10px;
  padding:12px 16px;font-size:13.5px;color:var(--text-muted);margin-bottom:16px;}

.mbt-foot{margin-top:36px;padding-top:16px;border-top:2px solid var(--checker-dark);
  font-size:12px;color:var(--text-muted);line-height:1.6;}
.mbt-foot a{color:var(--brand-green);}