/* ============================================================
   Kidstown Childcare — Tablet Styles
   Portrait:  768px – 1024px
   Landscape: 1024px – 1366px
   ============================================================ */

/* ════════════════════════════════════════
   GLOBAL TABLET
════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1180px) {

  /* ── Floating buttons hidden on tablet ── */
  .mob-float-btn, .mob-float-call, .mob-call-popup { display: none !important; }

  /* ── Navbar ── */
  .navbar { height: 66px !important; padding: 0 32px !important; }
  .logo-img { height: 56px !important; }
  .hamburger { display: flex !important; width: 46px !important; height: 46px !important; }

  /* ══════════════════
     INDEX — HERO — TABLET REDESIGN
  ══════════════════ */

  /* Full-screen background */
  .hero-video {
    width: 100% !important;
    left: 0 !important;
    object-position: 60% center !important;
  }

  /* Content — bottom of screen, full width */
  .hero-content {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    width: 100% !important;
    min-width: unset !important;
    max-width: 100% !important;
    padding: 80px 56px 96px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  /* Statement cards — left, bold */
  .stmt-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 24px !important;
    align-items: flex-start !important;
  }

  .stmt-card {
    padding: 8px 28px !important;
    border-radius: 8px !important;
    display: inline-block !important;
  }

  .stmt-card--1 span,
  .stmt-card--2 span { font-size: clamp(36px, 5.5vw, 64px) !important; }
  .stmt-line         { font-size: clamp(28px, 4.5vw, 52px) !important; }

  /* Title — large, full span */
  .mask-headline { margin-bottom: 4px !important; }

  .hero-title {
    font-size: clamp(72px, 10.5vw, 120px) !important;
    line-height: 1.0 !important;
  }

  /* Underline */
  .hero-underline {
    width: 55% !important;
    max-width: 480px !important;
    height: 44px !important;
    display: block !important;
    margin-bottom: 20px !important;
  }
  .hero-underline svg { width: 100% !important; height: 100% !important; }

  /* Subtitle — max 60% width so it doesn't stretch too wide */
  .mask-subtitle { margin-top: 0 !important; margin-bottom: 0 !important; }

  .hero-subtitle {
    font-size: clamp(14px, 1.9vw, 19px) !important;
    line-height: 1.75 !important;
    max-width: 85% !important;
  }

  /* Enroll Now — bottom right */
  .hero-cta-right {
    position: absolute !important;
    bottom: 96px !important;
    right: 56px !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    display: block !important;
  }

  .hero.is-ready .hero-cta-right { opacity: 1 !important; transform: none !important; }

  .btn-primary { font-size: 15px !important; padding: 15px 15px 15px 28px !important; gap: 10px !important; }

  /* Ticker */
  .ticker-bar { height: 72px !important; }
  .ticker-card { padding: 16px 26px !important; gap: 8px !important; }
  .ticker-info-val   { font-size: 20px !important; }
  .ticker-info-label { font-size: 10px !important; letter-spacing: 1.5px !important; }

  /* ══════════════════
     ROOMS SECTION
  ══════════════════ */
  .rooms-section { padding: 72px 40px; }
  .rooms-heading { font-size: clamp(34px, 5vw, 56px); }

  .room-circle {
    width: 200px !important;
    height: 200px !important;
  }

  .room-label { font-size: clamp(20px, 2.5vw, 28px); }

  /* ══════════════════
     DAILY ACTIVITIES
  ══════════════════ */
  .day-row { height: 380px; }
  .dr-title { font-size: clamp(26px, 3.5vw, 40px); }
  .dr-desc  { font-size: 14px; }

  /* ══════════════════
     WORRIES + STATEMENT — tight together
  ══════════════════ */

  /* Worries: auto height, no forced min */
  .worries-section { overflow: hidden; }
  .worries-layout  { min-height: unset !important; height: auto !important; }

  /* Side images: narrower so centre breathes */
  .worries-img-col { flex: 0 0 20% !important; }

  .worries-inner {
    flex: 1 !important;
    padding: 48px 44px !important;
  }

  .worries-title {
    font-size: clamp(18px, 2.2vw, 26px) !important;
    margin-bottom: 18px !important;
  }

  .worries-question {
    font-size: clamp(40px, 5.8vw, 68px) !important;
    line-height: 1.2 !important;
    margin-bottom: 22px !important;
  }

  .worries-divider { margin-bottom: 18px !important; }

  .worries-answer {
    font-size: clamp(20px, 2.6vw, 26px) !important;
    line-height: 1.78 !important;
  }

  /* Statement section: reduce padding so no gap */
  .stmt-section { padding: 60px 0 !important; }

  .stmt-layout {
    padding: 0 40px !important;
    gap: 40px !important;
  }

  .stmt-left  { padding: 32px 40px !important; }
  .stmt-quote { font-size: clamp(18px, 2.4vw, 28px) !important; line-height: 1.5 !important; }
  .stmt-logo  { width: 80px !important; height: 80px !important; margin-bottom: 20px !important; }

  .val-card   { padding: 32px 28px !important; }
  .val-title  { font-size: clamp(18px, 2.2vw, 24px) !important; margin-bottom: 8px !important; }
  .val-desc   { font-size: 13px !important; line-height: 1.65 !important; }

  /* ══════════════════
     STATEMENT SECTION
  ══════════════════ */
  .stmt-quote { font-size: clamp(18px, 2.4vw, 28px) !important; }
  .val-title  { font-size: clamp(18px, 2.2vw, 24px); }
  .val-desc   { font-size: 13px; }

  /* ══════════════════
     REVIEWS
  ══════════════════ */
  .reviews-heading { font-size: clamp(26px, 4vw, 48px); }
  .rv-body   { font-size: 13px; line-height: 1.65; }

  /* ══════════════════
     VIDEO CTA
  ══════════════════ */
  .vcta-hero   { font-size: clamp(28px, 4.5vw, 56px) !important; }
  .vcta-action { font-size: clamp(13px, 1.6vw, 16px); }

  /* ══════════════════
     FOOTER
  ══════════════════ */
  .footer-inner { padding: 0 32px; gap: 28px; }
  .ftr-word     { font-size: clamp(40px, 8vw, 100px) !important; }
}

