/* ════════════════════════════════════════════════════════
   BEAUTY BY JAS KAUR — Responsive Layer
   responsive.css
   
   Loaded last on every page. Covers:
   ─────────────────────────────────
   · 3 breakpoints: 1024px · 768px · 480px · 375px
   · Touch target minimums (44×44px)
   · Image sizing + lazy-load hints
   · Typography fluid safety
   · Hamburger nav
   · Per-page component fixes not caught in page CSS
   · Print basics
════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   BASE — applies at all sizes
══════════════════════════════════════════════════════ */

/* All images fluid */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Prevent horizontal scroll site-wide */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Minimum touch target for all interactive elements */
button,
a,
input,
select,
textarea,
[role="button"],
[tabindex="0"] {
  -webkit-tap-highlight-color: transparent;
}

/* Ensure nav hamburger and close are easy to tap */
.nav__hamburger,
.nav__mobile-close,
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  min-width: 44px;
  min-height: 44px;
}

/* ══════════════════════════════════════════════════════
   DESKTOP — ≥ 1280px
══════════════════════════════════════════════════════ */
@media (min-width: 1280px) {

  /* Hero images fill but don't distort on ultra-wide */
  .hero__bg img,
  .about-hero__img img,
  .services-hero__img img {
    object-position: center 20%;
  }

  /* Portfolio grid — 4 columns on large screens */
  .portfolio-grid {
    column-count: 4;
  }
}

/* ══════════════════════════════════════════════════════
   TABLET — ≤ 1024px
══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── Nav ── */
  .nav__links,
  .nav__book {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }

  .nav__mobile {
    display: flex;
  }

  /* ── Hero images ── */
  .hero { min-height: 560px; }
  .services-hero { min-height: 360px; }

  /* ── Featured grid: 2 columns ── */
  .featured-grid__images {
    grid-template-columns: 1fr 1fr;
  }

  .featured-grid__item:nth-child(2),
  .featured-grid__item:nth-child(3) {
    margin-top: 0 !important;
  }

  /* ── About teaser: stack ── */
  .about-teaser__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* ── Service cards: 2 at a time ── */
  .service-card {
    flex: 0 0 calc(50% - 12px);
    min-width: 220px;
  }

  /* ── Policies: 2 cols ── */
  .policies-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ── Add-ons: 2 cols ── */
  .addons-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ── What-next: 2 cols ── */
  .what-next__steps {
    grid-template-columns: 1fr 1fr;
  }

  /* ── Contact: stack columns ── */
  .contact-inner {
    grid-template-columns: 1fr;
  }

  .contact-info {
    position: static;
  }

  /* ── About story: stack ── */
  .about-story__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about-story__left {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
  }

  /* ── About experience: stack ── */
  .about-experience__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about-experience__left {
    position: static;
  }

  /* ── Instagram: 3 col ── */
  .instagram__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .instagram__grid .ig-slot:nth-child(n+4) {
    display: none;
  }

  /* ── Portfolio: 2 col ── */
  .portfolio-grid {
    column-count: 2;
  }

  /* ── Portfolio hero right col hidden ── */
  .portfolio-hero__right {
    display: none;
  }

  /* ── Services intro: stack ── */
  .services-intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* ── Prep section: stack ── */
  .prep-section__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .prep-section__left { position: static; }
}

