/* ==========================================================================
   SUNBURNT ATLAS — COMPONENTS STYLESHEET
   sunburnt-components.css

   Contains: tab system, price/data tables, grids, cards, banners, pills,
   badges, section tags, and their mobile overrides. Loaded on every page
   alongside sunburnt-global.css. Page-specific one-off layouts stay inline
   on that page; if a component pattern repeats on 2+ pages, it belongs here,
   not copy-pasted.

   Reconciliation note (migration session, June 29 2026): several pages had
   drifted .tab-nav `top` offset values (56/58/64/72px) despite identical nav
   padding underneath them — that drift was unintentional, not a deliberate
   per-page difference. Canonical values below are 64px desktop / 56px mobile,
   chosen because they were the majority value across the site. Any page using
   72px or 58px should be corrected to match when it's next touched.

   Last built: June 29, 2026 — Stylesheet Migration session.
   ========================================================================== */

/* ---------- Tab system ---------- */
/* NOTE on the two different "offset" numbers in this section — these are
   not the same measurement and are not meant to match each other:
   - .tab-nav `top:64px` (56px on mobile) = how far the STICKY tab bar
     itself sits from the top of the viewport once stuck under the nav.
   - The showTab() scroll offset (80 desktop / 56 mobile, in the JS below)
     = how much extra clearance to leave ABOVE the tab bar when scrolling
     a tab into view, so content doesn't land flush against the bar.
   Desktop intentionally uses 80 instead of 64 to leave ~16px of breathing
   room above the bar after a scroll-to-tab. Mobile uses the same 56 for
   both because there's no room to spare on small screens. Do not "fix"
   these to match each other — that would either jam tab content against
   the sticky bar (if scroll offset dropped to 64) or strand 16px of dead
   space above it (if tab-nav top rose to 80). */
