/* ============================================================
   Sacred Destinations — 2020s UI refresh (redesign.css)
   ------------------------------------------------------------
   Loaded AFTER main.css in app/views/layout.blade.php.
   Goal: modernize without rewriting main.css. Every override
   in here can be reverted by removing the <link> tag in the
   layout. Do not touch ads, maps, controllers, or vendor JS.
   ============================================================ */


/* ------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------
   Single source of truth. Phase 3+ should reference these and
   not re-declare colours / spacing inline. */
:root {
  /* Palette — warm editorial archive */
  --sd-bg:        #f6efe2;   /* page background, slightly lighter than legacy #f3ede1 */
  --sd-surface:   #ffffff;   /* cards, header band, content well */
  --sd-surface-2: #faf6ec;   /* tonal surface for callouts */
  --sd-ink:       #1f1b16;   /* body copy, near-black warm */
  --sd-ink-soft:  #4b463e;   /* secondary copy */
  --sd-muted:     #8a8278;   /* captions, meta */
  --sd-rule:      #e3dccb;   /* hairline borders */
  --sd-rule-soft: #efe9da;
  --sd-accent:    #a8472a;   /* terracotta — used sparingly */
  --sd-accent-d:  #8a3820;   /* hover */
  --sd-link:      #2a4866;   /* deep slate blue */
  --sd-link-h:    #16314a;

  /* Type — system stacks; no webfont request, no FOIT */
  --sd-serif:  'Iowan Old Style', 'Palatino Linotype', Palatino, 'URW Palladio L', Georgia, serif;
  --sd-sans:   -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Spacing scale (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Radii + elevation */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --shadow-1: 0 1px 2px rgba(20,15,5,.05), 0 1px 3px rgba(20,15,5,.06);
  --shadow-2: 0 4px 12px rgba(20,15,5,.08), 0 2px 4px rgba(20,15,5,.05);
  --shadow-3: 0 14px 30px rgba(20,15,5,.10), 0 4px 8px rgba(20,15,5,.06);

  /* Layout */
  --measure: 68ch; /* readable line length */
}


/* ------------------------------------------------------------
   2. Base — typography, colour, spacing
   ------------------------------------------------------------
   Overrides main.css at the same or one notch higher specificity.
   We keep main.css's Bootstrap 3 grid intact. */
body {
  background: var(--sd-bg);
  color: var(--sd-ink);
  font-family: var(--sd-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reading copy — wider line-height, warmer ink */
p, li, th, td, #main h4 {
  color: var(--sd-ink);
  font-size: 1rem;
  line-height: 1.65;
}
p { margin: 0 0 var(--sp-4) 0; }

/* Headings — refined serif display, more deliberate rhythm */
h1, h2, h3, h4,
h2 a, h3 a,
#sidebar h4, #sidebar h4 a {
  color: var(--sd-ink);
  font-family: var(--sd-serif);
  font-weight: 500;
  letter-spacing: -0.005em;
}
h1 {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  font-style: normal;
  line-height: 1.15;
  margin: 0 0 var(--sp-5) 0;
}
h2 {
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  font-style: normal;
  line-height: 1.25;
  margin: var(--sp-7) 0 var(--sp-4);
}
h3 {
  font-size: 1.25rem;
  font-style: normal;
  line-height: 1.3;
  margin: var(--sp-6) 0 var(--sp-3);
}
h4 { font-size: 1.0625rem; margin: var(--sp-5) 0 var(--sp-2); }

/* Links — deeper slate, cleaner hover (no full-width bg flash) */
a, a:hover {
  color: var(--sd-link);
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}
a:hover { color: var(--sd-link-h); background: transparent; }
#content a {
  /* gentle underline-on-hover for body copy links */
  border-bottom: 1px solid transparent;
}
#content a:hover {
  border-bottom-color: currentColor;
}
#content a:visited { opacity: 1; } /* legacy main.css set 0.8 — restore full strength */

