/* =====================================================
   ISLA AGUADA — RESPONSIVE PATCH  (v3 — authoritative)
   Single source of truth for all responsive overrides.
   Loaded last on every page so it wins specificity wars.
   ===================================================== */

/* ══════════════════════════════════════════════════════
   1. GLOBAL OVERFLOW LOCK
   Prevents any element from creating horizontal scroll.
   ══════════════════════════════════════════════════════ */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Images / embeds: never wider than their container.
   iframe is EXCLUDED — the hurricane viewport needs
   a fixed large height and absolute positioning. */
img, video, embed, object {
  max-width: 100%;
  height: auto;
}

/* NAV LOGO — hard override, nothing touches this */
.nav-logo img {
  height: 80px !important;
  width: auto !important;
  max-width: none !important;
}



/* ══════════════════════════════════════════════════════
   2. NAVIGATION — reinforcing rules only, no conflicts
   All nav logic lives in style.css. This section only
   adds mobile-critical overrides that must win.
   ══════════════════════════════════════════════════════ */

/* Desktop: hide toggle, ensure links are visible as flex row */
@media (min-width: 901px) {
  .nav-toggle  { display: none !important; }
  .nav-links   { display: flex !important; overflow: hidden; }
}

/* Mobile: show toggle, hide links (dropdown via .open) */
@media (max-width: 900px) {
  .nav-toggle  { display: flex !important; }
  .nav-links   { display: none !important; }
  .nav-links.open { display: flex !important; }
}


/* ══════════════════════════════════════════════════════
   3. TABLET GRID OVERRIDES  (901px → 900px)
   Collapses inline-style grids to responsive layouts.
   ══════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── 2-col section panels ── */
  section[style*="grid-template-columns:1fr 1fr"],
  section[style*="grid-template-columns: 1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
  }

  /* ── 2-col divs (all common variants) ── */
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1.2fr 1fr"],
  div[style*="grid-template-columns: 1.1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1.2fr"],
  div[style*="grid-template-columns: 1fr 420px"],
  div[style*="grid-template-columns: 1fr 400px"],
  div[style*="grid-template-columns: 1fr 380px"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* ── 3-col inline grids → 2 cols on tablet ── */
  div[style*="grid-template-columns: 1fr 1fr 1fr"],
  div[style*="grid-template-columns: repeat(3, 1fr)"],
  div[style*="grid-template-columns:repeat(3,1fr)"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* ── 4-col inline grids → 2 cols ── */
  div[style*="grid-template-columns: repeat(4, 1fr)"],
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* ── Peninsula cross-section diagram ── */
  div[style*="grid-template-columns: 1fr 60px 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* ── Large gaps: reduce ── */
  div[style*="gap: 80px"] { gap: 36px !important; }
  div[style*="gap: 60px"] { gap: 28px !important; }

  /* ── Contact page sidebar ── */
  .contact-wrap { grid-template-columns: 1fr !important; }

  /* ── Hurricane iframe column: allow it to sit below text col ── */
  div[style*="grid-template-columns: 1fr 1fr"][id="hurricanes"],
  #hurricanes div[style*="grid-template-columns: 1fr 1fr"] {
    gap: 32px !important;
  }
}


/* ══════════════════════════════════════════════════════
   4. MOBILE OVERRIDES  (≤ 600px)
   Full single-column, reduced padding everywhere.
   ══════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Collapse ALL inline multi-column grids to 1 col */
  div[style*="grid-template-columns"],
  section[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
    gap: 0 !important;
  }

  /* Restore breathing room between stacked items */
  div[style*="grid-template-columns"] > *,
  section[style*="grid-template-columns"] > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 2px;
  }

  /* ── Contact reassurance strip: keep 2×2 ── */
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns: repeat(4, 1fr)"] {
    display: grid !important;
    flex-direction: unset !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2px !important;
  }
  div[style*="grid-template-columns:repeat(4,1fr)"] > *,
  div[style*="grid-template-columns: repeat(4, 1fr)"] > * {
    margin-bottom: 0 !important;
  }

  /* ── Remove fixed min-widths that break layout ── */
  div[style*="min-width: 160px"],
  div[style*="min-width: 150px"],
  div[style*="min-width: 140px"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ── Hurricane iframe: let it scroll within its container ── */
  .hurricane-viewport {
    height: 380px !important;
  }

  /* ── Section / container padding ── */
  .section        { padding: 48px 0; }
  .container      { padding: 0 16px; }
  .pull-quote     { padding: 48px 16px; }
  .site-footer    { padding: 40px 16px 28px; }
  .reception-info { padding: 32px 16px; }
  .expedition-border { padding: 32px 16px; }

  /* ── Hero heights ── */
  .page-hero      { height: 240px; }
  .page-hero-content h1 { font-size: clamp(1.3rem, 6vw, 2rem); }
  .dining-hero    { min-height: 400px; }

  /* ── Footer ── */
  .footer-bottom  { flex-direction: column; text-align: center; }

  /* ── Staff image panels ── */
  .staff-split { flex-direction: column !important; }
  .staff-split > div,
  .staff-split > figure { width: 100% !important; min-height: 280px; }

  /* ── Amenity card images: shorter on mobile ── */
  .amenity-card img {
    height: 240px;
    object-position: left bottom;
  }
}


/* ══════════════════════════════════════════════════════
   5. AMENITY CARD IMAGE POSITION (all sizes)
   Keep object-position left so embedded caption text
   in the lower-left of each photo is never cropped.
   ══════════════════════════════════════════════════════ */
.amenity-card img {
  object-position: left center;
}

@media (max-width: 900px) {
  .amenity-card img {
    height: 280px;
    object-position: left bottom;
  }
}


/* ══════════════════════════════════════════════════════
   6. SAFETY PAGE — HURRICANE IFRAME VIEWPORT
   Specific overrides so the iframe is never squashed
   by the global img/video max-width rule.
   ══════════════════════════════════════════════════════ */
.hurricane-viewport {
  /* Viewport is sized via inline style on the element;
     these just ensure it can't break the page layout */
  max-width: 100%;
  overflow: hidden;
}

.hurricane-viewport iframe {
  /* Override any global iframe max-width reset */
  max-width: none !important;
  width: 100% !important;
}

/* On small phones: shrink the viewport height a little */
@media (max-width: 480px) {
  .hurricane-viewport {
    height: 360px !important;
  }
}