/* Responsive overrides — many layouts in /components use inline grids,
   so these rules use attribute selectors + !important to override them. */

/* ============================================================
   GLOBAL — apply on every viewport (image perf, safe areas)
   ============================================================ */
img {
  height: auto; /* preserve aspect ratio when width is constrained */
}

/* Respect iOS safe-area on the fixed header & footer */
@supports (padding: max(0px)) {
  header {
    padding-left: max(0px, env(safe-area-inset-left)) !important;
    padding-right: max(0px, env(safe-area-inset-right)) !important;
  }
  footer {
    padding-left: max(0px, env(safe-area-inset-left)) !important;
    padding-right: max(0px, env(safe-area-inset-right)) !important;
  }
}

/* ============================================================
   TABLET — up to 1024px
   ============================================================ */
@media (max-width: 1024px) {
  section { padding-top: 96px !important; padding-bottom: 96px !important; }
  footer  { padding-top: 96px !important; padding-bottom: 32px !important; }

  /* Loosen oversized 80–60px gaps */
  [style*="gap: 80px"] { gap: 56px !important; }
  [style*="gap: 70px"] { gap: 48px !important; }
  [style*="gap: 60px"] { gap: 48px !important; }
  [style*="gap: 50px"] { gap: 40px !important; }
  [style*="gap: 44px"] { gap: 36px !important; }

  /* Manifesto narrow first column */
  [style*="grid-template-columns: 240px 1fr"] {
    grid-template-columns: 160px 1fr !important;
    gap: 40px !important;
  }

  /* Nav: shrink the brand mark a touch */
  header img[alt="Ana Paula Celis logo"] {
    width: 200px !important;
    height: 58px !important;
  }
}

/* ============================================================
   MOBILE — up to 768px
   ============================================================ */