/* ══════════════════════════════════════════════════════
   MOBILE — ≤ 768px
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Spacing ── */
  :root {
    --space-lg: 56px;
    --space-xl: 64px;
    --col-pad:  5%;
  }

  /* ── Section padding reset ── */
  .section,
  .about-story,
  .about-style,
  .about-experience,
  .addons-section,
  .prep-section,
  .policies-section,
  .what-next,
  .booking-banner,
  .contact-section,
  .portfolio-grid-section,
  .service-list {
    padding-left: 5%;
    padding-right: 5%;
  }

  /* ── Nav height ── */
  .nav {
    padding: 20px 5%;
  }

  .nav.scrolled {
    padding: 14px 5%;
  }

  /* ── Page heroes: shorter ── */
  .about-hero {
    height: 65vh;
    min-height: 400px;
  }

  .services-hero {
    height: 50vh;
    min-height: 320px;
  }

  /* ── Hero: tighter text ── */
  .hero__content {
    padding: 0 5% 8vh;
  }

  .hero__content h1 {
    font-size: clamp(3rem, 12vw, 5rem) !important;
    line-height: 0.95;
  }

  .hero__sub {
    font-size: 0.6rem !important;
    letter-spacing: 0.22em !important;
  }

  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px !important;
  }

  .hero__actions .btn {
    width: 100%;
    max-width: 260px;
    text-align: center;
  }

  .hero__scroll-hint {
    display: none;
  }

  /* ── About hero heading ── */
  .about-hero__content h1 {
    font-size: clamp(3rem, 13vw, 5rem) !important;
  }

  .about-hero__scroll { display: none; }

  /* ── Services hero heading ── */
  .services-hero__content h1 {
    font-size: clamp(2.8rem, 12vw, 4rem) !important;
  }

  /* ── Portfolio hero heading ── */
  .portfolio-hero__left h1 {
    font-size: clamp(2.8rem, 13vw, 4rem) !important;
  }

  /* ── Contact hero heading ── */
  .contact-hero__left h1 {
    font-size: clamp(2.4rem, 11vw, 3.5rem) !important;
  }

  .contact-hero__right { display: none; }

  /* ── Section headings ── */
  h2 {
    font-size: clamp(2rem, 8vw, 3rem) !important;
  }

  /* ── Featured grid: 2 col ── */
  .featured-grid__images {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  /* ── About story: fully stacked ── */
  .about-story__left {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .about-story__portrait::before {
    display: none;
  }

  /* ── About style grid: 2 col ── */
  .about-style__grid {
    grid-template-columns: 1fr 1fr;
  }

  .about-style__feature-img {
    aspect-ratio: 16 / 6;
  }

  /* ── Experience stats: row ── */
  .experience-stats {
    flex-direction: row;
    gap: 0;
  }

  .stat {
    flex: 1;
    border-bottom: none;
    border-right: 1px solid var(--silk);
    padding-bottom: 0;
    padding-right: 20px;
    padding-left: 20px;
  }

  .stat:first-child { padding-left: 0; }
  .stat:last-child  { border-right: none; padding-right: 0; }

  .stat__number {
    font-size: clamp(2rem, 6vw, 3rem) !important;
  }

  /* ── Timeline: tighter ── */
  .timeline-item {
    grid-template-columns: 64px 1fr;
    gap: 16px;
  }

  /* ── Service items: stacked ── */
  .service-item {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 44px 0;
  }

  .service-item__num {
    font-size: 2rem;
  }

  .service-item__pricing {
    grid-column: 1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    border-top: 1px solid var(--silk);
    padding-top: 16px;
    margin-top: 4px;
  }

  .service-item__desc {
    max-width: 100%;
  }

  /* ── Policies / addons: 1 col ── */
  .policies-grid {
    grid-template-columns: 1fr;
  }

  .addons-grid {
    grid-template-columns: 1fr;
  }

  /* ── What next: 1 col ── */
  .what-next__steps {
    grid-template-columns: 1fr;
  }

  /* ── Form: full-width fields ── */
  .form-row--two {
    grid-template-columns: 1fr;
  }

  .form-submit {
    width: 100%;
    text-align: center;
    padding: 16px 24px;
  }

  /* ── Portfolio: sticky filter ── */
  .portfolio-filter {
    top: 58px;
    padding: 20px 5%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .filter-inner {
    flex-wrap: nowrap;
    min-width: max-content;
    gap: 6px;
  }

  .filter-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ── Portfolio grid: 2 col ── */
  .portfolio-grid {
    column-count: 2;
    column-gap: 5px;
  }

  .portfolio-item {
    margin-bottom: 5px;
  }

  /* ── Lightbox controls: closer to edges ── */
  .lightbox__prev { left: 6px; width: 40px; height: 40px; }
  .lightbox__next { right: 6px; width: 40px; height: 40px; }
  .lightbox__close { top: 14px; right: 14px; width: 40px; height: 40px; }

  /* ── Instagram: 3 col ── */
  .instagram__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }

  .instagram__grid .ig-slot:nth-child(n+4) {
    display: block;
  }

  .instagram__grid .ig-slot:nth-child(n+7) {
    display: none;
  }

  /* ── Reviews: bigger tap targets on dots ── */
  .reviews__dot {
    padding: 8px 0;
    height: auto;
  }

  .reviews__dots {
    gap: 8px;
  }

  /* ── Slider controls: centered ── */
  .slider-controls {
    justify-content: center;
  }

  /* ── CTA banner ── */
  .booking-banner {
    padding: 80px 5%;
  }

  .booking-banner__inner h2 {
    font-size: clamp(2.2rem, 9vw, 3.5rem) !important;
  }

  .booking-banner__inner .btn {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }

  /* ── Footer ── */
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

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

  /* ── Style pillars: 1 col ── */
  .about-style__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ══════════════════════════════════════════════════════
   SMALL MOBILE — ≤ 480px
══════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Typography ── */
  h1 { font-size: clamp(2.6rem, 13vw, 3.6rem) !important; }
  h2 { font-size: clamp(1.9rem, 9vw, 2.4rem)  !important; }
  h3 { font-size: clamp(1.3rem, 6vw, 1.8rem)  !important; }

  /* ── Featured: show 2 cols still, not 1 ── */
  .featured-grid__images {
    grid-template-columns: 1fr 1fr;
  }

  .featured-grid__item:nth-child(n+3) {
    display: none;
  }

  /* ── About style: 1 col ── */
  .about-style__grid {
    grid-template-columns: 1fr;
  }

  /* ── Experience stats: stack ── */
  .experience-stats {
    flex-direction: column;
    gap: 20px;
  }

  .stat {
    border-right: none;
    border-bottom: 1px solid var(--silk);
    padding: 0 0 20px 0;
  }

  .stat:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  /* ── Portfolio: 1 col ── */
  .portfolio-grid {
    column-count: 1;
  }

  /* ── Instagram: 2 col ── */
  .instagram__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .instagram__grid .ig-slot:nth-child(n+5) {
    display: none;
  }

  /* ── Timeline: condensed ── */
  .timeline-item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-left: 20px;
  }

  .timeline-item__year {
    font-size: 0.6rem;
  }

  /* ── Service includes: hidden (clean mobile) ── */
  .service-item__includes {
    display: none;
  }

  /* ── Addons: single col ── */
  .addons-grid {
    grid-template-columns: 1fr;
  }

  /* ── Form confirmation: tighter padding ── */
  .form-confirmation {
    padding: 28px 20px;
  }

  /* ── Booking banner: tighter ── */
  .booking-banner {
    padding: 64px 5%;
  }

  /* ── Nav mobile: narrower ── */
  .nav__mobile {
    width: 100%;
    max-width: 100%;
    padding: 90px 32px 40px;
  }

  /* ── Footer logo smaller ── */
  .footer__logo,
  .footer__logo-name {
    font-size: 1.2rem !important;
  }
}

