/* ============================================================
   RESCUER EDUSKILLS — MOBILE COMPATIBILITY LAYER
   Covers: iPhone SE (375px) → iPhone 15 Pro Max (430px)
           Android small (360px) → large (480px+)
           All tablet sizes (600px – 1024px)
   ============================================================ */

/* ── iOS Safari fixes ───────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;   /* Prevent iOS font-size inflation */
  text-size-adjust: 100%;
}

body {
  -webkit-overflow-scrolling: touch; /* Momentum scroll on iOS */
  overscroll-behavior-y: auto;
}

/* Fix 100vh issue on iOS Safari (address bar shrinks) */
.hero {
  min-height: 100svh; /* svh = small viewport height, no address bar */
  min-height: -webkit-fill-available;
}

/* Safe area insets for iPhone notch & Dynamic Island */
.navbar {
  padding-top: env(safe-area-inset-top, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

footer {
  padding-bottom: calc(0px + env(safe-area-inset-bottom, 0));
}

/* Fix tap highlight on mobile */
a, button, label, input, select, textarea {
  -webkit-tap-highlight-color: rgba(108, 63, 197, 0.12);
}

/* Prevent overflow on all screens */
*, *::before, *::after {
  max-width: 100%;
}

/* Fix images overflowing containers */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Touch target sizes (WCAG 2.5.5 & iOS/Android HIG) ──────── */
/* Minimum 44×44px touch targets */
.nav-links a,
.mobile-menu a,
.btn-primary,
.btn-secondary,
.btn-white,
.hero-btn-ghost,
.cc-link,
.store-btn,
.social-link,
.cat-tabs a,
.map-link,
.hamburger-label {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.hamburger-label {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}

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

/* ── Form elements — iOS styling fixes ──────────────────────── */
input,
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 10px; /* Prevents square corners on iOS */
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236C3FC5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* ── PDF iframe on mobile ───────────────────────────────────── */
.pdf-frame {
  min-height: 500px;
}

/* ── Map iframe on mobile ───────────────────────────────────── */
.map-frame {
  width: 100%;
  height: 260px;
  border: 0;
  display: block;
}

/* ── Prevent text-wrap: balance breaking on older Safari ────── */
h1, h2, h3 {
  text-wrap: pretty;
}

/* ════════════════════════════════════════════════════════════
   BREAKPOINTS
   ════════════════════════════════════════════════════════════ */

/* ── Large tablet (landscape iPad, 901px–1024px) ─────────────── */
@media (max-width: 1024px) {
  .hero-inner         { gap: 40px; }
  .teachers-grid      { grid-template-columns: 1fr 1fr; }
  .app-intro-grid     { grid-template-columns: 1fr 1fr; gap: 36px; }
  .contact-grid       { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-grid        { grid-template-columns: 1fr 1fr; gap: 32px; }
  .about-intro-grid   { grid-template-columns: 1fr 1fr; gap: 40px; }
  .teach-grid         { grid-template-columns: repeat(2, 1fr); }
  .vm-grid            { grid-template-columns: 1fr; }
  .blog-layout        { grid-template-columns: 1fr; }
  .map-grid           { grid-template-columns: 1fr; }
}

/* ── Small tablet / large phone landscape (601px–900px) ─────── */
@media (max-width: 900px) {
  /* Nav */
  .nav-inner          { height: 64px; }

  /* Hero */
  .hero               { min-height: auto; padding: 80px 0 52px; }
  .hero-inner         { grid-template-columns: 1fr; gap: 36px; }
  .hero-content       { order: 1; }
  .hero-visual        { order: 2; max-width: 500px; margin: 0 auto; }
  .hero h1            { max-width: 100%; }
  .hero-stats         { grid-template-columns: repeat(3, 1fr); }

  /* Sections */
  .about-mini-inner   { grid-template-columns: 1fr; gap: 36px; }
  .about-img-wrap     { max-width: 560px; margin: 0 auto; }
  .float-badge        { right: 16px; bottom: 16px; }
  .features-grid      { grid-template-columns: repeat(2, 1fr); }
  .course-cards-row   { grid-template-columns: repeat(2, 1fr); }
  .why-grid           { grid-template-columns: repeat(2, 1fr); }
  .app-teaser-inner   { grid-template-columns: 1fr; }
  .app-teaser-inner img { max-height: 280px; }

  /* About page */
  .about-intro-grid   { grid-template-columns: 1fr; gap: 32px; }
  .teachers-hero-inner { grid-template-columns: 1fr; }
  .teacher-portrait-stack { display: none; }
  .teachers-grid      { grid-template-columns: 1fr 1fr; }

  /* App page */
  .app-intro-grid     { grid-template-columns: 1fr; }
  .phones-wrap        { max-width: 300px; margin: 0 auto; }
  .app-feat-grid      { grid-template-columns: repeat(2, 1fr); }
  .download-card      { padding: 36px 28px; }
  .dl-btns            { justify-content: flex-start; }

  /* Contact page */
  .contact-grid       { grid-template-columns: 1fr; gap: 32px; }
  .form-row           { grid-template-columns: 1fr; }
  .contact-form-card  { padding: 28px 22px; }

  /* Blog/events */
  .blog-layout        { grid-template-columns: 1fr; }
  .info-strip-grid    { grid-template-columns: 1fr; gap: 10px; }

  /* Footer */
  .footer-grid        { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-bottom      { flex-direction: column; text-align: center; gap: 8px; }
}

/* ── Mobile (max 600px) — covers most phones ─────────────────── */
@media (max-width: 600px) {
  /* Typography */
  .section-title      { font-size: clamp(1.5rem, 7vw, 2rem); }
  .section-subtitle   { font-size: .93rem; }

  /* Container padding */
  .container          { padding: 0 16px; }
  .nav-inner          { padding: 0 16px; height: 60px; }
  .page-hero-inner    { padding: 0 16px; }

  /* Navbar: reduce logo text on small screens */
  .logo-text .brand   { font-size: .95rem; }
  .logo-text .slogan  { display: none; }  /* Hide slogans on tiny screens */

  /* Hero */
  .hero               { padding: 72px 0 44px; }
  .hero-inner         { padding: 0 16px; gap: 28px; }
  .hero h1            { font-size: clamp(1.8rem, 9vw, 2.4rem); line-height: 1.12; }
  .hero-sub           { font-size: .95rem; margin-bottom: 24px; }
  .hero-actions       { flex-direction: column; }
  .hero-actions a     { width: 100%; justify-content: center; text-align: center; min-height: 50px; font-size: .97rem; }
  .hero-stats         { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stat-box           { padding: 12px 8px; }
  .stat-box .num      { font-size: 1.25rem; }
  .stat-box .lbl      { font-size: .65rem; }
  .hero-logo          { width: min(100%, 260px); }

  /* Features strip */
  .features-strip     { padding: 40px 0; }
  .features-grid      { grid-template-columns: 1fr; gap: 14px; }
  .feature-item       { padding: 16px; }

  /* About mini */
  .about-mini         { padding: 56px 0; }
  .about-img-wrap img { min-height: 260px; }
  .float-badge        { position: static; margin-top: 14px; display: inline-block; }
  .about-points       { gap: 10px; }
  .about-point        { padding: 12px 14px; }

  /* Course cards */
  .courses-preview    { padding: 56px 0; }
  .course-cards-row   { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
  .cc-head            { height: 80px; font-size: 1.9rem; }

  /* App teaser */
  .app-teaser         { padding: 56px 0; }
  .app-feat-list li   { font-size: .87rem; }

  /* Why us */
  .why-us             { padding: 56px 0; }
  .why-grid           { grid-template-columns: 1fr; gap: 14px; }
  .why-card           { padding: 20px; }

  /* CTA strip */
  .cta-strip          { padding: 44px 0; }
  .cta-strip-inner    { flex-direction: column; text-align: center; gap: 20px; }
  .cta-btns           { justify-content: center; }

  /* Page hero */
  .page-hero          { padding: 56px 0 40px; }
  .page-hero h1       { font-size: clamp(1.8rem, 7vw, 2.5rem); }

  /* About page */
  .about-intro        { padding: 52px 0; }
  .how-we-teach       { padding: 52px 0; }
  .teach-grid         { grid-template-columns: 1fr; gap: 14px; }
  .vision-mission     { padding: 52px 0; }
  .vm-grid            { grid-template-columns: 1fr; gap: 16px; }
  .vm-card            { padding: 24px 20px; }
  .values-section     { padding: 52px 0; }
  .values-grid        { grid-template-columns: 1fr; gap: 14px; }

  /* Teachers page */
  .teachers-page      { padding: 52px 0; }
  .teachers-grid      { grid-template-columns: 1fr; }
  .teacher-section-head { flex-direction: column; align-items: flex-start; }
  .teacher-hero-stats { grid-template-columns: 1fr; gap: 10px; }

  /* Courses page */
  .courses-page       { padding: 48px 0; }
  .courses-list       { grid-template-columns: 1fr; }
  .cat-tabs           { gap: 6px; }
  .cat-tabs a         { font-size: .80rem; padding: 8px 14px; }

  /* App page */
  .app-page           { padding: 52px 0; }
  .phones-wrap        { display: none; } /* Hide stacked phones on tiny screens */
  .app-feat-grid      { grid-template-columns: 1fr; gap: 14px; }
  .why-app-grid       { grid-template-columns: 1fr; }
  .app-download       { padding: 52px 0; }
  .download-card      { padding: 28px 20px; flex-direction: column; gap: 20px; }
  .download-card h2   { font-size: clamp(1.4rem, 6vw, 1.8rem); }
  .store-btn          { width: 100%; justify-content: center; }
  .dl-btns            { flex-direction: column; width: 100%; }

  /* Contact page */
  .contact-page       { padding: 52px 0; }
  .contact-info h2    { font-size: clamp(1.6rem, 7vw, 2rem); }
  .contact-form-card  { padding: 22px 16px; }
  .form-row           { grid-template-columns: 1fr; }
  .social-row         { gap: 8px; }
  .social-link        { font-size: .82rem; padding: 8px 12px 8px 8px; }
  .map-section        { padding: 0 0 52px; }
  .map-grid           { grid-template-columns: 1fr; gap: 16px; }

  /* Blog page */
  .blog-page          { padding: 52px 0; }
  .blog-layout        { grid-template-columns: 1fr; }
  .pdf-frame          { min-height: 420px; }
  .pdf-toolbar        { flex-direction: column; align-items: flex-start; gap: 8px; }
  .placeholder-grid   { grid-template-columns: 1fr; }
  .info-strip-grid    { grid-template-columns: 1fr; }

  /* Events page */
  .events-hero h1,
  .gallery-hero h1,
  .blog-hero h1       { font-size: clamp(1.9rem, 8vw, 2.6rem); }

  /* Gallery */
  .gallery-grid       { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* Footer */
  .footer-grid        { grid-template-columns: 1fr; gap: 22px; }
  .footer-bottom      { flex-direction: column; text-align: center; padding: 16px; }
  footer              { padding: 44px 0 0; }
}

/* ── Very small phones (360px and below) — Galaxy A, etc. ────── */
@media (max-width: 380px) {
  .container          { padding: 0 12px; }
  .nav-inner          { padding: 0 12px; }
  .hero h1            { font-size: clamp(1.65rem, 9.5vw, 2rem); }
  .hero-stats         { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .stat-box .num      { font-size: 1.1rem; }
  .hero-actions a     { font-size: .88rem; padding: 12px 16px; }
  .btn-primary,
  .btn-white,
  .btn-secondary      { font-size: .88rem; padding: 12px 18px; }
  .logo-area > img    { width: 40px; height: 40px; }
  .logo-text .brand   { font-size: .88rem; }
}

/* ── Landscape phone fix ─────────────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .hero               { min-height: auto; padding: 56px 0 36px; }
  .hero-inner         { grid-template-columns: 1fr 1fr; gap: 24px; }
  .hero-visual        { display: none; } /* Hide visual in landscape to save space */
  .page-hero          { padding: 44px 0 32px; }
  .navbar             { position: sticky; } /* Keep sticky in landscape */
}

/* ── Retina / high DPI ──────────────────────────────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo-area > img, .hero-logo {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* ── Accessibility: Respect reduced motion ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Dark mode support ──────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  /* Keep brand colors intact — only adjust system UI elements */
  meta[name="theme-color"] { content: "#4B28A0"; }
}

/* ── Print styles ────────────────────────────────────────────── */
@media print {
  .navbar, .hamburger-label, .hero-actions, footer, .cta-strip { display: none !important; }
  body { font-size: 12pt; color: #000; }
  a { text-decoration: underline; color: #000; }
  .hero { background: #fff; color: #000; min-height: auto; padding: 20pt 0; }
  .hero h1, .hero-sub { color: #000; }
}