/* Selection / focus */
::selection { background: #ecd9b9; color: var(--sd-ink); text-shadow: none; }
:focus-visible {
  outline: 2px solid var(--sd-link);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Strong / emphasis */
b, strong { color: var(--sd-ink); font-weight: 600; }
em, .quote { color: var(--sd-ink-soft); }


/* ------------------------------------------------------------
   3. Layout shell
   ------------------------------------------------------------
   The site wraps everything in .container#wrap; we tighten the
   surface and give it a soft container shadow. */
#wrap {
  max-width: 1200px;
  margin: var(--sp-5) auto;
}
#content {
  background-color: var(--sd-surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.home #content { padding: var(--sp-6) var(--sp-6) var(--sp-7); }
#main, #sidebar { padding: var(--sp-6); }
.has_sidebar #main { padding-left: var(--sp-6); padding-right: var(--sp-6); }


/* ------------------------------------------------------------
   4. Buttons — refined Bootstrap 3 .btn
   ------------------------------------------------------------ */
.btn,
.btn-sd, .btn-gh {
  border-radius: var(--r-sm);
  font-family: var(--sd-sans);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 8px 14px;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sd {
  background: var(--sd-ink);
  border-color: var(--sd-ink);
  color: #fff;
}
.btn-sd:hover, .btn-sd:focus {
  background: var(--sd-link);
  border-color: var(--sd-link);
  color: #fff;
}
.btn-gh {
  background: var(--sd-accent);
  border-color: var(--sd-accent);
  color: #fff;
}
.btn-gh:hover, .btn-gh:focus {
  background: var(--sd-accent-d);
  border-color: var(--sd-accent-d);
  color: #fff;
}


/* ------------------------------------------------------------
   5. Cards (utility, used by Phases 3–5)
   ------------------------------------------------------------ */
.sd-card {
  background: var(--sd-surface);
  border: 1px solid var(--sd-rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sd-card:hover {
  border-color: #d6cdb7;
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
.sd-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--sd-rule-soft);
  overflow: hidden;
}
.sd-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sd-card__body { padding: var(--sp-4); }
.sd-card__title {
  font-family: var(--sd-serif);
  font-size: 1.125rem;
  margin: 0 0 var(--sp-1);
  line-height: 1.3;
}
.sd-card__meta {
  color: var(--sd-muted);
  font-size: .8125rem;
}

/* Chip — for "popular sites" and similar quick-link rows */
.sd-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  margin: 0 6px 6px 0;
  background: var(--sd-surface-2);
  border: 1px solid var(--sd-rule);
  border-radius: 999px;
  color: var(--sd-ink);
  font-size: .9375rem;
  line-height: 1.2;
  transition: background-color .15s, border-color .15s, color .15s;
}
.sd-chip:hover {
  background: #fff;
  border-color: #d6cdb7;
  color: var(--sd-link-h);
}
/* Suppress the global #content a:hover underline on chips and any
   component link that is itself a styled card / tile / hero. */
#content a.sd-chip,
#content a.sd-chip:hover {
  border-bottom-color: transparent;
}


/* ------------------------------------------------------------
   6. Image treatment
   ------------------------------------------------------------
   Modernize legacy 1px-grey-border thumbnails. Scoped so we
   don't break ads / map markers. */
#content img:not(.no-frame) {
  border-radius: var(--r-sm);
}
#content figure img,
.imgs img,
.mod-site img,
.iwin img {
  border-color: var(--sd-rule);
  box-shadow: var(--shadow-1);
}
.site .hero img {
  border-color: var(--sd-rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  padding: 6px;
  background: #fff;
}


/* ============================================================
   7. PHASE 2 — Header & navigation
   ============================================================ */

/* Header band — gives the logo a deliberate surface */
header {
  background: var(--sd-surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
}
header > .row { align-items: center; }

/* Logo — readable dark serif over the cream-on-white surface.
   The legacy rule was color:#FFF which was invisible. */
#logo {
  margin: 0;
  padding: 0;
}
#logo h1 { margin: 0; line-height: 1.05; }
#logo h1 a {
  color: var(--sd-ink) !important; /* override legacy color:#FFF */
  font-family: var(--sd-serif);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  display: inline-block;
  padding: 0;
}
#logo h1 a:hover { color: var(--sd-link-h) !important; background: transparent; }
#logo h1 a span {
  color: var(--sd-accent); /* warm terracotta on the "Sacred" word */
}
#logo h1 a:hover span { color: var(--sd-accent-d); }
#logo h2 a { color: var(--sd-muted); }

