/* ═══════════════════════════════════════════════════════════════════════════
   NuLine Mobile Experience Layer
   ─ Loads after premium.css; owns everything ≤ 768 px and touch UX globally
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Global baseline (all screen sizes) ──────────────────────────────────── */

/* Remove blue tap flash on iOS/Android */
* { -webkit-tap-highlight-color: transparent; }

/* Prevent horizontal scroll - body intentionally excluded: setting overflow-x:hidden
   on body clips position:fixed children on iOS Safari */
html { overflow-x: hidden; max-width: 100vw; }
body { max-width: 100vw; }

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

/* Improve tap responsiveness - no 300ms delay */
html { touch-action: manipulation; }

/* Prevent iOS from auto-zooming inputs (requires font-size ≥ 16px) */
input,
select,
textarea {
  font-size: 16px !important;
  -webkit-appearance: none;
  appearance: none;
}

/* ── Sticky CTA bar - safe-area + premium ────────────────────────────────── */

.sticky-cta-bar {
  /* notched phones (iPhone X+): lift above the home indicator */
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px);
}

/* ── Hide header CTA on mobile (sticky bar at bottom handles it) ─────────── */

@media (max-width: 768px) { .header-cta { display: none !important; } }

/* ── Hamburger → animated X ──────────────────────────────────────────────── */

.nav-toggle { z-index: 1100; position: relative; }

/* Top line transforms to top slash of X */
.nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
/* Middle line disappears */
.nav-toggle.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
/* Bottom line transforms to bottom slash of X */
.nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.nav-toggle span {
  transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .2s ease;
  transform-origin: center;
}

/* ── Full-screen backdrop when nav is open ───────────────────────────────── */
/* Uses body::after so it covers the full viewport without stacking-context   */
/* issues (a fixed child of a transformed element is NOT viewport-fixed).     */

body.nav-open::after,
body.nav-closing::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 28, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999;   /* above content, below nav panel (1000) */
  pointer-events: auto;
}
body.nav-open::after   { animation: backdropIn  .25s ease forwards; }
body.nav-closing::after { animation: backdropOut .3s ease forwards; }

@keyframes backdropIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdropOut { from { opacity: 1; } to { opacity: 0; } }

/* ── Premium mobile nav panel ─────────────────────────────────────────────── */

