/* 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), .mbt-lead 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-lead 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), .mbt-lead 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, .mbt-lead a.mbt-clicked:not(.mbt-chip)::after{
  content:"\2060✓";display:inline;text-decoration:none;color:var(--visited-teal);margin-left:3px;font-weight:700;font-size:0.7em;vertical-align:5px;}
/* \2060 is a WORD JOINER (zero-width, no break allowed at its position) and the display MUST stay
   inline. Both matter: an inline-block is an atomic inline, which CSS gives a soft-wrap opportunity
   on BOTH sides, so the tick used to break onto a line of its own — a stranded 12px fragment. With
   the joiner the breaker falls back to the previous space, carrying the last word and the tick to
   the next line together. Do not restore display:inline-block, and do not drop the \2060. */
/* 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){
  /* align-items:center centers the shorter column (usually the figure) against a long
     text card, so leftover height is split above+below the image instead of dumped as
     one dead gap at the bottom. REVERSAL: delete the align-items:center declaration
     below to restore the original top-aligned behavior. */
  .mbt-split{grid-template-columns:1.1fr 1fr;align-items:center;}
  .mbt-split.flip>figure{order:2;}
}

/* stacked pair + text: two SMALL images share the media column so the pair stands
   roughly as tall as the text beside it, instead of one undersized image floating
   next to a long card. Source order must be figure / card / figure — that is what
   makes the single-column flow read image, text, image; the grid placement below
   only engages once there are two columns to place into. Do NOT wrap the two
   figures in a container div to "tidy" this: a wrapper puts both images on the
   same side of the card and the one-column reflow is lost. */
.mbt-split--stack{display:grid;grid-template-columns:1fr;gap:16px;align-items:start;}
@media(min-width:620px){
  /* row 2 takes the slack (auto 1fr) so a card taller than both images leaves its
     leftover height BELOW the pair — with plain auto rows the spanning card
     inflates both rows and shoves the second image away from the first. */
  .mbt-split--stack{grid-template-columns:1.1fr 1fr;grid-template-rows:auto 1fr;}
  .mbt-split--stack>figure:first-of-type{grid-column:1;grid-row:1;}
  .mbt-split--stack>figure:last-of-type{grid-column:1;grid-row:2;}
  .mbt-split--stack>.mbt-card{grid-column:2;grid-row:1/span 2;}
  /* .flip mirrors the columns; order: doesn't work here because placement is explicit */
  .mbt-split--stack.flip>figure{grid-column:2;}
  .mbt-split--stack.flip>.mbt-card{grid-column:1;}
}

/* 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:"\2060✓";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);}

/* ---- image modal / lightbox ---- */
.mbt-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.85);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.mbt-modal.mbt-active {
  display: flex;
}
.mbt-modal img {
  max-width: 95%;
  max-height: 95vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
}
.mbt-modal-close {
  position: absolute;
  top: 15px;
  right: 25px;
  color: #fff;
  font-size: 38px;
  font-weight: bold;
  cursor: pointer;
  opacity: 0.7;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  transition: opacity 0.2s;
  z-index: 10000;
}
.mbt-modal-close:hover {
  opacity: 1;
}
.mbt-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  padding: 15px 20px;
  font-size: 24px;
  cursor: pointer;
  transition: background 0.2s;
  z-index: 10000;
  border-radius: 4px;
}
.mbt-modal-nav:hover {
  background: rgba(0,0,0,0.8);
}
.mbt-modal-prev { left: 15px; }
.mbt-modal-next { right: 15px; }
.mbt-figure { cursor: zoom-in; }

/* ---- multi image gallery stack ----
   The frame is FIXED and the images fit inside it. Without this the container took whatever
   shape the visible image happened to be, so clicking through a gallery whose tiles differ in
   aspect resized the whole block and shoved the page around -- Houston's museum gallery runs
   1.86, 1.33 and 0.75. Reordering cannot help: the gallery wraps, so with three tiles every
   pair is adjacent whatever the order.
   object-fit:contain, not cover -- cover would fill the frame by cropping, which on a tall
   subject like a Foucault pendulum cuts off the thing you came to see. The cost is a little
   background either side of a portrait, which is the honest trade. */
.mbt-multi-img {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--card-bg-alt);
  border-radius: 6px;
  overflow: hidden;
}
/* A figure the author declared portrait gets a portrait frame; a 3:2 box there would letterbox
   the tall images it exists to show. */
.mbt-figure--portrait .mbt-multi-img {
  aspect-ratio: 3 / 4;
}
.mbt-multi-img img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mbt-multi-img img.mbt-active {
  display: block;
}
/* Round, solid, and always legible. The previous version was a 0.7-opacity dark chevron laid
   over photographs that are often dark themselves, so on the Houston museum shot it read as a
   smudge and nobody could tell the gallery had more images in it. A control has to look like a
   control on ANY photo behind it, hence the opaque fill and the white ring. */
.mbt-inline-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.62);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.85), 0 1px 4px rgba(0,0,0,0.35);
  color: #fff;
  border: none;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  opacity: 1;
  transition: background 0.2s, transform 0.15s;
}
.mbt-inline-nav:hover {
  background: rgba(0,0,0,0.85);
  transform: translateY(-50%) scale(1.08);
}
.mbt-inline-prev { left: 10px; }
.mbt-inline-next { right: 10px; }

/* "2 / 3", sitting quietly at the end of the caption band rather than over the picture.
   As a dark pill on the image it shouted, and for a gallery of two or three the arrows already
   carry most of that message -- the count earns its place mainly when the number is large
   (1 / 22 tells you something 1 / 2 does not). So: caption-coloured, small, no chrome. */
.mbt-multi-count {
  position: absolute;
  right: 11px;
  bottom: 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  opacity: 0.65;
  pointer-events: none;
}
/* Anchor for the count, and keep caption text from running underneath it. */
.mbt-figure.mbt-has-count { position: relative; }
.mbt-figure.mbt-has-count figcaption { padding-right: 48px; }