/* ============================================================
   Guwahati City Portal — design system
   Palette: deep blue (navbar, same family as map.guwahati.com)
            + saffron accent + white
   Font: system sans-serif stack only — no external font dependency
   ============================================================ */

:root {
  --gwh-navy: #1a3c5e;
  --gwh-navy-dark: #12293f;
  --gwh-saffron: #FF6B00;
  --gwh-saffron-dark: #d95a00;
  --gwh-white: #ffffff;
  --gwh-grey-light: #f8f9fa;
  --gwh-grey-dark: #333333;

  --bs-font-sans-serif: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

body {
  font-family: var(--bs-font-sans-serif);
  color: var(--gwh-grey-dark);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--gwh-navy);
}
h1 { font-size: 2.5rem; font-weight: 700; }
h2 { font-size: 1.8rem; }
p, li {
  line-height: 1.6;
}

/* Alternating light-grey section background, per Basel.com-style listing pages */
.gwh-section-alt {
  background-color: var(--gwh-grey-light);
}

/* ---------- Homepage vertical rhythm ---------- */
/* Single source of truth for the gap between homepage sections — every
   section (hero through the last one before the footer) gets exactly this
   much space below it, nothing else. Any section-specific breathing room
   (e.g. the navy stats bar's own padding) belongs on an *inner* wrapper,
   never on the element carrying this class, or the gaps stop being uniform. */
.gwh-section {
  margin-bottom: 120px;
  /* Establishes a new block-formatting context so a child's negative margin
     (e.g. Bootstrap's .row.g-3/.g-4 gutter rows, which use margin-top:-Npx)
     can never collapse through and silently shrink the 120px gap above this
     section — confirmed this actually happens without it: the "Quick
     Links" and "Recent Reports" sections both start with a gutter .row as
     their first child, which ate 16px/24px off the preceding gap. */
  display: flow-root;
}
@media (max-width: 575px) {
  .gwh-section {
    margin-bottom: 64px;
  }
}

/* ---------- Shared section-heading style ---------- */
/* One step up from the old .h4-class convention (1.5rem) used across the
   homepage and main listing pages. Single shared class instead of repeating
   this per section, so a future size/alignment tweak only happens here. */
.gwh-section-heading {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  color: var(--gwh-navy);
}
/* Section headers that pair a centered title with a "View all" link: the
   link is pulled out of the centering flow via absolute positioning against
   this wrapper, rather than living in the same flex row as the heading
   (which would break true centering). */
.gwh-section-heading-row {
  position: relative;
  text-align: center;
}
.gwh-section-heading-row .gwh-section-heading {
  margin-bottom: 0;
}
.gwh-section-heading-row .gwh-view-all {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 575px) {
  /* Not enough room to float the link at this width — stack it below instead. */
  .gwh-section-heading-row .gwh-view-all {
    position: static;
    display: block;
    transform: none;
    margin-top: 0.5rem;
  }
}

/* 2-line clamp for card descriptions */
.gwh-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Key-info icon row (phone/website/hours) used on cards + detail sidebars */
.gwh-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  font-size: 0.85rem;
  color: var(--gwh-grey-dark);
}

/* ---------- Navbar ---------- */
.navbar.gwh-navbar {
  background-color: var(--gwh-navy) !important;
}
.gwh-navbar .navbar-brand .text-warning {
  color: var(--gwh-saffron) !important;
}
.gwh-navbar .nav-link:hover,
.gwh-navbar .nav-link:focus {
  color: var(--gwh-saffron) !important;
}

/* ---------- Buttons ---------- */
.btn-primary {
  background-color: var(--gwh-navy);
  border-color: var(--gwh-navy);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--gwh-navy-dark);
  border-color: var(--gwh-navy-dark);
}
.btn-accent,
.btn-warning {
  background-color: var(--gwh-saffron);
  border-color: var(--gwh-saffron);
  color: var(--gwh-white);
}
.btn-accent:hover,
.btn-warning:hover {
  background-color: var(--gwh-saffron-dark);
  border-color: var(--gwh-saffron-dark);
  color: var(--gwh-white);
}