@media (max-width: 768px) {
  /* ---- Containers + section rhythm ---- */
  .container, .container-tight { width: min(100%, 92vw); }
  section { padding-top: 64px !important; padding-bottom: 64px !important; }
  footer  { padding-top: 72px !important; padding-bottom: 32px !important; }

  /* ---- Stack 2-column grids (any inline variant) ---- */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.05fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 0.9fr 1.1fr"],
  [style*="grid-template-columns: 1fr 1.1fr"],
  [style*="grid-template-columns: 1fr 1.08fr"],
  [style*="grid-template-columns: 1fr 1.3fr"],
  [style*="grid-template-columns: 1fr 1.6fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 240px 1fr"],
  [style*="grid-template-columns: auto 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* ---- Stack 3-column grids ---- */
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1.15fr 1fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* ---- 4-col footer columns ➝ 2x2 ---- */
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
  }

  /* ---- Experience timeline: 6 cols ➝ 2 ---- */
  [style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 20px !important;
  }

  /* ---- Hero mini-stats: 3 cols ➝ 3 cols compact, no inner borders ---- */
  [style*="grid-template-columns: repeat(3, auto)"] {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 16px !important;
  }
  #hero [style*="grid-template-columns: repeat(3, auto)"] > div {
    border-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 12px !important;
  }
  #hero [style*="grid-template-columns: repeat(3, auto)"] .display {
    font-size: 28px !important;
  }

  /* ---- Multi-column text + masonry ---- */
  [style*="column-count: 2"] { column-count: 1 !important; }
  [style*="column-count: 3"] { column-count: 2 !important; column-gap: 14px !important; }

  /* ---- justify-self: end (filter rows, footer CTA) align left on mobile ---- */
  [style*="justify-self: end"] { justify-self: start !important; }

  /* ---- Disable sticky on small screens ---- */
  [style*="position: sticky"] { position: static !important; }

  /* ---- Generic gap normalization on small screens ---- */
  [style*="gap: 80px"], [style*="gap: 70px"], [style*="gap: 60px"],
  [style*="gap: 56px"], [style*="gap: 54px"], [style*="gap: 50px"],
  [style*="gap: 44px"] { gap: 32px !important; }

  /* ---- Buttons: full-width on mobile, larger touch target ---- */
  .btn { padding: 16px 28px !important; min-height: 48px; }
  .btn-primary, .btn-rose, .btn-secondary { width: 100%; }
  .btn-ghost { width: auto !important; padding: 12px 0 !important; }

  /* ============================================================
     SECTION-SPECIFIC TWEAKS
     ============================================================ */

  /* ---- HERO ---- */
  #hero {
    padding-top: 96px !important;
    padding-bottom: 56px !important;
    min-height: auto !important;
  }
  #hero h1.display { font-size: clamp(40px, 11vw, 64px) !important; }
  #hero p.body-lg  { font-size: 16px !important; max-width: none !important; margin-bottom: 28px !important; }

  /* Reorder hero so the portrait image comes first (visual hook) */
  #hero > .container { display: flex !important; flex-direction: column !important; gap: 32px !important; }
  #hero > .container > div:nth-child(1) { order: 2; }
  #hero > .container > div:nth-child(2) { order: 1; }

  /* Constrain the hero portrait so it doesn't dominate small screens */
  #hero img[alt*="Ana Paula"] {
    aspect-ratio: 4/5 !important;
    max-height: 60vh;
    object-position: center 25%;
  }

  /* Hide decorative watermark + vertical caption on mobile */
  #hero [style*="opacity: 0.06"] { display: none !important; }
  #hero [style*="writing-mode"]  { display: none !important; }
  /* Move the floating "Reservas 2026" tag inline so it doesn't overflow */
  #hero [style*="bottom: -32px"] {
    position: static !important;
    margin-top: 16px !important;
    max-width: none !important;
  }

  /* Hero CTAs: stack with sensible widths */
  #hero .btn-primary { width: 100%; }
  #hero .btn-ghost { align-self: flex-start; }

  /* Hero stats divider line less harsh on mobile */
  #hero [style*="border-top: 1px solid var(--marfil)"] { margin-top: 48px !important; padding-top: 24px !important; }

  /* ---- Marquee: tighter, faster reflow ---- */
  .marquee { margin-top: 48px !important; padding: 18px 0 !important; }
  .marquee-track { font-size: 22px !important; gap: 28px !important; }

  /* ---- MANIFESTO ---- */
  #about { padding: 80px 0 !important; }
  #about h2.display { font-size: clamp(34px, 8vw, 52px) !important; margin: 16px 0 20px !important; }
  #about [style*="grid-template-columns: 1fr 1fr"] { gap: 12px !important; }
  #about img { aspect-ratio: 4/5 !important; }

  /* ---- BRIDAL MAKEUP / SERVICES ---- */
  #bridal-makeup h2.display { font-size: clamp(40px, 10vw, 64px) !important; }
  #bridal-makeup [style*="padding: 34px 36px"] {
    padding: 28px 24px !important;
  }
  #bridal-makeup h3.display { font-size: 28px !important; }
  #bridal-makeup .btn-rose { width: 100% !important; }

  /* Bridal: stack visuals above booking card; show auto carousel */
  .bridal-makeup__split {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .bridal-makeup__split .bridal-makeup__visuals {
    order: -1;
  }
  .bridal-gallery--grid {
    display: none !important;
  }
  .bridal-gallery--carousel-wrap {
    display: block !important;
  }

  /* ---- MASTERCLASSES ---- */
  #masterclasses { padding: 80px 0 !important; }
  #masterclasses .masterclasses__headline { font-size: clamp(52px, 16vw, 96px) !important; }
  #masterclasses .masterclasses__soon { font-size: 11px !important; letter-spacing: 0.18em !important; margin-top: 12px !important; }
  #masterclasses .masterclasses__tagline { font-size: 18px !important; margin-top: 14px !important; }
  #masterclasses .body-lg { font-size: 16px !important; }
  #masterclasses .btn { width: 100%; }

  /* ---- MAKEUP TEAM / GALLERY ---- */
  #makeup-team h2.display { font-size: clamp(40px, 10vw, 64px) !important; }
  #makeup-team [style*="grid-template-columns: 1.15fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 12px !important;
  }
  #makeup-team [style*="grid-template-columns: 1.15fr 1fr 1fr"] > :nth-child(1) {
    grid-column: 1 / -1 !important;
    aspect-ratio: 16/9 !important;
    padding: 0 !important;
    min-height: 0;
    object-fit: cover;
  }
  #makeup-team [style*="grid-template-columns: 1.15fr 1fr 1fr"] > img:nth-child(2),
  #makeup-team [style*="grid-template-columns: 1.15fr 1fr 1fr"] > img:nth-child(3) {
    aspect-ratio: 3/4 !important;
  }

  /* ---- NAV: keep nav-left container visible (hamburger lives there)  ---- */
  /* Hide only the desktop link buttons, not the nav containers themselves. */
  header > .container {
    grid-template-columns: auto auto 1fr !important;
    gap: 8px !important;
    padding: 8px 0 !important;
  }
  header > .container > nav.nav-left {
    justify-self: start !important;
    gap: 0 !important;
  }
  header > .container > nav.nav-left > button:not(.mobile-menu-toggle) {
    display: none !important;
  }
  header > .container > nav.nav-right { display: none !important; }
  header img[alt="Ana Paula Celis logo"] {
    width: 150px !important;
    height: 44px !important;
  }
  /* Show mobile menu trigger + reservar CTA (hidden inline at desktop) */
  header .mobile-menu-toggle { display: inline-flex !important; }
  header .mobile-menu-cta { display: inline-flex !important; justify-self: end !important; }

  /* ---- FOOTER ---- */
  footer h2.display { font-size: clamp(28px, 7.5vw, 44px) !important; }
  footer [style*="grid-template-columns: auto 1fr"] {
    grid-template-columns: auto 1fr !important;
    gap: 18px !important;
    align-items: center !important;
  }
  footer img[alt="Ana Paula Celis logo"] {
    width: 56px !important;
    height: 56px !important;
  }
  footer .btn-rose { width: 100% !important; }

  /* Footer bottom legal row: stack vertically */
  footer .container > div[style*="justify-content: space-between"]:last-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    text-align: left !important;
  }
}