/* Search — modernize the legacy Google CSE input */
#search { padding-top: 0; }
#search .input-group {
  width: 100%;
  max-width: 360px;
  margin-left: auto;
}
#search .form-control {
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  border-color: var(--sd-rule);
  height: 38px;
  font-size: .9375rem;
}
#search .form-control:focus {
  border-color: var(--sd-link);
  box-shadow: 0 0 0 3px rgba(42,72,102,.15);
}
#search .btn-sd {
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  height: 38px;
}

/* Nav bar — calm warm-grey surface, no more ancient-blue dropdown */
#menu { margin-top: var(--sp-3); }
.navbar {
  background: var(--sd-surface);
  border: 1px solid var(--sd-rule);
  border-radius: var(--r-md);
  min-height: 0;
  margin-bottom: 0;
  box-shadow: var(--shadow-1);
}

/* Top-level nav items */
#menu ul {
  font-family: var(--sd-sans);
  text-transform: none;
  letter-spacing: 0.01em;
  margin: 0;
  padding: 0 var(--sp-2);
}
#menu ul li {
  display: inline-block;
  font-size: .9375rem;
  padding-right: 0;
}
#menu ul li a {
  color: var(--sd-ink);
  font-weight: 500;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  transition: background-color .15s ease, color .15s ease;
}
#menu ul li:hover > a,
#menu ul li:focus-within > a {
  background: var(--sd-surface-2);
  color: var(--sd-ink);
}

/* Submenu — replace the legacy black-bordered #B9D1EB blue list */
#menu ul ul {
  background: var(--sd-surface);
  border: 1px solid var(--sd-rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  font-family: var(--sd-sans);
  text-transform: none;
  padding: var(--sp-2) 0;
  width: 220px;
  top: calc(100% + 4px);
}
#menu ul ul li {
  display: block;
  border-bottom: none;
  font-size: .875rem;
  padding: 0;
}
#menu ul ul li a {
  background: transparent;
  color: var(--sd-ink);
  font-weight: 400;
  padding: 8px 16px;
  border-radius: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#menu ul ul li a:hover,
#menu ul ul li a:focus {
  background: var(--sd-surface-2);
  color: var(--sd-link-h);
}
#menu ul ul li a i {
  color: var(--sd-muted);
  position: static;
  margin-left: var(--sp-2);
  font-size: .75rem;
}
#menu ul ul li a:hover i { color: var(--sd-ink); }

/* Third-level (countries) — sit cleanly to the right */
#menu ul ul ul {
  left: 100%;
  top: -1px;
  margin-left: 4px;
}


/* ------------------------------------------------------------
   8. Footer — restful, on-tone
   ------------------------------------------------------------ */
footer {
  background: transparent;
  border-top: none;
  margin-top: var(--sp-6);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  color: var(--sd-muted);
}
#footer_menu ul { padding: 0; }
#footer_menu li { margin: 0 var(--sp-3); }
#footer_menu a { color: var(--sd-ink-soft); }
#footer_menu a:hover { color: var(--sd-link-h); }
footer p { color: var(--sd-muted); font-size: .8125rem; max-width: 60ch; margin: var(--sp-3) auto 0; }


/* ------------------------------------------------------------
   9. Responsive — small screens
   ------------------------------------------------------------
   The legacy nav uses CSS :hover dropdowns which don't work on
   touch. On <768px we hide the nested submenus entirely and
   make the top level a horizontally-scrollable strip. Tap on
   "Destinations" / "Categories" / "Photos" still works because
   those are real routes (/destinations, /categories, /photos).
   This is a deliberate Phase-2 tradeoff; a full mobile mega-nav
   is a Phase-3+ task. */
@media (max-width: 767px) {
  #wrap { margin: 0 auto; }
  header {
    border-radius: 0;
    padding: var(--sp-4);
    margin-bottom: var(--sp-3);
  }
  #logo h1 a { font-size: 1.5rem; }
  #search .input-group { max-width: 100%; margin: var(--sp-3) 0 0; }

  #menu { margin-top: var(--sp-2); }
  .navbar { border-radius: 0; border-left: 0; border-right: 0; }
  #menu ul {
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--sp-2);
    /* hide horizontal scrollbar on iOS / Android */
    scrollbar-width: none;
  }
  #menu ul::-webkit-scrollbar { display: none; }
  #menu ul li a { padding: 12px 14px; }
  /* On mobile, hide the nested dropdowns entirely — they were
     unusable on touch anyway. The top-level routes are real. */
  #menu ul ul { display: none !important; }
  #menu ul li a i { display: none; }
}