/* ---------- Hero ---------- */
.gwh-hero {
  background: linear-gradient(135deg, var(--gwh-navy) 0%, var(--gwh-navy-dark) 100%);
}
/* Headings default to --gwh-navy (see top of file), which is invisible against
   this component's own navy background — override back to white here, same
   pattern already used by .gwh-detail-hero below. */
.gwh-hero h1,
.gwh-hero h2,
.gwh-hero h3 {
  color: var(--gwh-white);
}

/* ---------- Reusable dark-section helper ---------- */
/* Apply to any custom dark-background section so headings/paragraphs don't
   inherit the default navy heading color (which would be invisible). */
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark p {
  color: var(--gwh-white);
}
.section-dark .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ---------- Cards ---------- */
.gwh-card {
  position: relative;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  overflow: hidden;
}
.gwh-card:hover {
  box-shadow: 0 0.75rem 1.5rem rgba(26, 60, 94, 0.18);
  transform: translateY(-3px);
}
.gwh-card .gwh-card-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gwh-white);
  background-color: var(--gwh-navy);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ---------- Quick links ---------- */
.gwh-quicklink {
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.gwh-quicklink:hover {
  box-shadow: 0 0.5rem 1rem rgba(26, 60, 94, 0.15);
  transform: translateY(-2px);
  border-color: var(--gwh-saffron) !important;
}

/* ---------- Stats bar ---------- */
.gwh-stats-bar {
  background-color: var(--gwh-navy);
  color: var(--gwh-white);
}
.gwh-stats-bar .gwh-stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gwh-saffron);
}

/* ---------- #thisisguwahati grid ---------- */
.gwh-insta-tile {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--gwh-navy) 0%, var(--gwh-saffron) 100%);
  opacity: 0.85;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gwh-white);
  font-size: 1.5rem;
  border-radius: 0.5rem;
}

/* ---------- Newsletter ---------- */
.gwh-newsletter {
  background-color: #f4f6f8;
}

/* ---------- Card component (reused on all listing/grid pages) ---------- */
.gwh-card-cover {
  width: 100%;
  height: 250px;
  object-fit: cover;
}
.gwh-card-cover-placeholder {
  width: 100%;
  height: 250px;
  background-color: var(--gwh-navy);
  color: var(--gwh-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gwh-card-title {
  font-weight: 700;
  color: var(--gwh-navy);
}
.gwh-card-cta {
  color: var(--gwh-white);
  background-color: var(--gwh-navy);
  border-color: var(--gwh-navy);
}
.gwh-card-cta:hover {
  background-color: var(--gwh-saffron);
  border-color: var(--gwh-saffron);
  color: var(--gwh-white);
}

/* ---------- Events grid (Basel.com/en/events style cards) ---------- */
.events-grid {
  display: grid !important;
  gap: 16px;
  grid-template-columns: repeat(4, 1fr); /* desktop */
}
@media (max-width: 991px) { .events-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .events-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .events-grid { grid-template-columns: repeat(1, 1fr); } }

.basel-event-card {
  display: block;
  background: white;
  border: 1px solid #e8e8e8;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s;
}
.basel-event-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  color: inherit;
}

.bec-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f4f4f4;
}
.bec-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bec-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background: var(--gwh-navy);
}

.bec-body { padding: 12px 14px 14px; }

.bec-date {
  font-size: 0.75rem;
  font-weight: 700;
  color: #111;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.bec-time {
  font-weight: 400;
  color: #888;
  font-size: 0.7rem;
  margin-left: 6px;
}

.bec-divider {
  margin: 8px 0;
  border-color: #eee;
  opacity: 1;
}

.bec-category {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #999;
  margin-bottom: 3px;
}

.bec-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #111;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.3em;
}

.bec-location {
  font-size: 0.72rem;
  color: #666;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bec-footer {
  font-size: 0.7rem;
  color: #888;
  min-height: 1.2em;
}
.bec-price {
  font-weight: 700;
  color: #111;
  font-size: 0.78rem;
}
.bec-price-note {
  font-weight: 400;
  color: #999;
  font-size: 0.65rem;
}

