/* ================================ */
/* RESPONSIVE                        */
/* ================================ */

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {

  /* Navbar */
  .navbar-nav { display: none; }
  .navbar-toggle { display: flex; }

  /* Hero */
  .hero { height: 87vh; min-height: 480px; }
  .hero-content { bottom: 200px; }
  .hero-wave svg { height: 80px; }

  /* Promo Bento — 2 columns */
  .promo-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "a b"
      "a c"
      "d e"
      "f f";
  }

  .promo-block--a { min-height: 500px; }
  .promo-block { min-height: 280px; }

  /* Categories — 4 columns */
  .categories-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .cat-card--sm { grid-column: span 2; }
  .cat-card--md { grid-column: span 2; }
  .cat-card--lg { grid-column: span 4; }

  /* Gallery — 3 columns */
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 220px;
  }

  /* Footer — 2 columns */
  .footer-columns {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }
}


/* ── Mobile Large (≤768px) ── */
@media (max-width: 768px) {

  :root {
    --navbar-height: 70px;
  }

  /* Hero */
  .hero { height: 87vh; min-height: 440px; }
  .hero-content { bottom: 190px; }
  .hero-video { transform: scale(1.4); }
  .hero-wave svg { height: 100px; }

  /* About */
  .about-container { max-width: 100%; }

  /* Promo Bento — single column */
  .promo-bento {
    grid-template-columns: 1fr;
    grid-template-areas:
      "a"
      "b"
      "c"
      "d"
      "e"
      "f";
  }

  .promo-block--a { min-height: 400px; }
  .promo-block { min-height: 300px; }
  .promo-block-content { padding: var(--space-lg); }

  /* Categories — 2 columns */
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cat-card--sm { grid-column: span 1; height: 220px; }
  .cat-card--md { grid-column: span 1; height: 260px; }
  .cat-card--lg { grid-column: span 2; height: 280px; }

  /* Gallery — 2 columns */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }

  .gallery-item--wide { grid-column: span 2; }
  .gallery-item--tall { grid-row: span 1; }

  /* Footer — single column */
  .footer-columns {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    text-align: center;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-col-links {
    align-items: center;
  }

  .footer-contact-item {
    justify-content: center;
  }

  .footer-social-link {
    width: 54px;
    height: 54px;
  }
  .footer-social-link svg {
    width: 26px;
    height: 26px;
  }
  .footer-contact-item svg {
    width: 24px;
    height: 24px;
  }
  .footer-link:hover {
    transform: none;
  }
}


/* ── Mobile Small (≤480px) ── */
@media (max-width: 480px) {

  :root {
    --navbar-height: 64px;
  }

  .navbar-logo-circle {
    width: 44px;
    height: 44px;
  }

  .navbar-logo-letter {
    font-size: var(--fs-lg);
  }

  .navbar-logo-circle::before,
  .navbar-logo-circle::after {
    width: 6px;
  }

  .navbar-logo-circle::before { left: 5px; }
  .navbar-logo-circle::after { right: 5px; }

  /* Hero */
  .hero { height: 87vh; min-height: 420px; }
  .hero-content { bottom: 180px; }
  .hero-title { font-size: 2.2rem; white-space: nowrap; }
  .hero-wave svg { height: 110px; }

  /* Categories — 1 column for some */
  .cat-card--sm { height: 200px; }
  .cat-card--md { height: 220px; }
  .cat-card--lg { height: 240px; }

  .cat-card-name {
    font-size: var(--fs-base);
  }

  /* Gallery */
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 180px;
  }

  /* Scroll Top */
  .scroll-top {
    width: 42px;
    height: 42px;
    bottom: var(--space-md);
    right: var(--space-md);
  }

  /* Mobile Menu */
  .mobile-menu-link {
    font-size: var(--fs-xl);
  }
}