/* ------------------------------------------------------------
   10. Accessibility — focus rings, skip link, reduced motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Larger tap targets on mobile */
@media (max-width: 767px) {
  #menu ul li a,
  #footer_menu a,
  .btn { min-height: 44px; }
}


/* ------------------------------------------------------------
   11. Hover bridges — keep dropdowns alive across visual gaps
   ------------------------------------------------------------
   The dropdowns sit 4px below their trigger (vertical, top-level
   to level-1) and 4px right of their trigger (horizontal, level-1
   to level-2) for visual breathing room. Without a bridge that
   4px is a hover dead zone: the cursor exits :hover mid-traverse
   and the menu collapses. These invisible ::after pseudo-elements
   extend the trigger's hover area into the gap. Sized to the gap
   exactly (4px) so they don't intercept clicks meant for items
   inside the dropdown panels. */

/* Anchor the vertical bridge to the LI, not the outer UL.
   main.css doesn't set position on the top-level LI, so without
   this the ::after would stretch across the whole nav bar. */
#menu .navbar-nav > li {
  position: relative;
}

/* Vertical bridge — top-level nav item → its dropdown */
#menu .navbar-nav > li::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 4px;
  /* no background, no z-index — invisible hover area only */
}

/* Horizontal bridge — level-1 dropdown row → its level-2 menu.
   #menu ul ul li already has position: relative from main.css,
   so the ::after anchors correctly without re-asserting. */
#menu .navbar-nav > li > ul > li::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 4px;
}

/* Bridges are disabled on mobile — nested dropdowns are hidden
   under 768px (see section 9), so there's nothing to bridge. */
@media (max-width: 767px) {
  #menu .navbar-nav > li::after,
  #menu .navbar-nav > li > ul > li::after { content: none; }
}


/* ============================================================
   PHASE 3 — visual modernization
   ------------------------------------------------------------
   Additive component classes for: page header, country cards,
   photo gallery tiles, photo detail figure, site hero, home
   hero, body-typography refinements for site pages.
   Every component is opt-in via a new class on the template
   side (or scoped to an existing body class), so removing the
   redesign.css <link> in layout.blade.php still reverts cleanly.
   ============================================================ */


/* ------------------------------------------------------------
   12. Page header — refined typography
   ------------------------------------------------------------
   The partials/page_header.blade.php emits leader-ad → crumbs
   → H1 → share. We don't move the ad (revenue protection); we
   just calm the typography around it. */
header.pagehead {
  margin: 0 0 var(--sp-5);
}
header.pagehead .ad-leader {
  margin-bottom: var(--sp-4);
  text-align: center;
}
header.pagehead .breadcrumb {
  background: transparent;
  margin: 0 0 var(--sp-2);
  padding: 0;
  text-transform: none;
  font-size: 0.8125rem;
  color: var(--sd-muted);
  border-radius: 0;
}
header.pagehead .breadcrumb > li + li:before {
  content: "›";
  padding: 0 6px;
  color: var(--sd-muted);
}
header.pagehead .breadcrumb a {
  color: var(--sd-ink-soft);
}
header.pagehead .breadcrumb a:hover {
  color: var(--sd-link-h);
}
header.pagehead .breadcrumb .active {
  color: var(--sd-muted);
}
header.pagehead h1 {
  margin: 0 0 var(--sp-2);
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  line-height: 1.1;
}
header.pagehead .share {
  margin: var(--sp-3) 0 0;
}


/* ------------------------------------------------------------
   13. Country card grid — used on region pages and elsewhere
   ------------------------------------------------------------ */
