/* ======================================================================
   Kidstrument — Mobile Overrides (Homepage-first)
   File: /css/mobile-styles.css
   Scope: homepage via body classes (.page-template-page-home / -php)
   Enqueue AFTER the main stylesheet.
   ====================================================================== */

/* ----------------------------- Utilities ----------------------------- */
/* Hide on mobile; show again at ≥769px */
.u-hide-mobile { display: none !important; }
@media (min-width: 769px) { .u-hide-mobile { display: revert !important; } }

/* Quick centering helpers (optional, non-destructive) */
.u-center-text { text-align: center !important; }
.u-center-block { margin-left: auto !important; margin-right: auto !important; }

/* ------------------ iPhone/iOS stability + overflow guard ----------- */
/* Scope to the homepage body class to avoid global side effects */
body.page-template-page-home,
body.page-template-page-home-php {
  -webkit-text-size-adjust: 100%;   /* stop Safari from auto-resizing text */
  overflow-x: hidden;               /* prevent subtle horizontal scroll */
}

/* --------------------------- Global-ish fixes ------------------------ */
/* Tighter section padding on small screens (homepage only) */
@media (max-width: 768px) {
  .page-template-page-home .section,
  .page-template-page-home-php .section {
    padding: 48px 16px; /* slightly tighter across sections */
  }
}

/* ------------------------------- Hero -------------------------------- */
/* Base hero tightening: reduce header → H1 gap and general air */
@media (max-width: 768px) {
  .page-template-page-home .hero-section,
  .page-template-page-home-php .hero-section {
    padding-top: 44px;    /* tighter top spacing */
    padding-bottom: 44px; /* keep balanced bottom */
    padding-left: 16px;
    padding-right: 16px;
    text-align: center;   /* make center the default for all hero text */
  }

  /* Ensure hero container stacks items and centers them */
  .page-template-page-home .hero-section .container.flex,
  .page-template-page-home-php .hero-section .container.flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px; /* compact, consistent gap between items */
    width: 100%;
  }

  /* Reorder hero: H1 → Video → Blurb → Buttons
     Using display: contents to interleave the video from the media col.
     Safari can be finicky here, so we also force explicit widths + margins. */
  .page-template-page-home .hero-text-col,
  .page-template-page-home-php .hero-text-col,
  .page-template-page-home .hero-media-col,
  .page-template-page-home-php .hero-media-col {
    display: contents;
  }

  /* Order the individual pieces */
  .page-template-page-home .hero-section h1,
  .page-template-page-home-php .hero-section h1 { order: 1; }

  .page-template-page-home .video-wrapper,
  .page-template-page-home-php .video-wrapper { order: 2; }

  /* Hide the "Short tour" caption under the video */
  .page-template-page-home #hero-video-caption,
  .page-template-page-home-php #hero-video-caption { display: none !important; }

  /* The blurb paragraph under the H1 (first <p> inside the original text col) */
  .page-template-page-home .hero-text-col > p,
  .page-template-page-home-php .hero-text-col > p { order: 3; }

  /* CTA buttons last, kept side-by-side (wrap only on ultra-narrow) */
  .page-template-page-home .hero-section .buttons,
  .page-template-page-home-php .hero-section .buttons {
    order: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;         /* side-by-side on normal phones */
    margin-inline: auto;
    width: 100%;
    max-width: 620px;
  }
  .page-template-page-home .hero-section .buttons .btn,
  .page-template-page-home-php .hero-section .buttons .btn {
    white-space: nowrap;       /* prevent label wrapping */
    padding: 12px 18px;
    flex: 0 1 auto;
  }

  /* HARDEN CENTERING on iPhone: give key pieces an explicit block width and centering */
  .page-template-page-home .hero-section h1,
  .page-template-page-home-php .hero-section h1,
  .page-template-page-home .hero-text-col > p,
  .page-template-page-home-php .hero-text-col > p,
  .page-template-page-home .video-wrapper,
  .page-template-page-home-php .video-wrapper {
    width: 100%;
    max-width: 620px;          /* keeps line length tidy */
    margin-left: auto;
    margin-right: auto;
  }

  .page-template-page-home .hero-section h1,
  .page-template-page-home-php .hero-section h1 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: clamp(26px, 6.2vw, 34px);
    line-height: 1.2;
  }

  .page-template-page-home .hero-section p,
  .page-template-page-home-php .hero-section p {
    font-size: var(--fs-400);
    margin-bottom: 8px;   /* small rhythm */
  }
}

