/* ══════════════════════════════════════
   MOBILE FIRST — base is smallest screen
══════════════════════════════════════ */

/* Mobile nav — hidden until toggled */
#nav-hamburger { display: flex; }

#nav-links {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(300px, 85vw);
  height: 100vh;
  background: var(--color-navy);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-6);
  padding: var(--sp-16) var(--sp-8);
  z-index: var(--z-overlay);
  transition: right var(--t-base);
  box-shadow: -4px 0 32px rgba(0,0,0,0.4);
}

#nav-links.open { right: 0; }

#nav-links a {
  font-size: var(--fs-xl);
}

/* Mobile: shrink lang slider buttons slightly */
.lang-btn {
  padding: 4px 7px;
  font-size: 0.62rem;
}

/* Mobile: pull the language globe over to sit right next to the hamburger */
@media (max-width: 767px) {
  .lang-toggle { margin-left: auto; margin-right: var(--sp-2); }
}

/* Single column grids on mobile */
.fish-grid        { grid-template-columns: 1fr; }
.species-grid     { grid-template-columns: 1fr; }
.gallery-grid     { grid-template-columns: repeat(2, 1fr); }
.menu-grid        { grid-template-columns: repeat(2, 1fr); }
.contact-layout   { grid-template-columns: 1fr; }
.about-layout     { grid-template-columns: 1fr; }

.section { padding: var(--sp-12) var(--container-pad); }

/* ══════════════════════════════════════
   SMALL TABLET — 480px+
══════════════════════════════════════ */
@media (min-width: 480px) {
  .fish-grid    { grid-template-columns: repeat(2, 1fr); }
  .species-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .menu-grid    { grid-template-columns: repeat(3, 1fr); }
}

/* ══════════════════════════════════════
   TABLET — 768px+
══════════════════════════════════════ */
@media (min-width: 768px) {
  /* Switch to desktop nav */
  #nav-hamburger { display: none; }
  #nav-overlay   { display: none !important; }

  #nav-links {
    position: static;
    right: auto;
    height: auto;
    width: auto;
    flex-direction: row;
    justify-content: center;
    padding: 0;
    background: transparent;
    box-shadow: none;
    transition: none;
    gap: var(--sp-6);
    font-size: var(--fs-sm);
  }

  #nav-links a { font-size: var(--fs-sm); }

  .fish-grid        { grid-template-columns: repeat(3, 1fr); }
  .species-grid     { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid     { grid-template-columns: repeat(3, 1fr); }
  .menu-grid        { grid-template-columns: repeat(4, 1fr); }
  .contact-layout   { grid-template-columns: 1fr 1fr; }
  .about-layout     { grid-template-columns: 2fr 1fr; }

  .section { padding: var(--sp-20) var(--container-pad); }
}

/* ══════════════════════════════════════
   DESKTOP — 1024px+
══════════════════════════════════════ */
@media (min-width: 1024px) {
  .fish-grid        { grid-template-columns: repeat(4, 1fr); }
  .species-grid     { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid     { grid-template-columns: repeat(4, 1fr); }
  .menu-grid        { grid-template-columns: repeat(5, 1fr); }
  .about-layout     { grid-template-columns: 3fr 2fr; gap: var(--sp-16); }
  .contact-layout   { grid-template-columns: 1fr 1.3fr; }
}

/* ══════════════════════════════════════
   LANDSCAPE PHONES — wide but short
   The inline desktop nav (768px+) wraps onto two lines and looks cramped,
   so fall back to the hamburger menu on short landscape screens.
══════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) {
  #nav-hamburger { display: flex; }
  #nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(280px, 70vw);
    height: 100vh;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--sp-4);
    padding: var(--sp-12) var(--sp-8);
    background: var(--color-navy);
    box-shadow: -4px 0 32px rgba(0,0,0,0.4);
    overflow-y: auto;
    transition: right var(--t-base);
  }
  #nav-links.open { right: 0; }
  #nav-links a { font-size: var(--fs-lg); }
}

/* ══════════════════════════════════════
   PRINT
══════════════════════════════════════ */
@media print {
  #site-nav, .whatsapp-fab, #nav-hamburger { display: none; }
  section { padding: 1rem; }
  .fish-card { box-shadow: none; border: 1px solid #ccc; }
}