.sd-country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-4);
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
}
.sd-country-grid > li { margin: 0; padding: 0; }
.sd-country-card {
  display: block;
  background: var(--sd-surface);
  border: 1px solid var(--sd-rule);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sd-country-card:hover,
.sd-country-card:focus {
  border-color: #d6cdb7;
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
  background: var(--sd-surface);
}
#content a.sd-country-card,
#content a.sd-country-card:hover {
  border-bottom-color: transparent; /* override the inline-link underline */
}
.sd-country-card__media {
  display: block;
  aspect-ratio: 5 / 3;
  background: var(--sd-rule-soft);
  overflow: hidden;
}
.sd-country-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
.sd-country-card__body {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.sd-country-card__name {
  display: block;
  font-family: var(--sd-serif);
  font-size: 1.1875rem;
  margin: 0;
  color: var(--sd-ink);
  line-height: 1.2;
  font-weight: 500;
}
.sd-country-card__meta {
  display: block;
  font-size: 0.8125rem;
  color: var(--sd-muted);
  margin-top: 4px;
}


/* ------------------------------------------------------------
   14. Photo gallery — replaces the bare /photos UL
   ------------------------------------------------------------ */
.sd-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3);
  list-style: none;
  margin: var(--sp-4) 0 var(--sp-6);
  padding: 0;
}
.sd-gallery > li { margin: 0; padding: 0; }
.sd-gallery__tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--sd-rule-soft);
  border: 1px solid var(--sd-rule);
  border-radius: var(--r-sm);
  overflow: hidden;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sd-gallery__tile:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
#content a.sd-gallery__tile,
#content a.sd-gallery__tile:hover {
  border-bottom-color: transparent;
}
.sd-gallery__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
.sd-gallery__tile--text {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sd-surface-2);
  text-align: center;
  padding: var(--sp-3);
}
.sd-gallery__caption {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(180deg, transparent 0%, rgba(20,15,5,0.78) 100%);
  color: #fff;
  font-family: var(--sd-serif);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.2;
  padding: var(--sp-5) var(--sp-3) var(--sp-3);
  letter-spacing: 0.005em;
}
.sd-gallery__caption-only {
  position: static;
  color: var(--sd-ink);
  background: none;
  padding: 0;
  font-size: 1.125rem;
}


/* ------------------------------------------------------------
   15. Photo detail — modernize the figure
   ------------------------------------------------------------
   We add a single class on the <figure> so styling is opt-in
   and we don't rewrite the legacy .photo .photo-area rules. */
.photo-figure-modern {
  margin: var(--sp-3) 0 var(--sp-5);
  text-align: center;
}
.photo-figure-modern img {
  display: block;
  margin: 0 auto;
  border: 1px solid var(--sd-rule);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-2);
  max-width: 100%;
  background: #fff;
  padding: 4px;
}
.photo-figure-modern figcaption {
  margin-top: var(--sp-4);
  font-family: var(--sd-sans);
  text-align: left;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
.photo-figure-modern figcaption h1 {
  font-family: var(--sd-serif);
  font-size: 1.625rem;
  margin: 0 0 var(--sp-2);
  line-height: 1.2;
}
.photo-figure-modern figcaption p {
  font-size: 1rem;
  color: var(--sd-ink);
  margin: 0 0 var(--sp-3);
  line-height: 1.55;
}
.photo-figure-modern .credit {
  font-size: 0.8125rem;
  color: var(--sd-muted);
  font-style: italic;
}
body.photo .photo-nav {
  font-size: 0.875rem;
  color: var(--sd-muted);
  margin: 0 0 var(--sp-3);
}
body.photo .photo-nav a {
  color: var(--sd-link);
}


/* ------------------------------------------------------------
   16. Site page — bounded hero + body typography refinement
   ------------------------------------------------------------ */
.sd-site-hero {
  position: relative;
  margin: 0 calc(-1 * var(--sp-6)) var(--sp-5);
  background: var(--sd-rule-soft);
  overflow: hidden;
}
.sd-site-hero img {
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
.sd-site-hero figcaption {
  padding: var(--sp-2) var(--sp-6);
  font-size: 0.8125rem;
  color: var(--sd-muted);
  background: var(--sd-surface-2);
  border-bottom: 1px solid var(--sd-rule);
}
@media (max-width: 767px) {
  .sd-site-hero { margin-left: calc(-1 * var(--sp-4)); margin-right: calc(-1 * var(--sp-4)); }
  .sd-site-hero figcaption { padding: var(--sp-2) var(--sp-4); }
}

/* Body typography for site pages — Britannica-calibre */
body.site #essay {
  /* tighten the line-length without breaking the Bootstrap col widths */
}
body.site #essay > p,
body.site #essay > h2,
body.site #essay > h3 {
  max-width: 70ch;
}
body.site #essay > p.lead,
body.site #essay > p:first-of-type {
  font-family: var(--sd-serif);
  font-size: 1.1875rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--sd-ink);
  max-width: 64ch;
  margin: 0 0 var(--sp-5);
}
body.site .facts {
  background: var(--sd-surface-2);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-6);
  border: 1px solid var(--sd-rule);
}
body.site .facts h2 { margin-top: 0; }
body.site .facts table {
  border: 0;
  background: transparent;
}
body.site .facts th,
body.site .facts td {
  border-color: var(--sd-rule-soft) !important;
}