/* ---------- Detail page hero ---------- */
.gwh-detail-hero {
  position: relative;
  height: 50vh;
  min-height: 320px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}
.gwh-detail-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18, 41, 63, 0.85) 0%, rgba(18, 41, 63, 0.15) 60%);
}
.gwh-detail-hero .container {
  position: relative;
  z-index: 1;
  color: var(--gwh-white);
}
.gwh-detail-hero h1 {
  color: var(--gwh-white);
}

/* ---------- Full-screen map page ---------- */
.gwh-map-wrap {
  position: relative;
  height: calc(100vh - 56px);
  min-height: 480px;
}
.gwh-map-wrap #full-map {
  height: 100%;
  width: 100%;
}
.gwh-map-sidebar {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  bottom: 0.75rem;
  width: 280px;
  max-width: calc(100% - 1.5rem);
  background: var(--gwh-white);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
  z-index: 1000;
  overflow-y: auto;
  transition: transform 0.2s ease;
}
.gwh-map-sidebar.collapsed {
  transform: translateX(calc(-100% - 1rem));
}
.gwh-map-sidebar-toggle {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1001;
  background: var(--gwh-navy);
  color: var(--gwh-white);
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
}
.gwh-map-layers-panel {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1000;
  background: var(--gwh-white);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
  padding: 0.75rem 1rem;
}
.gwh-map-popup-link {
  color: var(--gwh-saffron);
  font-weight: 600;
  text-decoration: none;
}

/* ---------- Community photo wall (#thisisguwahati) — 9:16 reels-style grid ---------- */
.community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 3px;
  width: 100%;
}

@media (min-width: 992px) {
  .community-grid {
    grid-template-columns: repeat(10, 1fr);
  }
}
@media (min-width: 576px) and (max-width: 991px) {
  .community-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (max-width: 575px) {
  .community-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.community-thumb {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  cursor: pointer;
  background: #1a3c5e;
}

.community-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
  display: block;
}

.community-thumb:hover img {
  transform: scale(1.05);
}

.community-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: white;
  font-size: 0.65rem;
  padding: 4px 6px;
  opacity: 0;
  transition: opacity 0.2s;
}

.community-thumb:hover .community-overlay {
  opacity: 1;
}

/* ---------- Community photo lightbox — full screen, no side gaps ---------- */
#community-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: none;
  align-items: center;
  justify-content: center;
}

#lb-image {
  height: 100vh;
  width: auto;
  max-width: 100vw;
  object-fit: contain;
  display: block;
}

#lb-embed {
  width: min(540px, 100vw);
  height: 100vh;
  overflow-y: auto;
  display: none;
}

#lb-prev,
#lb-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  font-size: 2.5rem;
  padding: 12px 18px;
  cursor: pointer;
  z-index: 10000;
  border-radius: 4px;
  transition: background 0.2s;
}
#lb-prev {
  left: 8px;
}
#lb-next {
  right: 8px;
}
#lb-prev:hover,
#lb-next:hover {
  background: rgba(255, 255, 255, 0.25);
}

#lb-close {
  position: fixed;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  z-index: 10000;
}

#lb-counter {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  z-index: 10000;
}

#lb-info {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: white;
  padding: 20px 16px 16px;
  text-align: center;
  z-index: 10000;
}

/* ---------- Footer ---------- */
footer.gwh-footer {
  background-color: var(--gwh-navy-dark);
}
footer.gwh-footer a.link-light:hover {
  color: var(--gwh-saffron) !important;
}
/* Safety net: Bootstrap's `.text-*-emphasis` utilities (e.g. .text-light-emphasis)
   resolve to a DARK color by default (they're meant to pair with a light/subtle
   background like .bg-light-subtle, not to mean "light-colored text") — using one
   inside this dark footer would be invisible again. Force it light here in case
   it gets reintroduced. */
