/* ===== ARTLOGIC THEME — MOBILE-FIRST ADDITIONS ===== */
/*
 * This file supplements style.css with:
 *  - Hero slider (all viewports, mobile-first)
 *  - Mobile layout overrides (base styles target mobile, then scale up)
 *  - Touch target enforcement
 *  - Active / focus states for interactive elements
 */

/* ============================================================
   HERO SLIDER
   ============================================================ */

.hero-slider {
  position: relative;
  width: 100%;
  min-height: 100svh; /* full viewport height on mobile */
  overflow: hidden;
  background: #0a2a2a;
}

/* On larger screens keep proportional */
@media (min-width: 768px) {
  .hero-slider { min-height: 85vh; }
}

@media (min-width: 1200px) {
  .hero-slider { min-height: 90vh; }
}

/* Slider track — horizontal strip of slides */
.slider-track {
  display: flex;
  height: 100%;
  width: 100%;
  position: absolute;
  inset: 0;
  transition: none; /* JS handles this via transform */
}

/* Individual slide */
.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.65s ease, visibility 0.65s ease;
  will-change: opacity;
}

.slide--active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* Background image */
.slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
  z-index: 0;
}

@media (min-width: 768px) {
  .slide-bg { object-position: 70% center; }
}

/* Gradient overlay — stronger on mobile for legibility */
.slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10,30,30,0.55) 0%,
    rgba(10,30,30,0.35) 50%,
    rgba(10,30,30,0.65) 100%
  );
  z-index: 1;
}

@media (min-width: 768px) {
  .slide-overlay {
    background: linear-gradient(
      90deg,
      rgba(255,255,255,0.88) 38%,
      rgba(255,255,255,0.2) 100%
    );
  }
}

/* Slide content */
.slide-content {
  position: relative;
  z-index: 2;
  padding: 5rem 1.5rem 7rem; /* extra bottom padding to clear dots */
  width: 100%;
  max-width: 100%;
  text-align: center;
}

@media (min-width: 768px) {
  .slide-content {
    text-align: left;
    max-width: 600px;
    padding: 4rem 1.5rem;
    margin-left: clamp(1.5rem, calc((100vw - 1400px) / 2 + 1.5rem), 8vw);
  }
}

/* Tag badge */
.slide-tag {
  display: inline-block;
  background: rgba(14,180,187,0.18);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 100px;
  margin-bottom: 1rem;
  border: 1px solid rgba(14,180,187,0.4);
}

@media (min-width: 768px) {
  .slide-tag {
    background: rgba(14,180,187,0.12);
    color: var(--primary);
    border-color: transparent;
  }
}

/* Slide heading */
.slide-content h1 {
  color: #fff;
  font-size: clamp(1.75rem, 6vw, 3rem);
  line-height: 1.15;
  margin-bottom: 1rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

@media (min-width: 768px) {
  .slide-content h1 {
    color: var(--on-surface);
    text-shadow: none;
  }
}

/* Slide subtitle */
.slide-subtitle {
  font-size: clamp(0.9rem, 2.5vw, 1.05rem);
  color: rgba(255,255,255,0.9);
  margin-bottom: 2rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

@media (min-width: 768px) {
  .slide-subtitle {
    color: var(--on-surface-variant);
    text-shadow: none;
    margin-left: 0;
    margin-right: 0;
  }
}

/* CTA buttons inside slide */
.slide-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

@media (min-width: 768px) {
  .slide-actions { justify-content: flex-start; }
}

.slide-actions .btn-primary,
.slide-actions .btn-outline {
  min-height: 44px; /* touch target */
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
}

@media (max-width: 400px) {
  .slide-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .slide-actions .btn-primary,
  .slide-actions .btn-outline {
    width: 100%;
    justify-content: center;
  }
}

/* --- Prev / Next arrow buttons --- */
.slider-prev,
.slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s, transform 0.2s, border-color 0.25s;
  -webkit-tap-highlight-color: transparent;
}

.slider-prev { left: 1rem; }
.slider-next { right: 1rem; }

.slider-prev:hover,
.slider-next:hover {
  background: rgba(14,180,187,0.55);
  border-color: rgba(14,180,187,0.7);
  transform: translateY(-50%) scale(1.08);
}

.slider-prev:active,
.slider-next:active {
  transform: translateY(-50%) scale(0.93);
}

@media (min-width: 768px) {
  .slider-prev { left: 1.5rem; }
  .slider-next { right: 1.5rem; }
}

/* Hide arrows on very small screens and show dots more prominently */
@media (max-width: 375px) {
  .slider-prev,
  .slider-next { display: none; }
}

/* --- Dots navigation --- */
.slider-dots {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.5);
  cursor: pointer;
  padding: 0;
  transition: background 0.25s, transform 0.2s, width 0.25s;
  -webkit-tap-highlight-color: transparent;
  min-width: 44px; /* touch target via padding trick below */
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
}