@media (max-width: 900px) {

  .primary-nav {
    /* slide from right; override main.css slide direction for luxury feel */
    right: 0;
    left: auto;
    width: min(320px, 88vw);
    /* Explicit height instead of relying on bottom:0 - iOS Safari clips
       position:fixed height when overflow is involved */
    height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(180deg, #090f20 0%, #0b1540 100%);
    border-left: 1px solid rgba(0,168,232,.12);
    padding: 2rem 1.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow: -12px 0 48px rgba(0,0,0,.45);
    z-index: 1001;   /* above header (1000) and body::after backdrop */
  }

  /* Stagger nav items as panel opens */
  .primary-nav .nav-list li {
    opacity: 0;
    transform: translateX(18px);
    transition: opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
  }
  .primary-nav.open .nav-list li {
    opacity: 1;
    transform: none;
  }
  .primary-nav.open .nav-list li:nth-child(1) { transition-delay: .06s; }
  .primary-nav.open .nav-list li:nth-child(2) { transition-delay: .10s; }
  .primary-nav.open .nav-list li:nth-child(3) { transition-delay: .14s; }
  .primary-nav.open .nav-list li:nth-child(4) { transition-delay: .18s; }
  .primary-nav.open .nav-list li:nth-child(5) { transition-delay: .22s; }
  .primary-nav.open .nav-list li:nth-child(6) { transition-delay: .26s; }
  .primary-nav.open .nav-list li:nth-child(7) { transition-delay: .30s; }
  .primary-nav.open .nav-list li:nth-child(8) { transition-delay: .34s; }

  .nav-list li a {
    font-size: 1rem;
    padding: .875rem 1rem;
    border-radius: 10px;
    border: 1px solid transparent;
    margin-bottom: .25rem;
    color: rgba(255,255,255,.82);
    display: flex;
    align-items: center;
    min-height: 52px; /* ≥44px touch target */
  }
  .nav-list li a:hover,
  .nav-list li a:active,
  .nav-list li.current-menu-item a {
    color: var(--white);
    background: rgba(0,168,232,.12);
    border-color: rgba(0,168,232,.2);
  }

}

/* ── Section spacing - mobile ─────────────────────────────────────────────── */

@media (max-width: 768px) {
  .section                { padding: 3.5rem 0; }
  .section-header         { margin-bottom: 2.25rem; }
  .section-header::before { margin-bottom: .875rem; }
  .section-title          { margin-bottom: .75rem; }

  /* Tighter container on very small screens */
  .container { padding: 0 1.125rem; }
}

@media (max-width: 400px) {
  .container { padding: 0 1rem; }
}

/* ── Hero - mobile ─────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .home-hero {
    min-height: 88vh;  /* fallback for older browsers */
    min-height: 88svh; /* svh = visible area, excludes browser chrome */
    padding: 7rem 0 4rem;
    /* On mobile show slightly more opaque overlay for readability */
  }
  .home-hero::before {
    background: linear-gradient(175deg, rgba(11,21,64,.92) 0%, rgba(11,21,64,.80) 50%, rgba(11,21,64,.55) 100%);
  }
  /* Kill the decorative orb on mobile - performance + not needed */
  .home-hero::after { display: none; }

  .home-hero-content { max-width: 100%; text-align: center; }
  .home-hero-title   { font-size: clamp(2rem, 8vw, 2.75rem); }
  .home-hero-sub     {
    font-size: 1rem;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Hero eyebrow - center on mobile */
  .hero-eyebrow, .section-eyebrow { display: block; text-align: center; }

  /* CTA buttons stack and go full width */
  .hero-cta-group {
    flex-direction: column;
    gap: .75rem;
  }
  .hero-cta-group .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    min-height: 52px;
  }

  /* Hero trust strip - center */
  .hero-trust-strip {
    justify-content: center;
    gap: 1rem;
  }

  /* Hide scroll hint on mobile - redundant when content is visible below fold */
  .hero-scroll-hint { display: none; }

  /* Page hero (inner pages) */
  .page-hero  { min-height: 220px; padding: 4rem 0 2.5rem; }
  .hero-title { font-size: clamp(1.5rem, 6vw, 2rem); }
}

/* ── Stats bar - mobile ───────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .stats-bar  { padding: 2rem 0; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0; }

  .stat-item {
    padding: 1.25rem 1rem;
    border-right: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .stat-item:nth-child(even) { border-right: none; }
  .stat-item:nth-child(3),
  .stat-item:nth-child(4)    { border-bottom: none; }

  .stat-number { font-size: clamp(2rem, 8vw, 2.75rem); }
  .stat-label  { font-size: .72rem; }
}

/* ── Cards - mobile touch states ─────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Lift replaces hover - triggered on tap */
  .card:active {
    transform: translateY(-3px) scale(.985);
    box-shadow: 0 12px 36px rgba(18,32,90,.18);
    transition: transform .12s ease, box-shadow .12s ease;
  }

  /* Card body - tighter on mobile */
  .card-body  { padding: 1.25rem; gap: .75rem; }
  .card-title { font-size: 1rem; }

  /* Study card badges - smaller */
  .badge { font-size: .7rem; padding: .25rem .75rem; }
}