/* Allow button wrap on very small phones to avoid overflow */
@media (max-width: 380px) {
  .page-template-page-home .hero-section .buttons,
  .page-template-page-home-php .hero-section .buttons { flex-wrap: wrap; }
}

/* Keep the play button a touch smaller on tiny devices */
@media (max-width: 480px) {
  .page-template-page-home .play-btn,
  .page-template-page-home-php .play-btn {
    width: 64px;
    height: 64px;
    font-size: 26px;
  }
}

/* Ensure media fits and is centered */
.page-template-page-home #hero-video,
.page-template-page-home-php #hero-video {
  width: 100%;
  height: auto;
  display: block;
}
.page-template-page-home .video-wrapper,
.page-template-page-home-php .video-wrapper {
  margin-left: auto;
  margin-right: auto;
}

/* Fallback if a browser ignores `display: contents` (keeps video first) */
@supports not (display: contents) {
  @media (max-width: 768px) {
    .page-template-page-home .hero-section .container.flex,
    .page-template-page-home-php .hero-section .container.flex { gap: 18px; }
    .page-template-page-home .hero-media-col,
    .page-template-page-home-php .hero-media-col { order: 2; }
    .page-template-page-home .hero-text-col,
    .page-template-page-home-php .hero-text-col { order: 3; }
    /* Inside text, just keep the natural order (H1, blurb, buttons) */
  }
}

