/* ==========================================================================
   LumaSKIN Clinic - Responsive
   Breakpoints: 768 (tablet), 1024 (desktop), 1280 (wide).
   Mobile-first base lives in other files. These are overrides.
   ========================================================================== */

/* ==========================================================================
   Below 1024 - collapse some grids
   ========================================================================== */
@media (max-width: 1024px) {
  /* Injectables matrix: 3 -> 2 columns */
  .matrix-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Newsletter drops below the brand, columns tighten */
  .footer__top {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer__news {
    justify-self: stretch;
    max-width: 460px;
  }

  .footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer__contact {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Below 768 - mobile
   ========================================================================== */
@media (max-width: 768px) {
  /* Nav: a normal full-width bar pinned to the top, not a floating pill. */
  .nav {
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-width: none;
    border-radius: 0;
    border-width: 0 0 1px 0;
    background: var(--luma-cream);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 12px clamp(16px, 5vw, 24px);
  }

  /* Keep the pinned bar from sliding away on this layout. */
  .nav.nav--hidden { transform: none; }

  /* Nav: collapse center links, show hamburger */
  .nav__links {
    display: none;
  }

  .nav__cta {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }

  /* Bento grid collapses to single column, no overlaps/rotations */
  .bento {
    grid-template-columns: 1fr;
  }

  .bento > * {
    grid-column: 1 / -1 !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* Splits stack */
  .split,
  .cta-split,
  .clinician {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Philosophy principles stack into a single column */
  .philosophy__index {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Gateways: drop the thumbnail, tighten the row */
  .gateway {
    grid-template-columns: 38px 1fr 32px;
    gap: 16px;
    padding: 20px 2px;
  }

  .gateway__thumb { display: none; }
  .gateway__name { font-size: 23px; }
  .gateway__cue { width: 32px; height: 32px; }

  /* Modal stacks: image on top, content scrolls */
  .modal__panel {
    grid-template-columns: 1fr;
    max-height: 90dvh;
    overflow-y: auto;
  }

  .modal__media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  /* Testimonial slider: smaller face bullets */
  .tbullet { width: 40px; height: 40px; gap: 8px; }
  .tbullet.is-active { transform: scale(1.2); }
  .tslider__bullets { gap: 9px; }
  .tquote__text { font-size: 22px; }

  /* Stats become 2x2, hide dividers */
  .statbar {
    grid-template-columns: 1fr 1fr;
    gap: 32px 16px;
  }

  .stat {
    padding-inline: 0;
  }

  .stat + .stat::before {
    display: none;
  }

  /* Timeline goes vertical */
  .timeline {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: left;
  }

  .timeline::before {
    top: 0;
    bottom: 0;
    left: 22px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .tstep {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 16px;
    row-gap: 6px;
    text-align: left;
    align-items: start;
  }

  /* Circle in the narrow column, name + description share the wide column.
     Without explicit placement the description falls into the 44px track
     and wraps one word per line. */
  .tstep__circle {
    margin: 0;
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .tstep__name {
    grid-column: 2;
    grid-row: 1;
  }

  .tstep__desc {
    grid-column: 2;
    grid-row: 2;
  }

  /* Carousel: dots on, arrows off */
  .carousel__nav {
    display: none;
  }

  .carousel__dots {
    display: flex;
  }

  /* Marquee: single row */
  .marquee__row--right {
    display: none;
  }

  /* Footer stacks, centered. Newsletter sits below the brand/subtitle. */
  .footer__main {
    padding-block: 56px 32px;
  }

  .footer__top {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 32px;
    padding-bottom: 36px;
  }

  .footer__brand-desc {
    margin-inline: auto;
  }

  .footer__news {
    justify-self: center;
    max-width: 460px;
    margin-inline: auto;
  }

  .footer__cols {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 36px;
  }

  .footer__contact {
    align-items: center;
    grid-column: auto;
  }

  .footer__social {
    justify-content: center;
  }

  .footer__bottom-inner {
    flex-direction: column;
    text-align: center;
    gap: 10px;
    padding-bottom: 36px;
  }

  /* Chatbot panel widens */
  .chat-panel {
    width: calc(100vw - 40px);
    right: 20px;
    height: 72dvh;
  }

  /* Pricing plans stack */
  .plans {
    grid-template-columns: 1fr !important;
  }

  /* 3-col card grids stack */
  .grid-3 {
    grid-template-columns: 1fr !important;
  }

  /* Injectables matrix + prices menu/standard stack */
  .matrix-grid,
  .pricelist,
  .standard {
    grid-template-columns: 1fr;
  }

  /* Hide overlap avatar row on skin plans hero */
  .overlap-row {
    display: none;
  }

  /* Hero splits */
  .hero-split {
    grid-template-columns: 1fr;
  }

  /* Home hero stacks: image band on top */
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: 55dvh auto;
  }

  .hero__media .img-placeholder {
    inset: 0;
    height: 100%;
  }

  .hero__media-overlay {
    background: linear-gradient(to bottom, transparent 50%, var(--luma-cream) 95%);
  }

  .hero__content {
    padding: 32px var(--space-container) 64px;
  }

  .hero__lead { max-width: none; }

  /* Page hero: hide media, content full width */
  .page-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .page-hero__media {
    display: none;
  }

  .page-hero__content {
    padding-top: 120px;
    padding-bottom: 56px;
  }

  /* Injectables warm hero: image on top */
  .page-hero--stack {
    display: flex;
    flex-direction: column-reverse;
  }

  .page-hero--stack .page-hero__media {
    display: block;
    min-height: 50dvh;
  }

  /* Tech split stacks, image above text */
  .tech-split,
  .tech-split--reverse {
    grid-template-columns: 1fr;
  }

  .tech-split--reverse .tech-split__media {
    order: 0;
  }

  .tech-split__media .img-placeholder {
    aspect-ratio: 16 / 9;
  }

  /* Booking hero collapses */
  .book-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .book-hero__left {
    min-height: 60dvh;
    padding-top: 120px;
  }

  .book-hero__right {
    padding: 0;
    display: block;
  }

  .booking-form {
    max-width: none;
    margin: -40px 20px 40px;
  }

  /* Sticky tabs sit just below nav */
  .tabs { top: 72px; }

  /* Journey month label inline */
  .milestone {
    grid-template-columns: 90px 1fr;
    gap: 16px;
  }

  .fields-2 {
    grid-template-columns: 1fr;
  }

  /* ---- Masthead heroes stack: image band on top, type below ---- */
  .masthead--split .masthead__body {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .masthead--split .masthead__media,
  .masthead--reverse .masthead__media {
    order: -1;
    min-height: 48dvh;
    margin: 0 calc(-1 * var(--space-container)) 32px;
  }

  .masthead--split .masthead__copy {
    max-width: none;
  }

  .masthead--media-bleed {
    min-height: 82dvh;
  }

  /* Slightly heavier scrim so overlaid type stays legible on small screens */
  .masthead--media-bleed .masthead__scrim {
    background:
      linear-gradient(180deg, rgba(20, 22, 15, 0.4) 0%, rgba(20, 22, 15, 0.2) 40%, rgba(20, 22, 15, 0.82) 100%);
  }

  .masthead--type {
    min-height: auto;
  }

  /* ---- Treatment index: compact text list (name + subtitle), no images ---- */
  .tindex__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 22px 2px;
  }

  /* Images are hidden on mobile; the full visual lives in the tap-to-open modal. */
  .tindex__media { display: none; }

  .tindex__cue { display: none; }
  .tindex__name { font-size: 27px; }
  .tindex__desc { max-width: none; }

  /* ---- Gallery: single-column stack, captions always visible ---- */
  .gallery {
    grid-template-columns: 1fr;
    grid-auto-rows: 58vw;
  }

  .gallery > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .gtile__desc {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   768 and up - restore desktop niceties
   ========================================================================== */
@media (min-width: 769px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Full-bleed page content on desktop: drop the 1320 cap and use the same
     edge padding as the navbar, so heroes, sections, and footer all align. */
  .container {
    width: 100%;
    max-width: 100vw;
    padding-inline: clamp(24px, 5vw, 80px);
  }

  /* Breathing room so hover scale/tilt on testimonial cards is not clipped */
  .marquee {
    padding-block: 1rem;
  }

  /* Home "Our Treatments" gallery breaks out to full viewport width.
     The negative margin equals the desktop .container padding, so the tiles
     reach the screen edges while the heading/button stay aligned. */
  .gallery {
    margin-inline: calc(-1 * clamp(24px, 5vw, 80px));
  }

  /* ========================================================================
     Desktop navbar: full-width sticky by default, collapses to a centered
     pill (logo + Book Now + hamburger) on scroll down, expands on scroll up.
     Mobile navbar is untouched (this only applies at >= 769px).
     ======================================================================== */
  .nav {
    top: 0;
    width: 100%;
    max-width: 100vw;             /* full bleed; morphs to a pill on collapse */
    padding: 16px clamp(24px, 5vw, 80px);
    border-width: 0 0 1px 0;      /* bottom hairline only when expanded */
    border-radius: 0;
    box-shadow: none;
    background: var(--luma-cream);   /* full-width bar is fully opaque */
    transform: translateX(-50%) translateY(0);
    transition: transform var(--dur-base) var(--ease-smooth),
                max-width var(--dur-base) var(--ease-smooth),
                padding var(--dur-base) var(--ease-smooth),
                border-radius var(--dur-base) var(--ease-smooth),
                background var(--dur-base) var(--ease-smooth),
                box-shadow var(--dur-base) var(--ease-smooth);
  }

  .nav.scrolled {
    background: var(--luma-cream);   /* stays fully opaque while expanded */
    box-shadow: 0 1px 0 var(--luma-border-light);
  }

  /* Hamburger is hidden while the bar is expanded. */
  .nav__hamburger {
    display: none;
  }

  /* ---- Collapsed pill state (scrolling down) ---- */
  .nav--collapsed {
    max-width: 500px;
    padding: 10px 12px 10px 24px;
    border-width: 1px;
    border-radius: var(--radius-pill);
    background: rgba(241, 238, 231, 0.82);
    box-shadow: var(--shadow-gold);
    transform: translateX(-50%) translateY(24px);
  }

  .nav--collapsed.scrolled {
    /* keep the floating pill translucent even though .scrolled is active */
    background: rgba(241, 238, 231, 0.82);
    box-shadow: 0 4px 32px rgba(20, 22, 15, 0.10);
  }

  /* Collapsed pill shows only logo, Book Now, and hamburger. */
  .nav--collapsed .nav__links {
    display: none;
  }

  .nav--collapsed .nav__cta {
    margin-left: auto;
  }

  .nav--collapsed .nav__hamburger {
    display: flex;
  }

  /* ========================================================================
     Home hero: pinned (sticky), full-bleed, 60/40. The next section curtains
     over it. Mobile keeps the simple stacked hero (base styles).
     ======================================================================== */
  .hero {
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1;
  }

  .hero__grid {
    display: grid;
    grid-template-columns: 60% 40%;
    align-items: center;
    column-gap: clamp(24px, 4vw, 64px);
    padding-top: 96px;
  }

  .hero__left {
    align-self: center;
    max-width: none;
  }

  .hero__right {
    display: block;
    position: relative;
    align-self: stretch;
    height: 100%;
  }

  /* Invisible anchor box defining where the morphing nav links sit at rest */
  .hero__navslot {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 58%;
  }

  /* Every section after the hero rides above it (the curtain) */
  main > section:not(.hero) {
    position: relative;
    z-index: 2;
  }
}