/* ------------------------------------------------------------
   17. Destination "modules" — refine the existing .mod-site cards
   ------------------------------------------------------------
   destination.blade.php already renders sites in a grid via
   .mod-site. We polish them in-place; no template change needed. */
.modules .mod-site {
  background: var(--sd-surface);
  border: 1px solid var(--sd-rule);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  height: auto;
  min-height: 320px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.modules .mod-site:hover {
  border-color: #d6cdb7;
  box-shadow: var(--shadow-1);
  transform: translateY(-1px);
}
.modules .mod-site img {
  border-radius: var(--r-sm);
  border-color: var(--sd-rule);
  margin: 0 0 var(--sp-3);
  width: 100%;
  max-height: 200px;
  object-fit: cover;
}
.modules .mod-site a {
  font-family: var(--sd-serif);
  font-weight: 500;
  font-size: 1.0625rem;
}
.modules .mod-site div {
  font-size: 0.875rem;
  color: var(--sd-ink-soft);
  line-height: 1.5;
  margin-top: var(--sp-2);
}


/* ------------------------------------------------------------
   18. Homepage editorial hero
   ------------------------------------------------------------ */
.sd-home-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  margin: 0 0 var(--sp-6);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--sd-rule-soft);
  min-height: 420px;
  text-decoration: none;
  color: inherit;
}
#content a.sd-home-hero,
#content a.sd-home-hero:hover {
  border-bottom-color: transparent;
}
.sd-home-hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.sd-home-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  transition: transform .8s ease;
}
.sd-home-hero:hover .sd-home-hero__media img {
  transform: scale(1.02);
}
.sd-home-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(20,15,5,0) 30%, rgba(20,15,5,.55) 75%, rgba(20,15,5,.78) 100%);
}
.sd-home-hero__body {
  position: relative;
  z-index: 3;
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  color: #fff;
  max-width: 720px;
}
.sd-home-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.9);
  margin: 0 0 var(--sp-2);
  font-weight: 500;
}
.sd-home-hero__title {
  font-family: var(--sd-serif);
  font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem);
  margin: 0;
  color: #fff;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.005em;
}

/* Homepage section pacing */
body.home #content { padding: 0; }
body.home .home-intro {
  padding: 0 var(--sp-6) var(--sp-2);
}
body.home .home-section {
  padding: 0 var(--sp-6);
  margin-bottom: var(--sp-6);
}
body.home h3,
body.home .home-intro h3,
body.home .home-section h3 {
  font-style: normal;
  text-transform: none;
  font-size: 1.375rem;
  color: var(--sd-ink);
  margin: 0 0 var(--sp-3);
  font-family: var(--sd-serif);
  font-weight: 500;
}
body.home p.quote {
  font-family: var(--sd-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--sd-ink-soft);
  border-left: 2px solid var(--sd-accent);
  padding: 6px 0 6px var(--sp-4);
  margin: var(--sp-5) 0;
  text-align: left;
  max-width: 60ch;
}
body.home p.quote br + * { display: inline; }
body.home .home-popular {
  margin: var(--sp-2) 0 var(--sp-4);
}
body.home .home-popular a {
  /* renders chips inline; we use the existing .sd-chip class on each link */
}
body.home #ad-rect-bottom {
  margin-top: var(--sp-5);
}
@media (max-width: 767px) {
  body.home .home-intro,
  body.home .home-section { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .sd-home-hero { min-height: 320px; border-radius: 0; margin-left: calc(-1 * var(--sp-4)); margin-right: calc(-1 * var(--sp-4)); }
  .sd-home-hero__body { padding: var(--sp-6) var(--sp-4) var(--sp-4); }
}