footer.gwh-footer [class*="-emphasis"] {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ============================================================
   Header redesign — floating (over hero) + sticky (on scroll)
   ============================================================ */

/* ---------- Homepage hero (full-bleed, slider) ---------- */
/* Gradient is the fallback background — shown as-is when zero images are
   uploaded; .hero-bg-single / .hero-slider sit on top (z-index 0, same
   stacking context) covering it once at least one image exists. */
.hero-section {
  background: linear-gradient(135deg, var(--gwh-navy) 0%, var(--gwh-navy-dark) 100%);
}
.hero-bg-single {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-slide.active {
  opacity: 1;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.55));
}
.hero-slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 0.2s;
}
.hero-dot.active {
  background: white;
}

/* ---------- Internal page hero (/visit, /business, /events, /map/report) ---------- */
/* Side-by-side text+image layout on a light background — no dark full-bleed
   image behind these anymore, so no header-offset padding is needed here;
   the sticky header shows immediately instead (see alwaysShowSticky). */
.page-hero-img-placeholder {
  width: 100%;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 1.3rem;
  background: linear-gradient(135deg, var(--gwh-navy) 0%, var(--gwh-navy-dark) 100%);
}

/* ---------- Header (shared) ---------- */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 15px 0;
  height: 110px;
  display: flex;
  align-items: center;
  background: transparent;
  transition: background 0.3s, box-shadow 0.3s;
}
.header-logo {
  display: inline-flex;
  align-items: center;
}
.header-nav {
  gap: 1.5rem;
}
.header-mobile-toggle {
  cursor: pointer;
}

/* ---------- Floating header (transparent, over hero) ---------- */
.site-header--floating .logo-main {
  height: 80px;
  width: auto;
}
.site-header--floating .header-nav a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
}
.site-header--floating .header-nav a:hover {
  color: rgba(255, 255, 255, 0.75);
}
.site-header--floating .header-cta {
  color: #FF6B00 !important;
  font-weight: 700;
}
.site-header--floating .header-mobile-toggle {
  color: white;
  background: none;
  border: none;
  font-size: 1.5rem;
}

/* ---------- Sticky header (appears on scroll, site-wide) ---------- */
.site-header--sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: 70px;
  padding: 15px 0;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transform: translateY(-100%);
  transition: transform 0.25s ease;
}
.site-header--sticky.sticky-visible {
  transform: translateY(0);
}
.site-header--sticky .logo-sticky {
  height: 40px;
  width: auto;
  display: block;
}
.site-header--sticky .header-nav a {
  color: #111;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}
.site-header--sticky .header-nav a:hover {
  color: var(--gwh-saffron);
}
.site-header--sticky .header-cta {
  color: var(--gwh-saffron) !important;
}
.site-header--sticky .header-mobile-toggle {
  color: #111;
  background: none;
  border: none;
  font-size: 1.5rem;
}

/* ---------- Page content offset ---------- */
/* Pages with a hero (homepage only): the floating header overlays the
   500px .hero-section via position:absolute — no extra offset needed. */
.has-hero-header .site-content {
  padding-top: 0;
}
/* Pages without a hero (admin, auth, detail pages, /map): the sticky header
   is visible immediately (see views/layout/_header-sticky.ejs), so reserve
   its 70px height up front or content would render underneath it. */
.no-hero-header .site-content {
  padding-top: 70px;
}

/* ---------- Mobile nav slide-out (shared by both header states) ---------- */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
}
.mobile-nav-panel {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  background: white;
  z-index: 999;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}
.mobile-nav-panel a {
  color: #1a3c5e;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
}
.mobile-nav-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.5rem;
}
.mobile-nav-panel.open,
.mobile-nav-overlay.open {
  display: block;
}

/* ---------- Homepage static map-preview (replaces the embedded Leaflet
   mini-map — PageSpeed fix, see migration/generate_map_preview.js) ---------- */
.gwh-map-preview-link {
  cursor: pointer;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
  border-radius: 0.5rem;
}
.gwh-map-preview-link:hover,
.gwh-map-preview-link:focus-visible {
  opacity: 0.9;
  box-shadow: 0 0.5rem 1.25rem rgba(26, 60, 94, 0.25);
}

