/**
 * Nanotkar Studio — Responsive Overrides
 * Breakpoints: 1440, 1366, 1200, 1024, 768, 430, 390, 375
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 */

/* ─── 1440px — Large Desktop ─── */
@media (max-width: 1440px) {
  .ns-hero__heading {
    font-size: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  }

  .ns-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ─── 1366px — Standard Desktop ─── */
@media (max-width: 1366px) {
  .ns-featured-grid {
    gap: var(--ns-space-md);
  }
}

/* ─── 1200px — Sidebar Breakpoint ─── */
@media (max-width: 1199px) {
  /* Sidebar hidden — main content full width */
  body.ns-has-sidebar .wp-site-blocks {
    margin-right: 0;
  }

  .ns-instagram-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ─── 1024px — Tablet Landscape ─── */
@media (max-width: 1024px) {
  :root {
    --ns-header-height: 64px;
    --ns-space-section: clamp(3rem, 6vw, 5rem);
  }

  /* Header */
  .ns-header {
    padding: 0.5rem 0;
  }

  /* Grid layouts → 2 columns */
  .ns-featured-grid,
  .ns-services-grid,
  .ns-video-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ns-space-md);
  }

  .ns-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .ns-gallery--masonry {
    columns: 2;
  }

  /* Brand intro stack */
  .ns-brand-intro {
    grid-template-columns: 1fr;
    gap: var(--ns-space-lg);
  }

  .ns-brand-intro__image {
    order: -1;
  }

  .ns-brand-intro__text {
    max-width: 100%;
    text-align: center;
  }

  /* Trust grid */
  .ns-trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Section headings smaller */
  .ns-section-heading {
    font-size: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  }

  /* Form rows stack */
  .ns-form__row {
    grid-template-columns: 1fr;
  }
}

/* ─── 768px — Tablet Portrait ─── */
@media (max-width: 768px) {
  /* Single column everything */
  .ns-featured-grid,
  .ns-services-grid {
    grid-template-columns: 1fr;
    gap: var(--ns-space-md);
  }

  .ns-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .ns-gallery--masonry {
    columns: 2;
    column-gap: 8px;
  }

  .ns-video-grid {
    grid-template-columns: 1fr;
  }

  .ns-instagram-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Hero */
  .ns-hero {
    min-height: 70vh;
  }

  .ns-hero__heading {
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  }

  .ns-hero__subtitle {
    font-size: 1rem;
  }

  /* Buttons stack on mobile */
  .ns-hero__buttons,
  .ns-cta__buttons {
    flex-direction: column;
    align-items: center;
  }

  .ns-hero__buttons .ns-btn,
  .ns-cta__buttons .ns-btn {
    width: 100%;
    max-width: 280px;
  }

  /* CTA section */
  .ns-cta {
    padding: var(--ns-space-xl) var(--ns-space-sm);
  }

  .ns-cta__heading {
    font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  }

  /* Portfolio filter scroll */
  .ns-portfolio-filter {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }

  .ns-portfolio-filter__btn {
    flex-shrink: 0;
  }

  /* Trust grid */
  .ns-trust-grid {
    grid-template-columns: 1fr;
    gap: var(--ns-space-md);
  }

  /* Package cards */
  .ns-card--package {
    max-width: 400px;
    margin: 0 auto;
  }

  /* Footer */
  .ns-footer {
    padding: var(--ns-space-lg) 0 var(--ns-space-md);
  }
}

/* ─── 430px — Large Phone ─── */
@media (max-width: 430px) {
  .ns-container {
    padding: 0 var(--ns-space-sm);
  }

  .ns-hero__content {
    padding: var(--ns-space-lg) var(--ns-space-sm);
  }

  .ns-section-heading {
    font-size: 1.5rem;
  }

  .ns-card--wedding__content {
    padding: var(--ns-space-sm);
  }

  .ns-card--testimonial {
    padding: var(--ns-space-md);
  }

  .ns-card--testimonial__text {
    font-size: 1.0625rem;
  }

  /* Gallery tighter */
  .ns-gallery {
    gap: 6px;
  }

  .ns-ig-mobile-section__item {
    flex: 0 0 160px;
  }

  .ns-ig-mobile-section__item img {
    width: 160px;
    height: 160px;
  }
}

/* ─── 390px — iPhone 14/15 ─── */
@media (max-width: 390px) {
  .ns-hero__heading {
    font-size: 1.875rem;
  }

  .ns-btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.75rem;
  }

  .ns-footer__brand {
    font-size: 1.25rem;
  }
}

/* ─── 375px — iPhone SE / Minimum ─── */
@media (max-width: 375px) {
  :root {
    --ns-space-section: 3rem;
  }

  .ns-hero {
    min-height: 60vh;
  }

  .ns-hero__heading {
    font-size: 1.75rem;
  }

  .ns-gallery {
    grid-template-columns: 1fr;
  }

  .ns-gallery--masonry {
    columns: 1;
  }

  .ns-section-heading {
    font-size: 1.375rem;
  }

  .ns-ig-mobile-section__item {
    flex: 0 0 140px;
  }

  .ns-ig-mobile-section__item img {
    width: 140px;
    height: 140px;
  }
}