/* ════════════════════════════════════════
   TABLET PORTRAIT (768–1024px)
   Narrower — some layout adjustments
════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Navbar slightly tighter */
  .navbar { padding: 0 24px; }
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 18px; }

  /* Hero title smaller at narrower width */
  .hero-title { font-size: clamp(64px, 10vw, 112px) !important; }

  /* Footer: 2-column grid on narrower tablet */
  .footer-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }

  /* Daily activities shorter */
  .day-row { height: 340px; }

  /* Statement section: stack on portrait tablet */
  .stmt-layout { flex-direction: column; }
  .stmt-left   { max-width: 100%; padding: 48px 40px 32px; }
  .stmt-right  { width: 100%; }
  .val-grid    { grid-template-columns: 1fr 1fr; }

  /* Worries portrait — hide side images, full centre */
  .worries-img-col { display: none !important; }
  .worries-inner   { padding: 48px 52px !important; width: 100% !important; }
  .worries-question { font-size: clamp(44px, 6.5vw, 70px) !important; margin-bottom: 20px !important; }
  .worries-answer   { font-size: clamp(20px, 2.8vw, 28px) !important; }

  /* Statement portrait — stack vertically */
  .stmt-section  { padding: 48px 0 !important; }
  .stmt-layout   { flex-direction: column !important; }
  .stmt-left     { max-width: 100% !important; padding: 32px 40px 24px !important; }
  .stmt-right    { width: 100% !important; }
  .val-grid      { grid-template-columns: 1fr 1fr !important; gap: 0 !important; }

  /* About page story: slightly tighter */
  .story-inner { gap: 40px; padding: 0 40px; }

  /* Values grid: 2×2 fine on tablet */
  .values-inner { padding: 0 40px; }

  /* vm-section 2-col: reduce padding */
  .vm-inner { padding: 48px 40px; }

  /* Sub-sections */
  .sub-inner   { padding: 0 40px; }
  .facts-strip { padding: 48px 40px; }

  /* Contact hero */
  .hero-left  { padding: 80px 40px 48px; }
  .hero-right { min-height: 360px; }

  /* Contact form */
  .main-inner { padding: 0 40px; gap: 48px; }
}

/* ════════════════════════════════════════
   TABLET LANDSCAPE (1025–1180px)
   Close to desktop — minor tweaks only
════════════════════════════════════════ */
@media (min-width: 1025px) and (max-width: 1180px) {

  .navbar { padding: 0 40px; }
  .footer-inner { padding: 0 40px; }

  .hero-title { font-size: clamp(52px, 8.5vw, 92px) !important; }

  .story-inner { padding: 0 48px; }
  .values-inner { padding: 0 48px; }
  .vm-inner     { padding: 48px; }
  .sub-inner    { padding: 0 48px; }
  .facts-strip  { padding: 48px; }
}