/* ---------- Homepage "Featured Tourist Spots" Basel-style mosaic grid ---------- */
/* Plain CSS Grid, deliberately not Bootstrap's .row/.col system, so it can't
   pick up flex/gutter behavior from Bootstrap 5 — the two coexist fine since
   nothing here shares a class name or selector specificity with Bootstrap. */
.gwh-mosaic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 100%;
  margin-inline: auto;
}
/* >=992px: the block is a perfect square (height == width) — two equal
   rows via grid-template-rows instead of a fixed px height, so the row
   height is always exactly half the container's actual rendered width. */
@media (min-width: 992px) {
  .gwh-mosaic-grid {
    aspect-ratio: 1 / 1;
    grid-template-rows: 1fr 1fr;
  }
}
.gwh-mosaic-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0.5rem;
  text-decoration: none;
}
/* Cards 1 and 6 (first and last of the 6-card layout) span 2 columns so
   the 4+... pattern reads as 2-then-1-1 / 1-1-then-2 across the two rows —
   still degrades safely with 4 or 5 cards (see note below) since CSS Grid
   just leaves the remaining track empty rather than breaking. */
.gwh-mosaic-card:nth-child(1),
.gwh-mosaic-card:nth-child(6) {
  grid-column: span 2;
}
.gwh-mosaic-card img,
.gwh-mosaic-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}
.gwh-mosaic-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background-color: var(--gwh-navy);
  color: var(--gwh-white);
}
.gwh-mosaic-card:hover img,
.gwh-mosaic-card:hover .gwh-mosaic-placeholder {
  transform: scale(1.05);
}
.gwh-mosaic-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 55%);
  pointer-events: none;
}
.gwh-mosaic-title {
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.75rem;
  z-index: 1;
  color: white;
  font-weight: 700;
  font-size: 1.05rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

@media (max-width: 991px) {
  /* The square constraint only applies >=992px (aspect-ratio is scoped to
     that same min-width above) — below it, natural fixed-px row heights. */
  .gwh-mosaic-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 240px;
  }
}

@media (max-width: 575px) {
  .gwh-mosaic-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }
  .gwh-mosaic-card:nth-child(1),
  .gwh-mosaic-card:nth-child(6) {
    grid-column: span 1;
  }
}

/* ---------- Homepage "Plan Your Trip" widget ---------- */
.gwh-plan-trip-panel {
  background: var(--gwh-grey-light);
  border-radius: 1rem;
  padding: 2.5rem 2rem;
}
.gwh-plan-trip-form {
  max-width: 900px;
  margin: 1.5rem auto 0;
}
.gwh-trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gwh-navy);
}

/* ---------- /plan-trip destination picker ---------- */
.gwh-dest-group-primary {
  background: var(--gwh-grey-light);
  border-radius: 0.5rem;
  padding: 1rem;
}
.gwh-dest-thumb-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 0.6rem;
  height: 100%;
  text-align: center;
  cursor: pointer;
  background: var(--gwh-white);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.gwh-dest-thumb-card:has(input:checked) {
  border-color: var(--gwh-saffron);
  background: rgba(255, 107, 0, 0.08);
}
.gwh-dest-thumb-card img,
.gwh-dest-thumb-card .gwh-dest-thumb-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.375rem;
}
.gwh-dest-thumb-card .gwh-dest-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: var(--gwh-grey-light);
}
.gwh-dest-thumb-card input[type="checkbox"] {
  margin: 0;
}
.gwh-dest-thumb-card span {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
}

/* ---------- Homepage intro statement ---------- */
.intro-statement .lead {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--gwh-grey-dark);
  font-weight: 400;
}
.intro-statement .lead strong {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 1.25rem;
  color: var(--gwh-navy);
}
@media (max-width: 575px) {
  .intro-statement .lead {
    font-size: 1rem;
  }
  .intro-statement .lead strong {
    font-size: 1.1rem;
  }
}