/* ----------------------------- Metric bar ---------------------------- */
@media (max-width: 992px) {
  .page-template-page-home .landing-metricbar,
  .page-template-page-home-php .landing-metricbar {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .page-template-page-home .landing-metricbar,
  .page-template-page-home-php .landing-metricbar {
    grid-template-columns: 1fr;
  }
  .page-template-page-home .landing-metricbar li,
  .page-template-page-home-php .landing-metricbar li {
    gap: 10px;
  }
}

/* ----------------------------- Feature cards ------------------------- */
@media (max-width: 768px) {
  .page-template-page-home .features-grid,
  .page-template-page-home-php .features-grid {
    justify-content: center;
  }

  .page-template-page-home .feature-card,
  .page-template-page-home-php .feature-card {
    flex: 1 1 320px;
    max-width: 520px;
    margin: 12px 10px;
  }
}

/* --------------------------- Dashboard image ------------------------- */
.page-template-page-home .dashboard-preview img,
.page-template-page-home-php .dashboard-preview img {
  width: 100%;
  max-width: 820px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* ------------------------------ Trust row ---------------------------- */
@media (max-width: 992px) {
  .page-template-page-home .landing-trust,
  .page-template-page-home-php .landing-trust {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 576px) {
  .page-template-page-home .landing-trust,
  .page-template-page-home-php .landing-trust {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------- Inline CTAs --------------------------- */
.page-template-page-home .landing-inline-cta,
.page-template-page-home-php .landing-inline-cta {
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* --------------------------- Yellow bottom bar ----------------------- */
@media (max-width: 640px) {
  .page-template-page-home .landing-bottom-row,
  .page-template-page-home-php .landing-bottom-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .page-template-page-home .landing-bottom-cta .btn,
  .page-template-page-home-php .landing-bottom-cta .btn {
    width: 100%;
  }
}

/* ---------------------- Example: mobile-only hide -------------------- */
/* Uncomment to hide a section on the homepage when ≤768px wide
@media (max-width: 768px) {
  .page-template-page-home .testimonials-section,
  .page-template-page-home-php .testimonials-section {
    display: none !important;
  }
}
*/

/* ============================================================
   ABOUT PAGE (page-about.php) — MOBILE-ONLY tweaks
   (Desktop uses your main style.css unchanged)
   ============================================================ */
@media (max-width: 768px) {
  body.page-template-page-about,
  body.page-template-page-about-php {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
  }

  /* Hero */
  .page-template-page-about .hero-section,
  .page-template-page-about-php .hero-section {
    text-align: center;
    padding-top: 44px;
    padding-bottom: 44px;
  }
  .page-template-page-about .hero-section h1,
  .page-template-page-about-php .hero-section h1 {
    margin-top: 0;
    margin-bottom: 10px;
  }
  .page-template-page-about .hero-section p,
  .page-template-page-about-php .hero-section p {
    margin: 0 auto 12px;
    max-width: 75ch; /* only constrain on mobile */
    text-align: center;
  }

  /* Buttons */
  .page-template-page-about .buttons,
  .page-template-page-about-php .buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
  }
  .page-template-page-about .buttons .btn,
  .page-template-page-about-php .buttons .btn {
    white-space: nowrap;
    padding: 12px 18px;
  }
  @media (max-width: 380px) {
    .page-template-page-about .buttons,
    .page-template-page-about-php .buttons { flex-wrap: wrap; }
  }

  /* Sections */
  .page-template-page-about .section,
  .page-template-page-about-php .section {
    padding-top: 48px;
    padding-bottom: 48px;
    text-align: center;
  }

  /* Body copy blocks */
  .page-template-page-about .who-text,
  .page-template-page-about-php .who-text {
    margin: 0 auto;
    max-width: 75ch;
    text-align: center;
  }
  .page-template-page-about .who-text h2,
  .page-template-page-about-php .who-text h2 {
    margin-top: 0;
    margin-bottom: 10px;
  }
  .page-template-page-about .who-text p,
  .page-template-page-about-php .who-text p {
    margin-bottom: 12px;
  }

  /* Features */
  .page-template-page-about .features-grid,
  .page-template-page-about-php .features-grid {
    justify-content: center;
  }
  .page-template-page-about .feature-card,
  .page-template-page-about-php .feature-card {
    flex: 1 1 300px;
    max-width: 520px;
    margin: 12px 10px;
    text-align: center;
  }

  /* Testimonials spacing */
  .page-template-page-about .testimonials-section h2,
  .page-template-page-about-php .testimonials-section h2 {
    margin-bottom: 14px;
  }
  .page-template-page-about .testimonial,
  .page-template-page-about-php .testimonial {
    margin-bottom: 18px;
  }

  /* Yellow bottom banner */
  .page-template-page-about .landing-bottom-row,
  .page-template-page-about-php .landing-bottom-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .page-template-page-about .landing-bottom-cta .btn,
  .page-template-page-about-php .landing-bottom-cta .btn {
    width: 100%;
  }
}



/* ============================================================
   CONTACT PAGE (page-contact.php) — hero CTAs side-by-side
   ============================================================ */

.page-template-page-contact .hero-section .buttons,
.page-template-page-contact-php .hero-section .buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.page-template-page-contact .hero-section .buttons .btn,
.page-template-page-contact-php .hero-section .buttons .btn {
  white-space: nowrap;        /* keep labels on one line */
  flex: 0 1 auto;             /* don't stretch full-width */
  padding: 12px 18px;         /* thumb-friendly */
}

@media (max-width: 380px) {
  .page-template-page-contact .hero-section .buttons,
  .page-template-page-contact-php .hero-section .buttons {
    flex-wrap: wrap;
  }
}

/* ============================================================
   SCHEMES OF WORK (page-schemes.php) — mobile tweaks
   ============================================================ */

/* 1) Stack the two info tiles vertically on mobile
   (targets the 2-column grid in “How our Schemes of Work are structured”) */
@media (max-width: 768px) {
  .page-template-page-schemes .section .container > div[style*="grid-template-columns:1fr 1fr"],
  .page-template-page-schemes-php .section .container > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* 2) Hide activity grid + “600+ activities …” line on mobile,
      but keep the “Try activities” button */
@media (max-width: 768px) {
  .page-template-page-schemes .activities-section .activity-grid,
  .page-template-page-schemes-php .activities-section .activity-grid,
  .page-template-page-schemes .activities-section .activity-center,
  .page-template-page-schemes-php .activities-section .activity-center {
    display: none !important;
  }
  /* Ensure the button row stays centered and visible */
  .page-template-page-schemes .activities-section .buttons,
  .page-template-page-schemes-php .activities-section .buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
  }
}

/* ============================================================
   ACTIVITIES (page-activities.php) — mobile tile fixes
   ============================================================ */

/* Make card a centered vertical stack and keep contents inside */
@media (max-width: 576px) {
  .page-template-page-activities .activity-scope .activity-card,
  .page-template-page-activities-php .activity-scope .activity-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;          /* guard against any overflow */
    padding: 14px;
  }

  /* Responsive circular thumbnail: never wider than the card */
  .page-template-page-activities .activity-scope .activity-card-thumb,
  .page-template-page-activities-php .activity-scope .activity-card-thumb {
    width: clamp(110px, 42vw, 160px);
    aspect-ratio: 1 / 1;       /* keep a perfect circle */
    height: auto;              /* let width drive size */
    max-width: 100%;
    display: block;
    margin: 0 auto 10px;
    object-fit: cover;
    border-radius: 50%;
  }
}

/* On very narrow phones, fall back to one tile per row */
@media (max-width: 400px) {
  .page-template-page-activities .activity-scope .activity-card,
  .page-template-page-activities-php .activity-scope .activity-card {
    width: 100% !important;
    flex-basis: 100% !important;
    max-width: 420px;
  }
}

/* ============================================================
   GLOBAL (mobile ≤768px) — hide unlock-CTA cards
   ============================================================ */
@media (max-width: 768px) {
  /* Any "Unlock the full curriculum" CTA zone card */
  .activity-scope .activity-zone.card,
  .titlebar-cta,
  .page-template-page-schemes .titlebar-cta,
  .page-template-page-schemes-php .titlebar-cta {
    display: none !important;
  }
}

/* ───────────────────── Single Activity Mobile Overrides ───────────────────── */
@media (max-width: 768px) {
  /* Hide accordions for overview & outcomes */
  .activity-scope .activity-hero-accordions {
    display: none !important;
  }

  /* Hide tray, tips, and actual H5P embed */
  .activity-scope .activity-lesson-tray,
  .activity-scope .activity-h5p-tip,
  .activity-scope .activity-h5p-wrapper {
    display: none !important;
  }

  /* Show the friendly mobile-only message */
  .activity-scope .activity-h5p-mobile-msg {
    display: block !important;
    background: #fff8dc; /* soft yellow background */
    border: 2px solid #facc15; /* golden border */
    border-radius: 12px;
    padding: 18px 16px;
    margin: 16px 0;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  }

  .activity-scope .activity-h5p-mobile-msg p {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #92400e; /* warm brown for contrast */
    line-height: 1.4;
  }
}

/* Default: hide the mobile-only message on larger screens */
.activity-scope .activity-h5p-mobile-msg {
  display: none;
}
/* ───────────────────── Hide demo lesson tray on tablets & smaller ───────────────────── */
@media (max-width: 1023px) {
  .activity-scope .activity-lesson-tray {
    display: none !important;
  }
}
/* ───────────────────── Clean up empty space in single-activity hero on mobile ───────────────────── */
@media (max-width: 767px) {
  /* Hide the whole accordions area, not just content */
  .activity-scope .activity-hero-accordions {
    display: none !important;
  }

  /* Reduce padding in the hero to tighten it up */
  .activity-scope .activity-hero--single {
    padding: 16px 0 !important;
  }

  /* Tighten spacing around title + intro */
  .activity-scope .activity-title-wrap h1 {
    margin-bottom: 6px !important;
  }
  .activity-scope .activity-intro {
    margin: 4px 0 0 0 !important;
  }
}
/* ───────────────────── Single Activity: responsive overrides ───────────────────── */
@media (max-width: 1023px) {
  /* Hide tray on tablets and below */
  .activity-scope .activity-lesson-tray {
    display: none !important;
  }
}

@media (max-width: 767px) {
  /* Hide the actual H5P player on mobile */
  .activity-scope .activity-h5p-wrapper {
    display: none !important;
  }

  /* Show friendly message */
  .activity-scope .activity-h5p-mobile-msg {
    display: block !important;
    background: #fff8dc;
    border: 2px solid #facc15;
    border-radius: 12px;
    padding: 18px 16px;
    margin: 16px 0;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  }
  .activity-scope .activity-h5p-mobile-msg p {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #92400e;
    line-height: 1.4;
  }

  /* Make CTA buttons side by side */
  .activity-scope .activity-cta-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
  }
  .activity-scope .activity-cta-actions a {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* Default: hide mobile H5P message on larger screens */
.activity-scope .activity-h5p-mobile-msg {
  display: none;
}