/* ============================================================
   SMALL MOBILE — up to 480px
   ============================================================ */
@media (max-width: 480px) {
  section { padding-top: 56px !important; padding-bottom: 56px !important; }
  .container, .container-tight { width: min(100%, 90vw); }

  /* Single-column masonry */
  [style*="column-count: 3"] { column-count: 1 !important; }

  /* Single-column footer 4-col */
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Single-column timeline */
  [style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Hero stats: keep 3-up but smaller */
  #hero [style*="grid-template-columns: repeat(3, auto)"] .display {
    font-size: 24px !important;
  }
  #hero [style*="grid-template-columns: repeat(3, auto)"] .eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
  }

  /* Headlines a touch smaller */
  #hero h1.display { font-size: clamp(36px, 12vw, 56px) !important; }

  /* Footer CTA banner: stack heading + button */
  footer [style*="grid-template-columns: 1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Makeup Team: stack the 2 photos vertically */
  #makeup-team [style*="grid-template-columns: 1.15fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  #makeup-team [style*="grid-template-columns: 1.15fr 1fr 1fr"] > :nth-child(1) {
    grid-column: 1 / -1 !important;
    aspect-ratio: 4/3 !important;
  }
}

/* ============================================================
   HOVER-CAPABLE DEVICES ONLY — disable transforms on touch
   ============================================================ */
@media (hover: none) {
  .btn-primary:hover,
  .btn-rose:hover { transform: none !important; }
  .image-frame:hover img { transform: none !important; }
}