/* === Responsive — content-first breakpoints === */

@media (max-width: 1280px) {
  .b-bento--relax,
  .b-bento--cosmetology { grid-template-columns: repeat(4, 1fr); }
  .b-bento__item--large { grid-column: span 4; grid-row: span 1; }
  .b-bento__item--wide { grid-column: span 4; }
  .b-bento__item--medium,
  .b-bento__item--small { grid-column: span 2; }
}

@media (max-width: 1100px) {
  .b-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
  .b-footer__col--brand { grid-column: 1 / -1; }
}

/* Mid breakpoint — 920px (bento layout breaks) */
@media (max-width: 920px) {
  :root { --header-h: 72px; }

  .b-nav--desktop { display: none; }
  .b-burger { display: flex; }

  /* Hero */
  .b-hero__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .b-hero__text { transform: none; order: 1; }
  .b-hero__visual { order: 2; max-width: 480px; margin-inline: auto; }
  .b-hero__title { font-size: clamp(2.6rem, 2rem + 4vw, 4.5rem); }
  .b-hero__sub { font-size: var(--fs-md); }
  .b-hero__scroll-hint { display: none; }

  /* Manifesto */
  .b-manifesto__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .b-manifesto__tile--main { grid-row: auto; transform: rotate(-0.3deg); }
  .b-manifesto__tile--quote { transform: rotate(0.8deg); }
  .b-manifesto__tile--badge { transform: rotate(-0.5deg); align-self: center; max-width: 280px; margin: 0 auto; }

  /* First visit */
  .b-first-visit__inner {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
  .b-first-visit__header,
  .b-first-visit__body { grid-column: 1; }
  .b-first-visit__visual { grid-column: 1; grid-row: auto; max-height: 380px; }

  /* Menu list — stack on mobile */
  .b-menu-list__row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name caret"
      "prices prices";
    gap: 0.6rem 1rem;
    padding: 1.2rem 0.4rem;
  }
  .b-menu-list__name { grid-area: name; }
  .b-menu-list__caret { grid-area: caret; }
  .b-menu-list__leader { display: none; }
  .b-menu-list__prices {
    grid-area: prices;
    flex-wrap: wrap;
    gap: 0.8rem 1.4rem;
  }
  .b-menu-list__price-cell { flex-direction: row; align-items: baseline; gap: 0.5rem; min-width: 0; }

  /* Pakiety */
  .b-packages__grid { grid-template-columns: 1fr; }

  /* Relax / Cosmetology — bento → horizontal scroll */
  .b-bento--relax,
  .b-bento--cosmetology {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-inline: calc(var(--section-pad-x) * -1);
    padding-inline: var(--section-pad-x);
    scrollbar-width: thin;
    scrollbar-color: var(--belloria-gold) transparent;
  }
  .b-bento__item {
    flex: 0 0 280px;
    scroll-snap-align: start;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Team */
  .b-team__card {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .b-team__photo { aspect-ratio: 4 / 3; }
  .b-team__info { padding: 2rem; }

  /* Gallery */
  .b-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
    gap: 0.6rem;
  }
  .b-gallery__item--2x2 { grid-column: span 2; }
  .b-gallery__item--2x1 { grid-column: span 2; grid-row: span 1; }
  .b-gallery__item--1x2 { grid-column: span 1; grid-row: span 2; }

  /* Booking */
  .b-booking__inner {
    grid-template-columns: 1fr;
  }
  .b-booking__steps {
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
  }
  .b-booking__atmosphere { display: none; }

  /* FAQ */
  .b-faq__summary {
    grid-template-columns: auto 1fr auto;
    gap: 0.85rem;
  }
  .b-faq__q { font-size: 1.1rem; }
  .b-faq__answer { padding-left: 0.5rem; }

  /* Contact */
  .b-contact__layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Sticky CTA bar shows on mobile */
  .b-sticky-cta { display: block; }

  /* Body padding bottom for sticky bar */
  body[data-sticky-cta="1"] {
    padding-bottom: 76px;
  }

  /* Footer */
  .b-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
  .b-footer__col--brand { grid-column: 1; }
  .b-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Narrow — 580px */
@media (max-width: 580px) {
  :root {
    --section-pad-x: 1.2rem;
    --section-pad-y: 3.5rem;
  }

  .b-header__wordmark-bel { font-size: 1.1rem; }
  .b-header__wordmark-mas { font-size: 0.6rem; }

  .b-hero {
    padding-top: calc(var(--header-h) + 2rem);
    min-height: auto;
  }
  .b-hero__title { font-size: clamp(2.2rem, 1.8rem + 5vw, 3.6rem); }
  .b-hero__ornament--moon { display: none; }
  .b-hero__visual { aspect-ratio: 4 / 5; }
  .b-hero__ctas { flex-direction: column; align-items: stretch; }
  .b-hero__ctas .belloria-cta { justify-content: center; }
  .b-hero__eyebrow { font-size: 0.7rem; padding: 0.5rem 0.9rem; }

  .b-manifesto__tile { padding: 2rem 1.5rem; }
  .b-manifesto__lead { font-size: var(--fs-xl); }

  .b-services-medical__title,
  .b-services-relax__title,
  .b-team__title,
  .b-faq__title,
  .b-booking__title,
  .b-contact__title,
  .b-first-visit__title {
    font-size: clamp(2rem, 1.6rem + 3vw, 2.8rem);
  }

  .b-menu-list__name-text { font-size: var(--fs-lg); }

  .b-packages { padding: 2rem 1.4rem; border-radius: var(--radius-lg); }
  .b-packages__price { font-size: 1.7rem; }

  .b-bento__item { flex-basis: 88vw; }

  .b-gallery__grid {
    grid-auto-rows: 160px;
    gap: 0.4rem;
  }

  .b-booking__steps { grid-template-columns: 1fr; }
  .b-booking__step { padding: 0.9rem; }

  .b-faq__summary { padding: 1rem 0.4rem; }
  .b-faq__q-number { display: none; }

  .b-lightbox__close { top: 1rem; right: 1rem; }
  .b-lightbox__nav--prev { left: 0.5rem; }
  .b-lightbox__nav--next { right: 0.5rem; }
}

/* Print */
@media print {
  .b-header, .b-mobile-menu, .b-sticky-cta, .b-lightbox, .belloria-cta, .b-hero__scroll-hint { display: none !important; }
  body { background: white; color: black; }
  .b-hero { min-height: auto; padding: 1rem; background: white; color: black; }
}