/* ══════════════════════════════════════════════════════
   EXTRA SMALL — ≤ 375px (iPhone SE, small Android)
══════════════════════════════════════════════════════ */
@media (max-width: 375px) {

  :root { --col-pad: 4%; }

  .nav { padding: 18px 4%; }

  .hero__content h1 {
    font-size: clamp(2.4rem, 13vw, 3.2rem) !important;
  }

  .btn {
    font-size: 0.58rem !important;
    padding: 14px 28px !important;
    letter-spacing: 0.22em !important;
  }

  .eyebrow {
    letter-spacing: 0.22em !important;
  }

  .service-item__price {
    font-size: 1.6rem !important;
  }

  .reviews__dot {
    width: 18px !important;
  }

  .reviews__dot.active {
    width: 30px !important;
  }

  .filter-btn {
    padding: 8px 14px !important;
    font-size: 0.56rem !important;
  }
}

/* ══════════════════════════════════════════════════════
   TOUCH DEVICES — hover:none
   (removes hover-only effects that feel broken on touch)
══════════════════════════════════════════════════════ */
@media (hover: none) {

  /* Remove card hover transforms — feels janky on touch */
  .service-card:hover,
  .style-pillar:hover,
  .policy-card:hover,
  .addon-card:hover,
  .next-step:hover {
    transform: none;
  }

  /* Remove zoom on portfolio images */
  .portfolio-item:hover .portfolio-item__img {
    transform: none;
  }

  /* Remove Instagram zoom */
  .ig-slot:hover img {
    transform: none;
  }

  /* Keep overlay still appears on touch (via JS tap) */
  .portfolio-item__overlay {
    opacity: 0;
  }

  /* Featured grid image: no zoom on tap */
  .featured-grid__item:hover img {
    transform: none;
  }

  /* Button press feel — scale instead of color swap */
  .btn:active {
    transform: scale(0.97);
    opacity: 0.9;
  }

  /* Form fields: prevent iOS zoom on focus (font-size >= 16px) */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px !important;
  }
}

/* ══════════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__bg img {
    animation: none !important;
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════════════ */
@media print {

  .nav,
  .nav__hamburger,
  .nav__mobile,
  .booking-banner,
  .instagram,
  .footer,
  .hero__scroll-hint,
  .slider-controls,
  .reviews__dots,
  .lightbox,
  .portfolio-filter {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  h1, h2, h3 { page-break-after: avoid; }
  img { max-width: 100%; page-break-inside: avoid; }
}

/* ══════════════════════════════════════════════════════
   iOS SAFARI — 100vh fix using --vh custom property
══════════════════════════════════════════════════════ */

/* Hero full-height uses --vh if available */
.hero {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

.about-hero {
  height: 90vh;
  height: calc(var(--vh, 1vh) * 90);
}

/* Mobile nav full height */
.nav__mobile {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

/* ══════════════════════════════════════════════════════
   FILTER BAR — horizontal scroll hint on mobile
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  .portfolio-filter {
    position: relative;
  }

  .portfolio-filter.can-scroll-right::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--white));
    pointer-events: none;
    z-index: 1;
  }
}