.tab-nav { background:var(--ocean-deep); border-bottom:1px solid rgba(255,255,255,0.08); position:sticky; top:64px; z-index:90; display:block; width:100%; max-width:100vw; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; padding:0 3rem; }
.tab-nav-inner { display:flex; gap:0; flex-wrap:nowrap; width:max-content; min-width:max-content; margin:0 auto; padding:0; }
.tab-btn { background:none; border:none; color:#FFFFFF; font-weight:500; font-size:0.88rem; padding:1rem 1.2rem; cursor:pointer; border-bottom:3px solid transparent; transition:opacity 0.2s,color 0.2s,border-color 0.2s; white-space:nowrap; -webkit-font-smoothing:antialiased; }
.tab-btn:hover { opacity:0.85; }
.tab-btn.active { color:var(--aqua); border-bottom-color:var(--aqua); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.section-wrap.white { background:var(--white); }

/* Tab switch script — paste this on every page, do not modify per-page.
   The offset switches at the same 768px breakpoint as the CSS media query.
<script>
function showTab(name, btn) {
  document.querySelectorAll('.tab-panel').forEach(t => t.classList.remove('active'));
  document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
  document.getElementById('tab-' + name).classList.add('active');
  btn.classList.add('active');
  var tabNav = document.querySelector('.tab-nav');
  var offset = window.innerWidth <= 768 ? 56 : 80;
  window.scrollTo({ top: tabNav.offsetTop - offset, behavior: 'smooth' });
}
</script>
*/

/* ---------- Price / Data Tables ----------
   Only .table-scroll scrolls. .table-wrap is decorative only (border, radius,
   margin) and must NEVER also carry overflow-x:auto — that's the "two
   captains steering one boat" bug. If both elements claim the scroll job,
   browsers can disagree about which owns the scrollbar and the table clips
   instead of scrolling. */
.table-wrap { width:100%; max-width:100%; border-radius:12px; border:1px solid rgba(0,0,0,0.08); margin-top:1.5rem; }
.table-scroll { width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
.table-wrap .table-scroll { border-radius:0; border:none; margin-top:0; }
.data-table { width:100%; min-width:720px; border-collapse:collapse; font-size:0.86rem; display:table; }
.data-table thead tr { background:var(--ocean-deep); color:white; }
.data-table th { padding:0.9rem 1rem; text-align:left; font-weight:700; font-size:0.8rem; letter-spacing:0.5px; -webkit-font-smoothing:antialiased; }
.data-table tbody tr { border-bottom:1px solid var(--sand-dark); }
.data-table tbody tr:last-child { border-bottom:none; }
.data-table tbody tr:nth-child(even) { background:rgba(240,247,255,0.5); }
.data-table td { padding:0.85rem 1rem; color:var(--dark); vertical-align:top; line-height:1.55; }
.data-table td:first-child { font-weight:700; font-size:0.85rem; }

/* ---------- Grids ---------- */
.card-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.card-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.card-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.three-col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:2rem; }
.overview-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.contrast-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.cities-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.deepdive-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.vs-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.budget-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.vf-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.5rem; }

/* ---------- Cards ---------- */
.info-card { background:var(--white); border-radius:14px; padding:1.6rem; transition:transform 0.2s,box-shadow 0.2s; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.info-card:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,0.08); }
.info-card.teal-top { border-top:4px solid var(--turquoise); }
.info-card.coral-top { border-top:4px solid var(--coral); }
.info-card.ocean-top { border-top:4px solid var(--ocean); }
.info-card.green-top { border-top:4px solid var(--green); }
.info-card.sand-bg { background:var(--sand); box-shadow:none; }
.border-card { background:var(--white); border-radius:12px; padding:1.5rem; border-left:4px solid var(--ocean); }
.border-card.teal { border-left-color:var(--turquoise); }
.border-card.coral { border-left-color:var(--coral); }
.border-card.green { border-left-color:var(--green); }
.border-card.danger { border-left-color:#b00020; }
.border-card.sand-bg { background:var(--sand); }
.store-card { background:var(--white); border-radius:14px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.store-header { padding:1.2rem 1.5rem; background:var(--light-bg); }
.store-body { padding:1.5rem; }
.safety-card { background:var(--white); border-radius:14px; padding:1.5rem; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.safety-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.8rem; }

/* ---------- Pills ---------- */
.pill { display:inline-block; background:var(--light-bg); color:var(--ocean); font-size:0.78rem; font-weight:500; padding:0.3rem 0.8rem; border-radius:100px; }
.pill.green { background:var(--green-bg); color:var(--green); }
.pill.coral { background:rgba(224,122,95,0.1); color:var(--coral); }
.pill.sand { background:var(--sand); color:var(--dark); }
.pill.teal { background:rgba(0,180,216,0.1); color:var(--turquoise); }

/* ---------- Badges ---------- */
.badge { display:inline-block; padding:0.18rem 0.55rem; border-radius:100px; font-size:0.72rem; font-weight:500; }
.badge.safe, .sb-safe { background:var(--green-bg); color:var(--green); }
.badge.info { background:var(--light-bg); color:var(--ocean); }
.badge.caution, .sb-caution { background:rgba(224,122,95,0.1); color:var(--coral); }
.badge.danger, .sb-avoid { background:rgba(176,0,0,0.1); color:#b00; }

/* ---------- Section Tags ---------- */
.section-tag { display:inline-block; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; padding:0.25rem 0.7rem; border-radius:100px; margin-bottom:0.8rem; }
.section-tag.tag-ocean { background:rgba(0,119,182,0.1); color:var(--ocean); }
.section-tag.tag-teal { background:rgba(0,180,216,0.1); color:var(--turquoise); }
.section-tag.tag-sand { background:var(--sand-dark); color:var(--dark); }
.section-tag.tag-coral { background:rgba(224,122,95,0.1); color:var(--coral); }
.section-tag.tag-green { background:var(--green-bg); color:var(--green); }

/* ---------- Banners ----------
   ground-level uses a LIGHT gradient wash of dark blue (nearly white), with
   a DARK heading + muted body text. This is correct and is NOT the dark-
   background rule that applies to nav/hero/footer — do not flip this to
   white text. */
.banner { display:flex; gap:1rem; border-radius:14px; padding:1.5rem; margin:1.5rem 0; }
.banner-icon { font-size:1.4rem; line-height:1; }
.banner h4 { font-size:0.95rem; font-weight:700; margin:0 0 0.35rem 0; }
.banner p { font-size:0.88rem; line-height:1.6; margin:0; }
.banner.ground-level { background:linear-gradient(135deg,rgba(2,62,138,0.06),rgba(0,119,182,0.04)); border:1px solid rgba(0,119,182,0.15); }
.banner.ground-level h4 { color:var(--dark); }
.banner.ground-level p { color:var(--muted); }
.banner.info { background:var(--light-bg); border:1px solid rgba(0,119,182,0.1); }
.banner.info h4 { color:var(--ocean); }
.banner.info p { color:var(--muted); }
.banner.warn { background:rgba(224,122,95,0.08); border:1px solid rgba(224,122,95,0.2); }
.banner.warn h4 { color:var(--coral); }
.banner.warn p { color:var(--muted); }
.banner.success { background:var(--green-bg); border:1px solid rgba(15,110,86,0.15); }
.banner.success h4 { color:var(--green); }
.banner.success p { color:var(--muted); }
.banner.danger { background:rgba(176,0,0,0.06); border:1px solid rgba(176,0,0,0.2); }
.banner.danger h4 { color:#b00; }
.banner.danger p { color:var(--muted); }

/* ---------- Filter Free / Ground Level editorial boxes ---------- */
.filterbox { background:linear-gradient(135deg,rgba(2,62,138,0.06),rgba(0,119,182,0.04)); border:1px solid rgba(0,119,182,0.15); border-radius:14px; padding:2rem; margin:2rem 0; }
.ff-label { display:inline-block; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; background:rgba(0,119,182,0.1); color:var(--ocean); padding:0.25rem 0.7rem; border-radius:100px; margin-bottom:0.8rem; }
.filterbox p { font-size:0.9rem; color:var(--muted); line-height:1.75; }

/* ==========================================================================
   MOBILE — @media(max-width:768px)
   ========================================================================== */
@media(max-width:768px) {
  .tab-nav { top:56px !important; padding:0 !important; }
  .tab-nav-inner { padding:0 1rem; margin:0; }

  .card-grid-2, .card-grid-3, .card-grid-4, .two-col, .three-col,
  .vs-grid, .budget-grid, .vf-grid { grid-template-columns:1fr !important; }
  .card-grid-2 > *, .card-grid-3 > *, .card-grid-4 > *, .two-col > *,
  .three-col > *, .vs-grid > *, .budget-grid > *, .vf-grid > * { min-width:0; }

  /* Hub-only grids — 2-col on mobile is fine, do not force to 1fr */
  .overview-grid, .contrast-grid { grid-template-columns:1fr !important; }
  .overview-grid > *, .contrast-grid > * { min-width:0; }
  .cities-grid { grid-template-columns:1fr 1fr !important; }
  .deepdive-grid { grid-template-columns:1fr 1fr !important; }
  .cities-grid > *, .deepdive-grid > * { min-width:0; }

  .table-wrap, .table-scroll { margin-left:0; margin-right:0; max-width:100%; }
}

/* Tiny phones (iPhone SE class, 320–374px wide): even 2 columns gets too
   cramped for cards with real content at ~150px each. Drop to 1 column. */
@media(max-width:480px) {
  .cities-grid, .deepdive-grid { grid-template-columns:1fr !important; }
}