/* ─── Prevent horizontal overflow at ALL sizes ─── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ─── Touch targets minimum 48px ─── */
@media (pointer: coarse) {
  .ns-btn {
    min-height: 48px;
  }

  .wp-block-navigation-item__content {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  .ns-portfolio-filter__btn {
    min-height: 44px;
  }
}


/* ─────────────────────────────────────────────────────────────
 * BULLETPROOF MOBILE UI & PHOTO ARRANGEMENT OVERRIDES
 * ───────────────────────────────────────────────────────────── */

/* Global overflow containment */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* Image aspect ratio perfection */
.ns-square-img {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
}

/* ─── Tablet & Below (<= 991px) ─── */
@media screen and (max-width: 991px) {
  /* Navigation: horizontal smooth scroll */
  .ns-main-nav {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    gap: 1.25rem !important;
    padding: 0.5rem 0 !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .ns-main-nav::-webkit-scrollbar {
    display: none !important;
  }

  /* Two Column Grid collapses to single column */
  .ns-top-two-col,
  .ns-rw-two-col,
  .ns-rw-two-column-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 2.5rem !important;
  }

  .ns-sidebar-column,
  .ns-rw-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    top: auto !important;
  }

  /* Filter bar swipeable on mobile */
  .ns-filter-pills {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    padding-bottom: 0.5rem !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .ns-filter-pills::-webkit-scrollbar {
    display: none !important;
  }
  .ns-pill-btn {
    flex-shrink: 0 !important;
  }
}

/* ─── Mobile Portrait (<= 768px) ─── */
@media screen and (max-width: 768px) {
  /* Header adjustments */
  .ns-site-header {
    padding: 0.5rem 1rem !important;
  }
  .ns-site-header > div {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }
  .ns-main-nav {
    order: 3 !important;
    width: 100% !important;
    border-top: 1px solid #F0ECE1;
    padding-top: 0.5rem !important;
  }

  /* Home Hero Card Stack */
  .ns-hero-card {
    flex-direction: column !important;
    padding: 2rem 1.25rem !important;
    min-height: auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  .ns-hero-card .ns-hero-text-col {
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 1.5rem !important;
  }
  .ns-hero-card .ns-live-bg-container {
    position: relative !important;
    width: 100% !important;
    height: 260px !important;
    border-radius: 8px !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
  }

  /* Real Weddings Hero Stack */
  .ns-rw-hero > div {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  .ns-rw-hero-text-col {
    max-width: 100% !important;
    width: 100% !important;
  }
  .ns-rw-hero-img-col {
    max-width: 100% !important;
    width: 100% !important;
  }
  .ns-rw-hero-img-col .ns-live-bg-container {
    height: 240px !important;
  }

  /* Wedding Story Cards: Stack Vertically */
  .ns-story-card {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 1rem !important;
    gap: 1.25rem !important;
  }
  .ns-story-card .ns-story-card__img-wrap {
    width: 100% !important;
    height: 230px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }
  .ns-story-card .ns-story-card__img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 25% !important;
  }
  .ns-story-card .ns-story-card__content {
    width: 100% !important;
    padding: 0 !important;
  }
  .ns-story-card .ns-btn-story-outline {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 0.65rem 1rem !important;
  }

  /* Our Story section stack */
  .ns-home-story-section {
    grid-template-columns: 1fr !important;
    padding: 1.5rem !important;
    gap: 1.5rem !important;
  }
  .ns-home-story-section > div:first-child {
    height: 240px !important;
  }

  /* Pre-Footer Banner stack */
  .ns-pre-footer-cta > div {
    flex-direction: column !important;
    text-align: center !important;
    gap: 1.5rem !important;
  }
  .ns-pre-footer-cta > div > div:last-child {
    width: 100% !important;
    justify-content: center !important;
  }
  .ns-pre-footer-cta a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Instagram 12-grid thumbnails */
  .ns-ig-12-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .ns-ig-12-item {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }
  .ns-ig-12-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* ─────────────────────────────────────────────────────────────
 * STRICT MOBILE CONTAINMENT (ZERO HORIZONTAL OVERFLOW)
 * ───────────────────────────────────────────────────────────── */

/* Global container clamp */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

/* Tablet & Mobile Nav breakpoint (<= 1024px) */
@media screen and (max-width: 1024px) {
  .ns-main-nav--desktop {
    display: none !important;
  }
  .ns-mobile-menu-btn {
    display: inline-flex !important;
  }
  .ns-mobile-quicknav {
    display: block !important;
  }
}

/* Mobile Screens (<= 991px) */
@media screen and (max-width: 991px) {
  .ns-top-two-col,
  .ns-rw-two-col,
  .ns-rw-two-column-layout,
  .ns-home-cta-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 2rem !important;
  }

  .ns-sidebar-column,
  .ns-rw-sidebar,
  .ns-rw-instagram-column {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Filter strips must scroll horizontally smoothly and never expand parent */
  .ns-filter-pills,
  .ns-port-filter-bar,
  .ns-ig-filter-bar,
  .ns-ig-highlights-strip,
  .ns-portfolio-filter {
    display: flex !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .ns-filter-pills::-webkit-scrollbar,
  .ns-port-filter-bar::-webkit-scrollbar,
  .ns-ig-filter-bar::-webkit-scrollbar,
  .ns-ig-highlights-strip::-webkit-scrollbar {
    display: none !important;
  }

  /* Single Column Portfolio & Bento Grid */
  .ns-portfolio-grid,
  .ns-ig-bento-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    width: 100% !important;
  }

  .ns-ig-bento-card,
  .ns-ig-bento-card.card-wide,
  .ns-ig-bento-card.card-tall {
    grid-column: auto !important;
    grid-row: auto !important;
    height: 340px !important;
    width: 100% !important;
  }

  /* Sections padding */
  section, .ns-section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Profile Card padding */
  .ns-ig-profile-card {
    padding: 1.5rem 1rem !important;
  }
}


/* ─────────────────────────────────────────────────────────────
 * ABSOLUTE MOBILE CONTAINMENT & FULL VISIBILITY (<= 1024px)
 * ───────────────────────────────────────────────────────────── */

/* Global container clamp */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

/* Tablet & Mobile Nav breakpoint (<= 1024px) */
@media screen and (max-width: 1024px) {
  .ns-main-nav--desktop,
  .ns-desktop-only {
    display: none !important;
  }
  .ns-mobile-menu-btn {
    display: inline-flex !important;
  }
  .ns-mobile-quicknav {
    display: block !important;
  }
}

/* Mobile Screens (<= 991px) */
@media screen and (max-width: 991px) {
  /* Typography clamping */
  h1, .wp-block-heading:is(h1), .ns-hero__heading {
    font-size: clamp(1.65rem, 1.3rem + 1.5vw, 2.2rem) !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
  }
  h2, .wp-block-heading:is(h2) {
    font-size: clamp(1.35rem, 1.15rem + 1vw, 1.75rem) !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }

  /* Reset all fixed flex bases */
  .ns-rw-hero-text-col,
  .ns-rw-hero-img-col,
  .ns-hero-text-col,
  .ns-hero-img-col,
  .ns-ig-hero-text-col,
  .ns-ig-profile-card > div {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Two column grids collapse cleanly */
  .ns-top-two-col,
  .ns-rw-two-col,
  .ns-rw-two-column-layout,
  .ns-home-cta-grid,
  .ns-home-story-section {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 2rem !important;
  }

  /* Sidebars full width */
  .ns-sidebar-column,
  .ns-rw-sidebar,
  .ns-rw-instagram-column {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Filter strips must scroll horizontally smoothly and never expand parent */
  .ns-filter-pills,
  .ns-port-filter-bar,
  .ns-ig-filter-bar,
  .ns-ig-highlights-strip,
  .ns-portfolio-filter,
  .ns-mobile-quicknav {
    display: flex !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .ns-filter-pills::-webkit-scrollbar,
  .ns-port-filter-bar::-webkit-scrollbar,
  .ns-ig-filter-bar::-webkit-scrollbar,
  .ns-ig-highlights-strip::-webkit-scrollbar,
  .ns-mobile-quicknav::-webkit-scrollbar {
    display: none !important;
  }

  .ns-pill-btn,
  .ns-port-btn,
  .ns-ig-filter-btn,
  .ns-portfolio-filter__btn {
    flex-shrink: 0 !important;
  }

  /* Single Column Portfolio & Bento Grid */
  .ns-portfolio-grid,
  .ns-ig-bento-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .ns-ig-bento-card,
  .ns-ig-bento-card.card-wide,
  .ns-ig-bento-card.card-tall {
    grid-column: auto !important;
    grid-row: auto !important;
    height: 340px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Section and container padding */
  section, .ns-section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
  }

  /* Profile card on Instagram page */
  .ns-ig-profile-card {
    padding: 1.25rem 1rem !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }
  .ns-ig-profile-card > div:first-child {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1rem !important;
  }
  .ns-ig-profile-card > div:last-child {
    justify-content: center !important;
    width: 100% !important;
    gap: 0.75rem !important;
  }
  .ns-ig-profile-card a {
    width: 100% !important;
    max-width: 280px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Real wedding story cards */
  .ns-story-card {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem !important;
    gap: 1rem !important;
  }
  .ns-story-card .ns-story-card__img-wrap {
    width: 100% !important;
    max-width: 100% !important;
    height: 220px !important;
  }

  /* Hero Card & Live Reel container on mobile */
  .ns-hero-card {
    flex-direction: column !important;
    padding: 2rem 1.25rem 1.5rem !important;
    min-height: auto !important;
  }
  .ns-hero-text-col {
    max-width: 100% !important;
    width: 100% !important;
    order: 1 !important;
  }
  .ns-hero-card .ns-live-bg-container {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 380px !important;
    border-radius: 10px !important;
    order: 2 !important;
    margin-top: 1.5rem !important;
    overflow: hidden !important;
  }
  .ns-hero-gradient-overlay {
    display: none !important;
  }
  .ns-reel-controls-bar {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
  }
  .ns-live-bg-container {
    height: 300px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}