/* ── Buttons - mobile ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Minimum 44px touch target on all buttons */
  .btn    { min-height: 48px; }
  .btn-lg { min-height: 54px; font-size: .975rem; padding: .875rem 1.75rem; }
  .btn-sm { min-height: 40px; }

  /* Active press state */
  .btn-primary:active {
    transform: scale(.96);
    box-shadow: 0 4px 12px rgba(0,168,232,.35);
    transition: transform .1s ease;
  }
  .btn-outline-white:active {
    transform: scale(.96);
    transition: transform .1s ease;
  }

  /* Kill shimmer on touch (performance) */
  .btn-primary::after { display: none; }
}

/* ── How It Works steps - mobile ─────────────────────────────────────────── */

@media (max-width: 768px) {
  .steps-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  /* Remove connector line on mobile */
  .steps-grid::before { display: none; }

  /* Step layout on mobile - compact vertical card; no .step-text wrapper in HTML */
  .step {
    text-align: left;
    padding: 1.25rem 1.25rem 1.25rem 1.5rem;
    border-left: 3px solid rgba(0,168,232,.4);
    display: block;    /* revert flex; h3 and p have no wrapper element */
  }
  .step-number {
    display: inline-flex;
    width: 46px;
    height: 46px;
    margin: 0 0 .875rem 0;
    font-size: .9rem;
  }
  .step h3   { font-size: .95rem; margin-bottom: .375rem; text-align: left; }
  .step p    { font-size: .875rem; text-align: left; }
}

/* ── Sticky CTA bar - premium mobile ─────────────────────────────────────── */

@media (max-width: 768px) {

  .sticky-cta-bar {
    gap: 0;
    border-top: 1px solid rgba(0,168,232,.15);
    box-shadow: 0 -6px 24px rgba(0,0,0,.3);
  }

  .sticky-cta-apply,
  .sticky-cta-call {
    min-height: 52px;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
  }

  /* Pulse the Apply button once every 4s to draw the eye */
  .sticky-cta-apply {
    animation: ctaPulse 4s ease-in-out infinite;
  }
  @keyframes ctaPulse {
    0%,100% { box-shadow: none; }
    50%      { box-shadow: inset 0 0 0 2px rgba(255,255,255,.2); }
  }

  .sticky-cta-apply:active { opacity: .88; transform: scale(.98); }
  .sticky-cta-call:active  { opacity: .88; }
}

/* ── Contact form - mobile ────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .contact-form-card { border-radius: 16px; padding: 1.5rem; }

  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: .875rem 1rem;
    border-radius: 10px;
    min-height: 52px;
  }
  .form-group textarea { min-height: 130px; }

  .form-group label { font-size: .8rem; margin-bottom: .375rem; }

  /* Submit button full width */
  .contact-form-card [type="submit"] {
    width: 100%;
    min-height: 54px;
  }
}

/* ── Apply form / multi-step - mobile ────────────────────────────────────── */

@media (max-width: 768px) {
  .apply-layout       { gap: 1.5rem; }
  .step-indicator     { gap: .5rem; }
  .step-dot           { width: 28px; height: 28px; font-size: .75rem; }
  .step-connector     { width: 24px; }
  .apply-form-actions { flex-direction: column-reverse; gap: .75rem; }
  .apply-form-actions .btn { width: 100%; }
}

/* ── Why Participate - mobile ─────────────────────────────────────────────── */

@media (max-width: 768px) {
  .why-stat-card {
    padding: 1.25rem 1.5rem;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
  }
  .why-stat-card:hover { transform: none; }
  .why-stat-card:active { transform: scale(.98); }
}

/* ── Blog - mobile ────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .blog-card {
    grid-template-columns: 1fr;
  }
  .blog-card .card-image {
    height: 190px;
    border-radius: 12px 12px 0 0;
  }
  .blog-card .card-body { padding: 1.25rem; }

  /* Tag filter bar - horizontal scroll */
  .tag-filter {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .25rem;
    flex-wrap: nowrap;
  }
  .tag-filter::-webkit-scrollbar { display: none; }
  .tag-btn { flex-shrink: 0; }
}

