/* ============================================================
   NEMO DIVING CLUB — Responsive CSS
   Breakpoints: 1200px | 992px | 768px | 576px
   Mobile-first where possible; overrides for smaller screens.
   ============================================================ */

/* ── 1200px — Large Desktop ──────────────────────────────── */
@media (max-width: 1200px) {

  :root {
    --container-px: 2rem;
  }

  .nemo-stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }

  .nemo-footer__grid {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: var(--space-8);
  }
}

/* ── 992px — Tablet Landscape ────────────────────────────── */
@media (max-width: 992px) {

  :root {
    --container-px: 1.5rem;
    --header-height: 72px;
  }

  /* Header — hide nav, show hamburger */
  .nemo-nav,
  .nemo-header__cta .btn--lg {
    display: none;
  }

  .nemo-hamburger {
    display: flex;
  }

  .nemo-header__cta {
    gap: var(--space-2);
  }

  .nemo-header__cta .btn {
    padding: 0.625rem 1rem;
    font-size: 11px;
  }

  /* Stats — 2×2 grid */
  .nemo-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }

  .nemo-stat-item:not(:last-child) {
    border-right: none;
  }

  .nemo-stat-item:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,0.12);
  }

  .nemo-stat-item:nth-child(1),
  .nemo-stat-item:nth-child(2) {
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding-bottom: var(--space-8);
  }

  /* Footer — 2 cols */
  .nemo-footer__grid {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--space-10);
  }

  .nemo-footer__grid > *:first-child {
    grid-column: 1 / -1;
  }

  .nemo-footer__tagline {
    max-width: 100%;
  }

  /* Grids — 2 cols */
  .nemo-features-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .nemo-features-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Blog / package / dive site grids stay auto */
  .nemo-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Section padding */
  .nemo-section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .nemo-section--lg {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }

  /* Clip-path sections — reduce angle depth */
  .nemo-clip-bottom {
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
    padding-bottom: calc(var(--space-16) + 50px);
  }

  .nemo-clip-top {
    clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%);
    padding-top: calc(var(--space-16) + 50px);
  }

  /* Single post body — full width padding */
  .nemo-post-body {
    padding: var(--space-8) var(--container-px);
  }
}

/* ── 768px — Tablet Portrait ─────────────────────────────── */
@media (max-width: 768px) {

  :root {
    --container-px: 1.25rem;
    --header-height: 66px;
  }

  /* Hero text scale */
  .nemo-hero__title {
    font-size: clamp(var(--text-3xl), 8vw, var(--text-5xl));
  }

  .nemo-hero__actions {
    flex-direction: column;
    align-items: center;
  }

  .nemo-hero__actions .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* Section headers */
  .nemo-section-header {
    margin-bottom: var(--space-8);
  }

  /* Stats — keep 2×2 */
  .nemo-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Feature grid — 1 col */
  .nemo-features-grid--4,
  .nemo-features-grid--3,
  .nemo-features-grid--2 {
    grid-template-columns: 1fr;
  }

  .nemo-feature-box {
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--space-6);
  }

  .nemo-feature-box__icon {
    margin: 0;
    flex-shrink: 0;
  }

  .nemo-feature-box__text {
    text-align: left;
  }

  /* Package grid — 1 col */
  .nemo-packages-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }

  /* Dive sites — 1 col */
  .nemo-dive-sites-grid {
    grid-template-columns: 1fr;
  }

  /* Blog grid — 1 col */
  .nemo-blog-grid {
    grid-template-columns: 1fr;
  }

  /* Footer — 1 col stacked */
  .nemo-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .nemo-footer__grid > *:first-child {
    grid-column: 1;
  }

  .nemo-footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  /* Post nav — stack */
  .nemo-post-nav {
    grid-template-columns: 1fr;
  }

  .nemo-post-nav__link--next {
    text-align: left;
  }

  /* Single post hero */
  .nemo-single-hero {
    height: 45vh;
    min-height: 300px;
  }

  /* Share buttons */
  .nemo-share {
    flex-wrap: wrap;
  }

  /* Top bar — hide on mobile */
  .nemo-topbar {
    display: none;
  }

  /* 404 */
  .nemo-404__actions {
    flex-direction: column;
    align-items: center;
  }

  .nemo-404__actions .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  /* Grid shortcuts */
  .nemo-grid--2,
  .nemo-grid--3,
  .nemo-grid--4 {
    grid-template-columns: 1fr;
  }

  /* Section padding */
  .nemo-section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  .nemo-section--lg {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  /* Clip paths — simpler on small screens */
  .nemo-clip-bottom {
    clip-path: none;
    padding-bottom: var(--space-12);
  }

  .nemo-clip-top {
    clip-path: none;
    padding-top: var(--space-12);
    margin-top: 0;
  }
}

/* ── 576px — Small Mobile ─────────────────────────────────── */
@media (max-width: 576px) {

  :root {
    --container-px: 1rem;
    --header-height: 60px;
  }

  /* Stats — 2 cols on small mobile */
  .nemo-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .nemo-stat-item__number {
    font-size: var(--text-4xl);
  }

  /* Testimonials — single scroll */
  .nemo-testimonials-grid {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nemo-testimonials-grid::-webkit-scrollbar {
    display: none;
  }

  .nemo-testimonial-card {
    min-width: 280px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  /* Hero on smallest phones */
  .nemo-hero__label {
    font-size: 9px;
    letter-spacing: 0.15em;
  }

  .nemo-hero__subtitle {
    font-size: var(--text-base);
  }

  /* Buttons — full width on tiny screens */
  .nemo-hero__actions .btn {
    max-width: 100%;
  }

  /* Mobile nav links — larger tap targets */
  .nemo-mobile-nav__link {
    font-size: var(--text-2xl);
    padding: var(--space-2) 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Package card specs — wrap */
  .nemo-package-card__specs {
    flex-wrap: wrap;
  }

  /* Dive site specs — 2 cols */
  .nemo-dive-site__specs {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Post body */
  .nemo-post-body {
    padding: var(--space-6) var(--container-px);
  }

  .nemo-post-body .entry-content {
    font-size: var(--text-base);
  }

  /* Footer bottom */
  .nemo-footer__bottom-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
  }

  /* Section headers */
  .nemo-section-header h2::after {
    width: 40px;
    height: 3px;
  }

  /* 404 */
  .nemo-404__number {
    font-size: clamp(80px, 25vw, 140px);
  }

  .nemo-404__diver {
    font-size: 60px;
  }
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
  .nemo-header,
  .nemo-footer,
  .nemo-hero__bubbles,
  .nemo-hero__rays,
  .nemo-hamburger,
  .nemo-mobile-nav,
  .nemo-share,
  .nemo-post-nav {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .nemo-post-body {
    max-width: 100%;
    padding: 0;
  }
}