/* storefront/responsive.css — Breakpoints for everything above (laptop → tablet → phone).
   Part 8 of 9; files are linked in this order in views/storefront.html (cascade order matters). */

/* ============================================================================
   HEADER FIT
   The header's three groups (brand, page links, actions) never shrink, so as the
   screen narrows the header hides extras step by step instead of overflowing.
   Everything hidden here is also in the side drawer (MENU).
   ============================================================================ */
.site-header .container {
  max-width: 1560px;
}

@media (max-width: 1560px) {
  .btn-whatsapp-header {
    width: 40px;
    padding: 0;
  }
  .btn-whatsapp-header .wa-text {
    display: none;
  }
}

@media (max-width: 1440px) {
  .header-center-nav {
    gap: 20px;
  }
  .nav-pill {
    font-size: 0.86rem;
  }
  .nav-pill-secondary {
    font-size: 0.78rem;
  }
}

@media (max-width: 1180px) {
  .header-center-nav {
    display: none;
  }
}

@media (max-width: 560px) {
  :root {
    --header-h: 66px;
    --gutter: 16px;
  }
  .site-header .container {
    padding: 0 14px;
  }
  .header-inner {
    gap: 10px;
  }
  .header-left {
    gap: 12px;
  }
  .brand-logo-wrap {
    padding-inline-start: 12px;
    gap: 10px;
  }
  .brand-logo-img,
  .site-footer .brand-logo-img {
    width: 84px;
    height: 56px;
  }
  .hamburger-label,
  .header-pref-btn {
    display: none;
  }
  .header-right {
    gap: 8px;
  }
  .header-cart-btn {
    padding: 0 12px;
  }
}

@media (max-width: 400px) {
  /* The floating WhatsApp button is on every page, so drop the header one */
  .btn-whatsapp-header {
    display: none;
  }
  .brand-logo-title {
    font-size: 1.05rem;
  }
  .brand-logo-sub {
    letter-spacing: 0.12em;
  }
  .brand-logo-img,
  .site-footer .brand-logo-img {
    width: 69px;
    height: 46px;
  }
}

/* ============================================================================
   PAGE CONTENT
   ============================================================================ */
@media (max-width: 1024px) {
  /* Narrow screens: the text spans the photo, so darken it evenly */
  .page-hero-bg::after {
    background: rgba(20, 18, 15, 0.66);
  }
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .contact-layout,
  .visit-panel,
  .split,
  .contact-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .split-media img {
    aspect-ratio: 4 / 3;
  }
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gallery-grid .tile-tail {
    grid-column: 1 / -1;
  }
  .fd-split-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-hero {
    min-height: clamp(420px, 78vh, 640px);
  }
  .fd-cat-stories-hint {
    display: none;
  }
}

@media (max-width: 560px) {
  .btn {
    max-width: 100%;
    white-space: normal;
    padding-inline: 20px;
  }
  .home-hero .hero-actions .btn {
    flex: 1 1 100%;
  }
  .page-hero .hero-actions .btn {
    flex: 1 1 auto;
  }
  .team-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .stat {
    padding: 16px 6px;
  }
  .stat-value {
    font-size: 1.6rem;
  }
  .segmented {
    gap: 4px 20px;
  }
  .segmented-btn {
    font-size: 0.88rem;
  }
  .fd-toolbar-actions {
    width: 100%;
  }
  .fd-bag-btn {
    flex: 1 1 100%;
  }
  .fd-item-media {
    width: 96px;
    min-width: 96px;
    height: 96px;
  }
  .fd-modal-hero {
    height: 200px;
  }
  .fd-modal-hero-photo {
    height: min(280px, 36vh);
  }
  .fd-modal-body,
  .modal-body {
    padding: 18px;
  }
  .fd-modal-footer,
  .modal-header {
    padding: 14px 18px;
  }
  .tracker-step-label {
    font-size: 0.64rem;
  }
  .lightbox {
    padding: 64px 12px 84px;
  }
  .lightbox-prev,
  .lightbox-next {
    top: auto;
    bottom: 18px;
    margin-top: 0;
  }
  .floating-wa-container {
    bottom: 16px;
    inset-inline-end: 16px;
  }
  .floating-wa-btn {
    height: 48px;
    padding: 0 18px;
  }
  .fd-floating-order-bar {
    bottom: 76px;
  }
}

/* ============================================================================
   FOOTER
   ============================================================================ */
@media (max-width: 1100px) {
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }
  .footer-grid .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-grid .footer-col:last-child {
    grid-column: 1 / -1;
  }
  .footer-cta-actions,
  .footer-cta-actions .btn {
    width: 100%;
  }
}

/* ============================================================================
   PHONE BOTTOM BAR ON CATERING PAGES
   "Build your package" + WhatsApp, or the running total + Send while the form is on screen.
   It replaces the floating WhatsApp button (and the basket bar) there, so nothing overlaps.
   ============================================================================ */
@media (max-width: 760px) {
  body.has-builder-bar {
    --bar-h: 72px;
  }
  body.has-builder-bar .builder-bar:not([hidden]) {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--bar-h);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -12px 30px -20px rgba(29, 27, 24, 0.35);
    animation: mk-bar-in 0.4s var(--ease);
  }
  body.has-builder-bar .floating-wa-container,
  body.has-builder-bar .fd-floating-order-bar {
    display: none !important;
  }
  body.has-builder-bar .site-footer {
    padding-bottom: calc(var(--space-6) + var(--bar-h));
  }
  .builder-bar .btn {
    min-height: 48px;
  }
  .builder-bar-main {
    flex: 1;
  }
  .builder-bar-wa {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--whatsapp);
    color: #fff;
    font-size: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .builder-bar-total {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }
  .builder-bar-label {
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .builder-bar-total strong {
    font-family: var(--font-serif);
    font-size: 1.45rem;
    font-weight: 600;
  }
  .builder-bar .btn-whatsapp {
    flex-shrink: 0;
    padding-inline: 18px;
  }
}

@keyframes mk-bar-in {
  from {
    transform: translateY(100%);
  }
}

/* Touch screens: no hover lift (it sticks after a tap) */
@media (hover: none) {
  .package-card:hover,
  .contact-card:hover {
    transform: none;
  }
}