/* ── Post navigation - mobile ─────────────────────────────────────────────── */

@media (max-width: 768px) {
  .post-nav .container {
    flex-direction: column;
    gap: 1rem;
  }
  .post-nav-item  { padding: 1rem 1.25rem; }
  .post-nav-next  { text-align: left; }
}

/* ── Study cards - filter buttons horizontal scroll ─────────────────────── */

@media (max-width: 768px) {
  .filter-buttons, .filter-bar {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .25rem;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .filter-buttons::-webkit-scrollbar,
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-btn { flex-shrink: 0; }
}

/* ── Study search box - mobile ───────────────────────────────────────────── */

@media (max-width: 768px) {
  .study-search-bar input { min-height: 52px; font-size: 16px !important; }
}

/* ── Doctor cards - mobile ───────────────────────────────────────────────── */

@media (max-width: 768px) {
  .doctor-card { padding: 1.5rem 1rem; }
  .doctor-photo {
    width: 100px;
    height: 100px;
  }
  .doctor-name   { font-size: .925rem; }
  .doctor-title  { font-size: .8rem; }
}

/* ── About page - mobile ─────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .value-card { padding: 1.5rem; }
}

/* ── CTA banner - mobile ─────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .cta-banner { padding: 3.5rem 0; }
  .cta-banner-inner h2 { font-size: clamp(1.5rem, 6vw, 2rem); }

  .cta-banner .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-banner .btn { width: 100%; text-align: center; justify-content: center; }
}

/* ── Footer - mobile ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .site-footer { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  /* Extra bottom padding so sticky bar doesn't cover last footer row */
}

/* ── Prose / blog article - mobile ──────────────────────────────────────── */

@media (max-width: 768px) {
  .prose { font-size: 1rem; }
  .prose h2 { font-size: 1.25rem; }
  .prose h3 { font-size: 1.1rem; }

  .prose blockquote {
    padding: 1.125rem 1.25rem;
    margin-left: 0;
    margin-right: 0;
  }

  /* Tables inside prose - horizontal scroll */
  .prose table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: .875rem;
  }
}

/* ── Sidebar - below main content on mobile (already handled by grid) ────── */

@media (max-width: 768px) {
  .sidebar-card { margin-bottom: 1.25rem; }
  .sidebar-cta  { padding: 1.5rem; }
}

/* ── Pagination - mobile ─────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .pagination a, .pagination span {
    width: 38px;
    height: 38px;
    font-size: .825rem;
  }
}

/* ── Equipment grid - mobile ─────────────────────────────────────────────── */

@media (max-width: 768px) {
  .equipment-detail-grid { gap: 2rem; }
}

/* ── Contact info cards - mobile ─────────────────────────────────────────── */

@media (max-width: 768px) {
  .ci-phone { font-size: 1.125rem; }
  .contact-info-card { padding: 1.25rem; }
}

/* ── Scroll animations - reduce motion for preference ────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* Kill decorative animations - use actual element selectors, not animation names */
  .btn-primary::after { display: none; }
  .sticky-cta-apply   { animation: none; }   /* was .ctaPulse - wrong selector */
  body.nav-open::after,
  body.nav-closing::after { animation: none; opacity: 1; } /* backdrop: skip fade-in/out */
}

/* ── Very small screens (≤360px) ─────────────────────────────────────────── */

@media (max-width: 360px) {
  .home-hero-title { font-size: 1.875rem; }
  .btn-lg          { padding: .75rem 1.25rem; font-size: .925rem; }
  .stat-number     { font-size: 1.875rem; }
}

/* ── Landscape mobile - prevent hero overflow ────────────────────────────── */

@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .home-hero { min-height: 100vh; min-height: 100svh; padding: 5rem 0 3rem; }
  .home-hero-title { font-size: 1.75rem; }
  .home-hero-sub { font-size: .9rem; margin-bottom: 1.5rem; }
}