/* ============================================================
   RESPONSIVE — Mobile-first breakpoints
   ============================================================ */

/* ---------- Safe area for notch devices ---------- */
body {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.footer {
  padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom));
}

/* ---------- Small phones (≤ 390px) ---------- */
@media (max-width: 390px) {
  :root {
    font-size: 14px;
  }

  .section {
    padding: var(--space-lg) var(--space-sm);
  }

  .section__title {
    font-size: clamp(1.2rem, 5.5vw, 2rem);
    letter-spacing: 0.1em;
  }

  .home__title {
    font-size: clamp(2rem, 12vw, 3rem);
  }

  .home__subtitle {
    font-size: var(--text-sm);
  }

  .home__poster {
    max-width: 95vw;
    margin: var(--space-md) auto;
  }

  /* Sidebar full width */
  .sidebar {
    width: 100vw;
    padding: 60px 16px 30px;
  }

  .sidebar__chips {
    gap: 10px;
  }

  .pantone-chip__color {
    width: 40px;
    min-height: 40px;
  }

  .pantone-chip__name {
    font-size: 0.7rem;
  }

  /* Menu board */
  .menu-item {
    font-size: var(--text-sm);
  }

  .menu-item__price {
    font-size: var(--text-xs);
  }

  .menu-category__title {
    font-size: var(--text-lg);
    letter-spacing: 0.1em;
  }

  .section__inner {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
    overflow-wrap: break-word;
  }

  /* Bean/Consult grids: 1 column */
  .beans-grid,
  .consult-grid {
    grid-template-columns: 1fr;
  }

  /* Gallery smaller */
  .gallery__item {
    width: 85%;
  }

  .gallery__img {
    height: 200px;
  }

  /* Contact delivery buttons stack */
  .contact__delivery-btns {
    flex-direction: column;
  }

  /* Footer */
  .footer__logo {
    width: 120px;
  }

  /* Header */
  .header {
    padding: 0 var(--space-sm);
  }

  .header__logo {
    font-size: var(--text-lg);
    letter-spacing: 0.15em;
  }

  /* Brand headings */
  .brand__heading {
    font-size: var(--text-lg);
    margin-top: var(--space-lg);
  }

  /* Brand quote */
  .brand__quote {
    font-size: var(--text-lg);
    padding: var(--space-sm) var(--space-md);
  }

  .brand__quote::before {
    font-size: 3rem;
  }

  /* Services headings */
  .services__heading {
    font-size: var(--text-lg);
  }

  /* Contact headings */
  .contact__heading {
    font-size: var(--text-lg);
  }

  /* Bean cards */
  .bean-card {
    padding: var(--space-md);
  }

  /* CTA button */
  .cta-btn {
    display: block;
    text-align: center;
    padding: var(--space-sm) var(--space-md);
  }

  /* Contact facilities */
  .contact__facilities {
    gap: var(--space-xs);
  }

  .contact__facilities span {
    font-size: var(--text-xs);
    padding: 4px var(--space-xs);
  }

  /* Brand facilities */
  .brand__facilities {
    gap: var(--space-xs);
  }

  .facility {
    font-size: var(--text-xs);
    padding: 4px var(--space-xs);
  }

  /* Footer */
  .footer {
    padding: var(--space-lg) var(--space-sm);
  }

  .footer__logo {
    width: 60px;
  }

  /* Menu hero */
  .menu__hero-photo {
    max-height: 250px;
  }
}

/* ---------- Phones (391px – 767px) ---------- */
@media (min-width: 391px) and (max-width: 767px) {
  .section {
    padding: var(--space-lg) var(--space-md);
  }

  .section__title {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
    letter-spacing: 0.15em;
  }

  .section__inner {
    overflow-wrap: break-word;
    word-break: keep-all;
  }

  .home__title {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }

  .home__poster {
    max-width: 90vw;
  }

  .sidebar {
    width: 280px;
  }

  .beans-grid,
  .consult-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .gallery__item {
    width: 80%;
  }

  .gallery__img {
    height: 220px;
  }

  /* Brand quote */
  .brand__quote {
    font-size: var(--text-lg);
    padding: var(--space-sm) var(--space-md);
  }

  .brand__quote::before {
    font-size: 3rem;
  }

  /* Services headings */
  .services__heading {
    font-size: var(--text-xl);
  }

  /* Contact map */
  .contact__map-placeholder {
    padding: var(--space-lg);
  }

  /* Menu hero */
  .menu__hero-photo {
    max-height: 300px;
  }

  /* Home footer */
  .home__footer {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    margin-top: var(--space-lg);
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
  }
}

/* ---------- Tablets (768px – 1023px) ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .section__inner {
    max-width: 640px;
  }

  .home__poster {
    max-width: 450px;
  }

  .sidebar {
    width: 300px;
  }

  .beans-grid,
  .consult-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery__item {
    width: 60%;
  }

  .gallery__img {
    height: 280px;
  }

  .menu__hero-photo {
    max-height: 400px;
  }
}

/* ---------- Large tablets & desktop (1024px+) ---------- */
@media (min-width: 1024px) {
  .section__inner {
    max-width: 720px;
  }

  .home__poster {
    max-width: 500px;
  }

  .gallery__item {
    width: 50%;
  }

  .gallery__img {
    height: 300px;
  }
}

/* ---------- Large desktop (1200px+) ---------- */
@media (min-width: 1200px) {
  .section {
    padding: var(--space-2xl) var(--space-xl);
  }

  .gallery__img {
    height: 320px;
  }

  .home__poster {
    max-width: 520px;
  }

  .menu__hero-photo {
    max-height: 500px;
  }
}

/* ---------- Touch device: disable custom cursor ---------- */
@media (hover: none), (pointer: coarse) {
  html, body, body * {
    cursor: auto !important;
  }
}

/* ---------- Print ---------- */
@media print {
  .header,
  .sidebar,
  .sidebar__overlay,
  .lightbox,
  .brush-splash-container {
    display: none !important;
  }

  .section {
    display: block !important;
    min-height: auto;
    page-break-inside: avoid;
  }

  body {
    background: white !important;
    color: black;
  }

  .footer {
    border-top: 1px solid #ccc;
  }
}