/* Visual pill dot — inactive */
.slider-dot::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background: rgba(255,255,255,0.4);
  border: 1.5px solid rgba(255,255,255,0.6);
  transition: background 0.3s, width 0.35s cubic-bezier(0.4,0,0.2,1), border-color 0.3s;
  overflow: hidden;
  position: relative;
}

/* Active dot — expands into a pill with animated progress fill */
.slider-dot--active::after {
  width: 32px;
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.8);
}

/* Progress fill inside active dot */
.slider-dot--active::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 8px;
  border-radius: 100px;
  background: #fff;
  animation: dot-progress 5.5s linear forwards;
  transform-origin: left center;
}

@keyframes dot-progress {
  from { clip-path: inset(0 100% 0 0 round 100px); }
  to   { clip-path: inset(0 0% 0 0 round 100px); }
}

.slider-dot:active::after {
  transform: scale(0.85);
}

/* ============================================================
   MOBILE-FIRST LAYOUT OVERRIDES
   Base styles = mobile. Larger overrides come after.
   ============================================================ */

/* --- Header: force burger on small screens --- */
@media (max-width: 767px) {
  .primary-nav,
  .header-phone,
  .header-top-row .lang-switcher {
    display: none !important;
  }

  .menu-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    min-width: 44px;
    min-height: 44px;
  }

  .header-inner {
    min-height: 60px;
    padding: 0 1rem;
  }

  /* Show language switcher only inside drawer on mobile */
  .header-top-row {
    gap: 0.75rem;
    padding: 0.4rem 0;
  }

  /* Keep btn-cita in header for mobile: shrink it */
  .btn-cita {
    font-size: 0.8rem;
    padding: 0.4rem 0.9rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* --- Mega menu: desktop-only --- */
@media (max-width: 767px) {
  .mega-menu,
  .mega-backdrop {
    display: none !important;
    pointer-events: none !important;
  }
}

/* --- Main content offset --- */
@media (max-width: 767px) {
  main { padding-top: 60px; }
}

/* --- Sections --- */
@media (max-width: 767px) {
  .section { padding: 3rem 0; }
  .section-header { margin-bottom: 2rem; }

  .container { padding: 0 1rem; }

  h1 { font-size: clamp(1.5rem, 6vw, 2rem); margin-bottom: 1rem; }
  h2 { font-size: clamp(1.25rem, 5vw, 1.75rem); margin-bottom: 0.85rem; }
  h3 { font-size: clamp(1rem, 4vw, 1.25rem); }
  p  { font-size: 0.95rem; }
}

/* --- Treatments grid: 1 col on mobile --- */
@media (max-width: 599px) {
  .treatments-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* 2-col on portrait tablet */
@media (min-width: 600px) and (max-width: 899px) {
  .treatments-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Touch targets on treatment cards */
.treatment-card {
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}

.treatment-card:active {
  transform: translateY(-1px);
  border-color: var(--primary);
  box-shadow: var(--shadow);
}

/* --- Stats grid --- */
@media (max-width: 479px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
  .stat-item .number { font-size: 2rem; }
}

@media (max-width: 319px) {
  .stats-grid { grid-template-columns: 1fr; }
}

/* --- Footer grid --- */
@media (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* --- Split section --- */
@media (max-width: 767px) {
  .split-section {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  /* Move image after text on mobile */
  .split-section > div:first-child { order: 2; }
  .split-content { order: 1; }
}

/* --- Contact section --- */
@media (max-width: 767px) {
  .contact-section {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .map-embed { height: 260px; }
}

/* --- Estética grid --- */
@media (max-width: 599px) {
  .estetica-grid {
    grid-template-columns: 1fr;
  }
  .estetica-card,
  .estetica-card.featured {
    height: 220px;
    grid-column: span 1;
  }
}

/* --- Form row --- */
@media (max-width: 599px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   TOUCH TARGETS — All interactive elements >= 44px
   ============================================================ */

/* Nav links */
.primary-nav > ul > li > a,
.drawer-nav .drawer-item > a,
.drawer-services-toggle {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Drawer items */
.drawer-cat-items li a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Drawer close */
.drawer-close {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

/* CTA buttons */
.btn-primary,
.btn-outline {
  min-height: 44px;
}

/* Language links */
.lang-link {
  min-height: 36px;
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.drawer-lang-switcher .lang-link {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Form controls */
.form-group input,
.form-group textarea,
.form-group select,
.webform-submission-form input[type="text"],
.webform-submission-form input[type="email"],
.webform-submission-form input[type="tel"],
.webform-submission-form input[type="date"],
.webform-submission-form select {
  min-height: 44px;
}

.form-submit,
.webform-submission-form .button,
.webform-submission-form [type="submit"] {
  min-height: 44px;
}

/* ============================================================
   ACTIVE / FOCUS STATES
   ============================================================ */

/* Global focus ring */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Remove focus ring from mouse interaction (handled by :focus-visible) */
:focus:not(:focus-visible) {
  outline: none;
}

/* Button active states */
.btn-primary:active {
  background: var(--primary-dark);
  transform: translateY(0) scale(0.97);
}

.btn-outline:active {
  background: rgba(14,180,187,0.12);
  transform: scale(0.97);
}

.btn-cita:active {
  background: #c9ac4e;
  transform: scale(0.97);
}

/* Link active */
.primary-nav > ul > li > a:active,
.drawer-nav .drawer-item > a:active {
  color: var(--primary);
  background: rgba(14,180,187,0.1);
}

/* Drawer services toggle active */
.drawer-services-toggle:active {
  background: rgba(14,180,187,0.06);
  color: var(--primary);
}

/* Treatment card active */
.treatment-card:active {
  transform: scale(0.98);
}

/* Estetica card active */
.estetica-card:active {
  transform: scale(0.99);
  box-shadow: var(--shadow);
}

/* Footer links */
.footer-col ul li a:active {
  color: var(--primary);
}

/* ============================================================
   MISC MOBILE POLISH
   ============================================================ */

/* Prevent double-tap zoom on buttons */
button,
[role="button"],
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Smooth scroll on iOS */
html {
  -webkit-overflow-scrolling: touch;
}

/* Images: prevent context menu long-press drag on mobile */
.hero-slider img,
.estetica-card img {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* Ensure hero section fills correctly on iOS with notch/safe areas */
.hero-slider {
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Mobile drawer: ensure it sits above everything including Safari toolbar */
.mobile-drawer {
  padding-bottom: env(safe-area-inset-bottom, 1rem);
}

/* ============================================================
   HERO SLIDER JS CLASS HELPERS (used by main.js)
   ============================================================ */

/* Auto-play progress bar */
.slider-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--primary);
  z-index: 20;
  width: 0;
  transition: width linear;
}

/* ============================================================
   BOOKING MODAL — MOBILE OVERRIDES
   ============================================================ */

/* On small screens: fill the full screen */
@media (max-width: 600px) {
  .modal-cita {
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    top: 0;
    left: 0;
    transform: translateY(8%) scale(0.97); /* closed: slightly below */
    border-radius: var(--radius) var(--radius) 0 0; /* rounded top only, slides from bottom */
    overflow-y: auto;
  }

  .modal-cita.is-open {
    transform: translateY(0) scale(1);
  }

  .modal-cita[open] {
    transform: translateY(0) scale(1);
  }

  /* Tighten modal padding on mobile */
  .modal-header {
    padding: 1rem 1.25rem 0.75rem;
  }

  .modal-body {
    padding: 1.25rem 1.25rem 1.75rem;
  }

  /* Nav buttons: stack on very small screens */
  .booking-nav {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .booking-nav .btn-primary,
  .booking-nav .btn-outline {
    flex: 1;
    min-width: 120px;
    justify-content: center;
  }
}

/* Treatment picker: 2 cols on narrow modal */
@media (max-width: 400px) {
  .treatment-picker {
    grid-template-columns: repeat(2, 1fr);
  }

  .treatment-pick-btn {
    padding: 0.75rem 0.35rem;
  }
}

/* Booking summary: single col fields on tiny screens */
@media (max-width: 400px) {
  .booking-field-group {
    grid-template-columns: 1fr;
  }

  .booking-privacy {
    grid-column: span 1;
  }
}

/* ============================================================
   HEADER — MOBILE OVERRIDES
   ============================================================ */

/* Prevent btn-cita overflow on very small screens */
@media (max-width: 400px) {
  .header-top-row {
    gap: 0.5rem;
    overflow: hidden;
  }

  .btn-cita {
    font-size: 0.75rem;
    padding: 0.35rem 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
  }
}

/* ============================================================
   MOBILE DRAWER — Z-INDEX & SAFE AREA
   ============================================================ */

.mobile-drawer {
  z-index: 10001; /* above everything */
  /* Safe-area bottom handled in MISC section */
}

/* ============================================================
   SERVICE PAGE — SIDEBAR ORDER
   ============================================================ */

/* Sidebar order is handled in style.css via order:-1 at max-width:900px.
   Ensure service-layout children can reorder */
@media (max-width: 900px) {
  .service-layout {
    display: flex;
    flex-direction: column;
  }

  /* Sidebar uses order:-1 from style.css; this ensures it renders first */
  .service-sidebar {
    width: 100%;
  }

  /* Collapse the ToC box on mobile — hide it, only keep the CTA */
  .service-toc-box {
    display: none;
  }

  /* Make the sidebar CTA look inline/horizontal on tablet */
  .sidebar-cta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    text-align: left;
    padding: 1.25rem 1.5rem;
  }

  .sidebar-cta p {
    margin: 0;
    flex: 1;
    min-width: 160px;
  }

  .sidebar-cta .btn-cita {
    width: auto;
    white-space: nowrap;
  }

  /* Contact block below sidebar CTA also full width */
  .sidebar-contact-block {
    margin-top: 0.75rem;
  }
}

/* On phone keep sidebar CTA stacked */
@media (max-width: 599px) {
  .sidebar-cta {
    flex-direction: column;
    text-align: center;
  }

  .sidebar-cta p { min-width: auto; }
  .sidebar-cta .btn-cita { width: 100%; }

  /* Hide contact block on mobile — reduce noise */
  .sidebar-contact-block { display: none; }
}

/* Service page: breadcrumb overflow */
@media (max-width: 600px) {
  nav[aria-label="Breadcrumb"] {
    overflow: hidden;
  }

  nav[aria-label="Breadcrumb"] > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
    display: inline-block;
    vertical-align: middle;
  }
}

/* ============================================================
   TREATMENT CARDS — TOUCH TARGETS & btn-book-card
   ============================================================ */

/* Ensure btn-book-card meets 44px touch target on mobile */
@media (max-width: 767px) {
  .btn-book-card {
    min-height: 44px;
    width: 100%;
    justify-content: center;
    align-self: stretch;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }

  /* Card actions row: stack nicely */
  .card-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .card-link-more {
    text-align: center;
  }
}

/* ============================================================
   NEWS LAYOUT — SIDEBAR ON MOBILE
   ============================================================ */

@media (max-width: 900px) {
  /* Sidebar appears after articles on mobile (default flow is fine).
     Disable sticky — already handled in style.css */
  .news-sidebar {
    margin-top: 2rem;
  }
}

/* ============================================================
   CONTACT PAGE — QUICK INFO STACKED
   ============================================================ */

@media (max-width: 768px) {
  .contact-booking-hero {
    gap: 2rem;
  }

  /* Keep quick-info items readable when stacked */
  .quick-info-item {
    padding: 0.75rem;
  }

  .quick-info-item span {
    font-size: 0.88rem;
    word-break: break-word;
  }

  /* Contact CTA buttons: full-width stack */
  .contact-booking-text > div[style] {
    flex-direction: column;
  }
}

/* ============================================================
   FOOTER — LINKS ROW WRAP & SPACING
   ============================================================ */

@media (max-width: 599px) {
  .footer-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .footer-social {
    width: 100%;
  }

  /* Legal nav: wrap and add breathing room */
  .footer-links > nav {
    gap: 1rem !important;
    flex-wrap: wrap;
  }

  /* Footer grid: already 1 col, just tighten gap */
  .footer-grid {
    gap: 1.5rem;
  }
}

/* ============================================================
   SECTION HEADER INLINE STYLE OVERRIDES (front page)
   Some section headers use inline display:flex — ensure they
   stack nicely on mobile.
   ============================================================ */

@media (max-width: 599px) {
  /* Section headers with inline flex+space-between (Dermatology, News) */
  .section-header[style] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    margin-bottom: 2rem !important;
  }

  /* "View all news" btn in section header */
  .section-header[style] .btn-outline {
    align-self: flex-start;
  }
}

/* ============================================================
   MISC SMALL VIEWPORT POLISHES
   ============================================================ */

/* Estetica book btn: always show on mobile (hover not available) */
@media (max-width: 767px) {
  .estetica-book-btn {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Floating WA: reduce size on small screens */
@media (max-width: 400px) {
  .floating-wa {
    bottom: 1.25rem;
    right: 1.25rem;
  }

  .floating-wa a {
    padding: 0.7rem;
    border-radius: 50%;
  }

  /* Hide text label on very small screens */
  .floating-wa .wa-label {
    display: none !important;
  }
}

/* Map embed height reduction on mobile */
@media (max-width: 480px) {
  .map-embed { height: 220px; }
}

/* Review aggregate + CTA: stack on mobile */
@media (max-width: 480px) {
  .review-aggregate {
    font-size: 0.82rem;
    padding: 0.5rem 1rem;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
}

/* ===== ADDITIONAL MOBILE FIXES ===== */

/*
 * 1. Update --header-h custom property to 60px on mobile so every
 *    consumer (booking-page-hero margin-top, sticky tops, etc.) uses
 *    the correct mobile header height.
 */
@media (max-width: 767px) {
  .site-header { --header-h: 60px; }
}

/*
 * 2. Contact page sidebar: remove sticky on mobile so it doesn't
 *    freeze mid-scroll. The sidebar naturally appears after the map
 *    in DOM order, which is the correct mobile sequence.
 */
@media (max-width: 900px) {
  .contact-page-sidebar {
    position: static;
    width: 100%;
  }
}

/*
 * 3. Booking page sidebar: remove sticky on mobile and ensure it
 *    stacks below the form (default DOM order is already correct).
 */
@media (max-width: 900px) {
  .booking-page-sidebar {
    position: static;
    width: 100%;
  }
}

/*
 * 4. Reviews carousel nav buttons: enforce 44px touch target on mobile.
 *    The desktop size is 40×40px which falls short of the touch minimum.
 */
@media (max-width: 767px) {
  .reviews-nav-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

/*
 * 5. Reviews carousel: ensure slides are truly full width at 1-card
 *    breakpoint and the track gap doesn't create horizontal overflow.
 */
@media (max-width: 479px) {
  .reviews-carousel {
    --rc-gap: 0rem;
  }
  .reviews-slide {
    flex: 0 0 100%;
  }
}

/*
 * 6. Service page hero image: the inline height:420px is too tall on
 *    small screens. Override via the known wrapper selector.
 */
@media (max-width: 767px) {
  .node--type-service div[style*="height:420px"],
  .node--type-service div[style*="height: 420px"] {
    height: 220px !important;
  }
}

/*
 * 7. Team card: on very narrow screens (≤360px) stack the avatar + name
 *    row vertically so nothing gets clipped.
 */
@media (max-width: 360px) {
  .team-member-identity {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  /* Older team-grid-2col card format — also stack */
  .team-grid-2col .treatment-card {
    flex-direction: column;
    gap: 1rem;
  }

  .team-grid-2col .treatment-card img {
    width: 72px;
    height: 72px;
  }
}

/*
 * 8. News layout: ensure the inner news-grid collapses to 1 column on
 *    mobile. The auto-fill minmax(280px) naturally does this but can
 *    produce 2 cols at 560–900px — explicit 1-col at narrow widths.
 */
@media (max-width: 599px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
}

/*
 * 9. BSF section (booking page form): ensure the treatment-picker--page
 *    grid stays at 2 cols max and individual pick buttons have enough
 *    tap height.
 */
@media (max-width: 767px) {
  .treatment-picker--page {
    grid-template-columns: repeat(2, 1fr);
  }

  .treatment-pick-btn {
    min-height: 44px;
  }
}

/*
 * 10. Booking page steps bar: on narrow screens the step labels overflow.
 *     Stack steps vertically or truncate labels.
 */
@media (max-width: 480px) {
  .bpage-steps {
    gap: 0.5rem;
    padding: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .bpage-step-label {
    display: none; /* hide text labels, keep numbered circles */
  }

  .bpage-step-sep {
    display: none;
  }
}

/*
 * 11. Contact page map height: reduce on phones to avoid dominating
 *     the viewport.
 */
@media (max-width: 599px) {
  .contact-map,
  .contact-map iframe {
    height: 260px !important;
  }
}

/*
 * 12. Service layout: ensure sidebar CTA btn-outline (WhatsApp) also
 *     meets the 44px touch target, since it uses btn-outline sizing
 *     which may be shorter than 44px at small font sizes.
 */
@media (max-width: 900px) {
  .sidebar-cta .btn-outline {
    min-height: 44px;
  }
}

/*
 * 13. FAQ grid: style.css already collapses at 768px, but add a safe
 *     override in case specificity is an issue from other sources.
 */
@media (max-width: 767px) {
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/*
 * 14. Header: expose language switcher inside mobile drawer.
 *     The .drawer-lang-switcher is shown; the header-bar version is hidden.
 *     Ensure drawer lang switcher is visible and has proper spacing.
 */
@media (max-width: 767px) {
  .drawer-lang-switcher {
    display: flex;
  }
}

/*
 * 15. btn-book-card: apply 44px min-height globally (not just ≤767px)
 *     since it's also tapped on tablet touchscreens.
 */
.btn-book-card {
  min-height: 44px;
}