/* ============================================================
   COVENANT CHRISTIAN HIGH SCHOOL
   mobile.css  —  site-wide mobile optimization layer

   Loaded on every page AFTER the page's own <style> block, so it
   wins ties in the cascade without needing !important except where
   it has to override an inline style attribute.

   Nothing here changes desktop rendering. Every rule sits inside a
   max-width or touch media query.

   Breakpoints
     1024px  tablet    four and five column grids drop to two
      768px  phone     everything drops to one column
      560px  small     nav trims, type tightens
   ============================================================ */


/* ------------------------------------------------------------
   1. OVERFLOW GUARD
   One wide element anywhere on a page makes the whole document
   scroll sideways, which is the single most common way a site
   feels broken on a phone.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; max-width: 100%; }

  /* Grid and flex children default to min-width: auto, which refuses to
     shrink below their own content and pushes the container wider than
     the screen. This is what was making the Inquire panel, the tuition
     table, and the annual report table run past the viewport at 320px.
     Only one element on the site sets an intentional min-width, and it
     is restored in section 9b. */
  *:not(iframe):not(video):not(img):not(canvas) { min-width: 0; }
  img, svg, video, iframe, canvas, table { max-width: 100%; }
  img { height: auto; }
  /* Long email addresses and URLs are the usual culprits */
  a[href^="mailto:"], a[href^="http"], .footer-contact a, .nf-contact-card a {
    overflow-wrap: anywhere; word-break: break-word;
  }
  p, li, h1, h2, h3, h4, blockquote { overflow-wrap: break-word; }
}


/* ------------------------------------------------------------
   2. GRID COLLAPSE  —  TABLET (<= 1024px)
   Three, four, and five column card grids become two columns.
   Cards stay readable instead of squeezing to unusable widths.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .mvv-grid, .portrait-traits, .stat-strip, .cards-3, .jterm-themes,
  .jterm-themes--3, .featured-alumni, .outcomes-grid, .why-grid,
  .process-steps, .identity-inner, .sports-grid, .coaches-grid,
  .athletics-stats, .values-grid, .alumni-quotes, .portals-grid,
  .camps-grid, .cf-grid, .faculty-stat-strip, .person-grid,
  .faq-contact-bar-inner, .conviction-strip-inner, .arts-photo-grid,
  .choir-grid, .va-grid, .impact-nums, .shield-levels, .pr-cards,
  .stats-answers, .int-testimonials, .what-inner, .options-grid,
  .nf-links-grid, .nf-contacts-grid, .levels-grid, .rhythms-grid,
  .worldview-questions, .life-grid, .athletics-grid, .houses-grid,
  .sports-list, .access-inner, .aid-steps, .expect-grid,
  .visit-types-grid, .wb-name-grid, .wb-mission-grid, .wb-values,
  .quotes-grid, .int-why, .sb-grid, .aid-cards, .aid-grid,
  .nf-docs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Side-by-side splits give up their fixed column at tablet width */
  .welcome-inner, .welcome-split, .faculty-header, .ar-donut-wrap,
  .host-split, .sp-pillar, .nf-hero-inner {
    grid-template-columns: 1fr;
  }
}


/* ------------------------------------------------------------
   3. GRID COLLAPSE  —  PHONE (<= 768px)
   Everything becomes a single column. Full selector list so no
   page-specific grid is left behind.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .mvv-grid, .portrait-traits, .stat-strip, .cards-3, .jterm-themes,
  .jterm-themes--3, .featured-alumni, .outcomes-grid, .why-grid,
  .process-steps, .identity-inner, .sports-grid, .coaches-grid,
  .athletics-stats, .values-grid, .alumni-quotes, .portals-grid,
  .camps-grid, .cf-grid, .faculty-stat-strip, .person-grid,
  .faq-contact-bar-inner, .conviction-strip-inner, .arts-photo-grid,
  .choir-grid, .va-grid, .impact-nums, .shield-levels, .pr-cards,
  .stats-answers, .int-testimonials, .what-inner, .options-grid,
  .nf-links-grid, .nf-contacts-grid, .levels-grid, .rhythms-grid,
  .worldview-questions, .life-grid, .athletics-grid, .houses-grid,
  .sports-list, .access-inner, .aid-steps, .expect-grid,
  .visit-types-grid, .wb-name-grid, .wb-mission-grid, .wb-values,
  .quotes-grid, .int-why, .sb-grid, .aid-cards, .aid-grid,
  .nf-docs-grid,

  .growth-video-inner, .welcome-inner, .welcome-split, .accred-body,
  .faculty-header, .faculty-stats, .careers-inner, .cm-grad-grid,
  .cm-ap-grid, .two-col, .quote-wall, .connect-split, .form-row,
  .form-row-3, .form-check-group, .ar-split, .ar-split--rev,
  .ar-donut-wrap, .sb-main, .phil-split, .drama-split, .phil-inner,
  .gd-areas, .give-options, .sac-grid, .programs-inner,
  .accred-strip-inner, .graduates-grid, .inquire-layout, .int-intro,
  .int-host-grid, .faq-grid, .dest-cols, .jterm-faq, .nf-hero-inner,
  .podcast-hero-split, .episodes-grid, .host-split, .servin-split,
  .faith-questions, .belief-strip-inner, .sp-pillar, .clubs-list,
  .directions-inner, .wtg-options, .wb-vision, .reasons-grid,
  .dp-rates, .footer-grid {
    grid-template-columns: 1fr;
  }

  /* Numbered step rows keep their marker column, just narrower */
  .interview-step { grid-template-columns: 44px 1fr; gap: 14px; }
  .nf-timeline-item { grid-template-columns: 72px 1fr; gap: 14px; }

  /* Grid gaps that were tuned for wide layouts get tightened */
  .pr-cards, .stats-answers, .shield-levels, .levels-grid,
  .houses-grid, .person-grid, .sports-grid { gap: 14px; }

  /* Any flex row that was never told to wrap */
  .hero-actions, .footer-bottom, .footer-social, .cta-bar-actions,
  .btn-row, .drawer-top { flex-wrap: wrap; }
  .footer-bottom { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
}


/* ------------------------------------------------------------
   3b. INLINE GRID OVERRIDE

   19 layouts on this site declare their columns in a style=""
   attribute rather than in a stylesheet. Give alone has 14 of them,
   including the writer card beside "Why Your Gift Matters Here", the
   50%+ / $13.2M / 423 stat band, and the Shield Club tier tiles.

   An inline style beats any stylesheet rule that is not marked
   !important, so every rule in sections 2 and 3 above was being
   silently ignored on exactly those blocks. This is the layer that
   actually collapses them.

   auto-fit and auto-fill grids are excluded because they already
   respond to width correctly on their own.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]) {
    grid-template-columns: 1fr !important;
  }

  /* Those inline grids also carry desktop sized gaps. A 64px or 80px
     gap between stacked blocks is a screenful of nothing on a phone. */
  [style*="gap:80px"], [style*="gap: 80px"],
  [style*="gap:72px"], [style*="gap: 72px"],
  [style*="gap:64px"], [style*="gap: 64px"],
  [style*="gap:48px"], [style*="gap: 48px"],
  [style*="gap:40px"], [style*="gap: 40px"] { gap: 26px !important; }

  /* Inline horizontal padding tuned for a 1200px container */
  [style*="padding:0 36px"], [style*="padding: 0 36px"] {
    padding-left: 24px !important; padding-right: 24px !important;
  }
}

/* Fixed pixel columns inside inline grids, such as the 280px writer
   card on Give, need the same treatment one step earlier so they do
   not push their neighbour off the screen on a small tablet. */
@media (max-width: 1024px) {
  [style*="grid-template-columns:280px"], [style*="grid-template-columns: 280px"],
  [style*="grid-template-columns:320px"], [style*="grid-template-columns: 320px"],
  [style*="grid-template-columns:380px"], [style*="grid-template-columns: 380px"],
  [style*="grid-template-columns:400px"], [style*="grid-template-columns: 400px"],
  [style*="grid-template-columns:300px"], [style*="grid-template-columns: 300px"] {
    grid-template-columns: 1fr !important;
  }
}


/* ------------------------------------------------------------
   3c. FULL BLEED BACKGROUND VIDEO

   The hero videos on the homepage, Athletics, and Alumni fill their box
   by being deliberately larger than it (177.78vh wide by 56.25vw tall)
   and centred so the overflow crops. That is the whole technique, so the
   overflow guard in section 1 must not cap them or they letterbox into a
   short strip with green above and below.
   ------------------------------------------------------------ */
.hero-video-bg iframe,
.video-hero-bg iframe {
  max-width: none;
  min-width: 100%;
  min-height: 100%;
}


/* ------------------------------------------------------------
   3d. STAT TILES STAY TWO UP

   Section 3 flattens every grid to one column, which is right for
   cards carrying a paragraph of copy. It is wrong for stat tiles,
   where each cell is a short figure and a two or three word label.
   Stacked one per row they turn the mission band into a very long
   scroll. Two up reads better and halves the height.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Loose tiles on a plain background. They need breathing room. */
  .sac-grid,
  .outcomes-grid,
  .impact-nums,
  .access-inner,
  .identity-inner {
    grid-template-columns: 1fr 1fr;
    gap: 18px 14px;
  }

  /* Flush tile bands. These sit edge to edge with a green container
     showing through a 2px gap as a hairline divider, so they keep
     whatever gap the page authored. Setting a gap here would open a
     wide green channel between tiles and break the band. */
  .stat-strip,
  .athletics-stats,
  .faculty-stat-strip,
  .fstat-strip {
    grid-template-columns: 1fr 1fr;
  }

  /* In two columns the right hand tile carries a divider against the
     screen edge. Drop it on every second tile. */
  .stat-strip-item:nth-child(2n),
  .athletics-stats > *:nth-child(2n),
  .faculty-stat-strip > *:nth-child(2n) { border-right: none; }

  /* The annual report tiles size themselves. Their 180px floor lands
     on one column at phone width, so bring the floor down. */
  .ar-stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

  /* Tiles sit closer together, so the figures come down a touch to
     keep a clear gap between the number and the label beside it. */
  .sac-stat-num { font-size: 24px; }
  .sac-stat-lbl { font-size: 13px; line-height: 1.3; }
}

/* Checked at 320px: the longest label, "AP and dual credit courses",
   wraps to two lines inside a 113px tile and nothing overflows. So two
   up holds all the way down and there is no need to fall back. */


/* ------------------------------------------------------------
   4. FIXED BACKGROUNDS
   background-attachment: fixed does not work on iOS Safari. The
   image jumps, over-zooms, or freezes mid-scroll. On Android it
   causes repaint stutter. Desktop keeps the parallax effect.
   ------------------------------------------------------------ */
@media (max-width: 1024px), (hover: none) {
  .page-hero-bg, .wb-credo-bg, .sp-hero-bg, .cx-hero-bg,
  .visit-hero-bg, .apply-visit-bg, [style*="background-attachment"] {
    background-attachment: scroll !important;
  }
  /* JS parallax is already disabled below 768px in main.js. This
     resets the class in case it was applied before a resize. */
  .page-hero.js-hero-parallax .page-hero-bg {
    top: 0; bottom: 0; height: 100%; transform: none !important;
  }
  .parallax.js-parallax .parallax-img {
    height: 100%; top: 0; position: relative; transform: none !important;
  }
}


/* ------------------------------------------------------------
   5. HERO AND HEADLINE TYPE
   Desktop clamp floors sit between 42px and 52px. On a 375px
   screen that leaves roughly 320px of usable width, which forces
   awkward breaks in words like ADMISSIONS and FORMATION.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .page-hero h1,
  .hero-section h1,
  .video-hero-inner h1 { font-size: clamp(30px, 8.5vw, 44px); line-height: 1.05; }

  .page-hero-sub, .hero-sub, .video-hero-inner .page-hero-sub {
    font-size: 16px; line-height: 1.6;
  }

  .page-hero { padding: 48px 0 44px; }
  .page-hero-inner, .hero-inner, .video-hero-inner { padding-left: 24px; padding-right: 24px; }

  /* Full viewport heroes are too tall once phone browser chrome
     is accounted for. dvh tracks the collapsing address bar. */
  .hero-section { height: 78vh; height: 78dvh; min-height: 460px; max-height: none; }
  .video-page-hero { height: 62vh; height: 62dvh; min-height: 380px; }
  .hero-inner { padding-top: 64px; }

  /* Eyebrow rules eat horizontal space on narrow screens */
  .page-hero-eyebrow, .hero-eyebrow { font-size: 10px; letter-spacing: 0.2em; gap: 8px; }
  .page-hero-eyebrow::before, .page-hero-eyebrow::after,
  .hero-eyebrow::before, .hero-eyebrow::after { width: 16px; }

  h2 { font-size: clamp(24px, 6.5vw, 34px); line-height: 1.15; }
  h3 { font-size: clamp(18px, 5vw, 24px); }

  .hero-scroll { display: none; }
}

@media (max-width: 560px) {
  .page-hero h1, .hero-section h1, .video-hero-inner h1 { font-size: clamp(28px, 9vw, 38px); }
}


/* ------------------------------------------------------------
   6. NAVIGATION
   Stacked layout below 900px: logo on its own line, link row beneath
   it with the hamburger pinned to the right edge.

   Calendar stays in the bar. Canvas is the one link that comes out,
   because it is a parent portal login rather than a public page and
   it is the difference between the row fitting and the row wrapping.
   It remains in the drawer under Current Families.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  /* styles.css line 201 sets padding: 0 24px here, which wipes out the
     vertical padding set at line 120. Put it back. */
  .nav-inner { padding-top: 12px; padding-bottom: 12px; gap: 10px; }

  /* Full width link row. Space is reserved on the right so the
     centered links never run under the hamburger. */
  .nav-links {
    position: relative;
    width: 100%;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 12px;
    padding-right: 48px;
  }

  /* Hamburger out of flow and pinned to the right edge of the bar */
  .nav-links li:last-child {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }
  .nav-hamburger { width: 44px; height: 44px; margin-left: 0; }

  /* Separation between items comes from the flex gap above rather than
     from link padding, so the plain links stay tight to their own text
     and the gold Give block can carry wider padding of its own. */
  .nav-links a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 4px;
    font-size: 13.5px;
    letter-spacing: 0.05em;
  }

  /* Give is a button, not a link. It gets real horizontal padding. */
  .nav-links a.nav-give { padding: 0 22px; }
}

@media (max-width: 560px) {
  /* Canvas only. Calendar stays. */
  .nav-links li:has(a[href^="https://canvas"]) { display: none; }
  .nav-links { gap: 10px; }
  .nav-links a { font-size: 12.5px; padding: 0 3px; letter-spacing: 0.03em; }
  .nav-links a.nav-give { padding: 0 19px; }
  .nav-logo img { height: 50px; }
}

@media (max-width: 400px) {
  .nav-inner { padding-left: 16px; padding-right: 16px; }
  .nav-links { gap: 8px; padding-right: 44px; }
  .nav-links a { font-size: 12px; padding: 0 2px; letter-spacing: 0.02em; }
  .nav-links a.nav-give { padding: 0 15px; }
}

/* Safety valve for the narrowest phones still in use, such as an
   iPhone SE at 320px. Everything tightens one more step so the row
   never wraps. */
@media (max-width: 360px) {
  .nav-inner { padding-left: 12px; padding-right: 12px; }
  .nav-links { gap: 6px; padding-right: 42px; }
  .nav-links a { font-size: 11.5px; padding: 0 2px; }
  .nav-links a.nav-give { padding: 0 12px; }
}

/* Sticky nav overlaps in-page anchor targets such as
   /student-life/#houses and /academics/#advanced. */
[id] { scroll-margin-top: 120px; }
@media (max-width: 900px) { [id] { scroll-margin-top: 140px; } }

/* Drawer: use dynamic viewport height so the bottom of the menu is
   never hidden behind the phone browser toolbar. */
@media (max-width: 768px) {
  .nav-drawer { width: 100%; max-width: 100%; height: 100vh; height: 100dvh; }
  .drawer-inner { padding: 20px 22px 64px; }
  .dd-photo { height: 66px; }
  .dd-links a { padding: 3px 0; font-size: 15px; }
  .drawer-title { font-size: 20px; }
}


/* ------------------------------------------------------------
   7. TABLES
   Three pages carry real tables. Rather than crushing the columns,
   let the table scroll sideways inside its own box.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .tuition-table, .comparison-table, .ar-table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    white-space: nowrap; font-size: 14px;
    width: 100%; max-width: 100%;
  }
  .tuition-table th, .tuition-table td,
  .comparison-table th, .comparison-table td,
  .ar-table th, .ar-table td { padding: 10px 12px; }
}


/* ------------------------------------------------------------
   8. FORMS
   iOS Safari zooms the whole page whenever a focused field has a
   font size under 16px. Every form on the site currently sits at
   13px to 15px, so every form triggers it.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  input, select, textarea,
  .form-field input, .form-field select, .form-field textarea {
    font-size: 16px;
  }
  input, select, textarea { max-width: 100%; }
  .form-field { margin-bottom: 16px; }
  .inquire-left, .inquire-right { padding: 40px 22px; }
  /* Submit buttons go full width so they are easy to hit */
  button[type="submit"], input[type="submit"], .form-submit { width: 100%; }
  /* Checkbox and radio rows need room for a finger */
  .form-check-group label, .form-check label { padding: 6px 0; display: flex; gap: 10px; align-items: flex-start; text-align: left; }
}


/* ------------------------------------------------------------
   9. BUTTONS AND TOUCH TARGETS
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .btn, .btn-green, .btn-outline-green, .btn-gold, .btn-white,
  .btn-outline-white { min-height: 46px; display: inline-flex;
    align-items: center; justify-content: center; padding: 12px 22px; }

  /* Stacked calls to action fill the column instead of floating */
  .hero-actions .btn, .cta-bar-actions .btn, .visit-cta .btn { width: 100%; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }

  .arrow-link, .dd-title, .footer-col ul li a { padding-top: 4px; padding-bottom: 4px; }
  .social-icon { width: 40px; height: 40px; }
}


/* ------------------------------------------------------------
   9b. FLEX ROWS THAT SQUEEZE THEIR TEXT

   These are side-by-side rows where one child holds a badge, a logo,
   or a fixed-width label, leaving the copy beside it a measure of
   110px to 150px. That is three or four words per line. Each one
   stacks instead.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .va-card, .bcw-strip-inner, .faculty-bcw, .award-banner-inner,
  .dual-logos, .int-host-side, .section-headline-row, .form-yesno,
  .sp-initiative {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* Once the row stacks, the text block still shrinks to its own
     content unless it is told to take the full width back. */
  .bcw-strip-text, .faculty-bcw-text, .va-card p, .va-card h4,
  .sp-initiative > * { width: 100%; }
  .bcw-strip-inner img, .faculty-bcw img, .dual-logos img { width: auto; }

  /* The visual arts card pins its heading to a 140px nowrap column.
     Once the card stacks, the heading can wrap like normal text. */
  .va-card h4 { white-space: normal; min-width: 0; }

  /* Badge and logo images in those rows should not stretch */
  .bcw-strip-inner img, .faculty-bcw img, .dual-logos img { max-width: 180px; height: auto; }
}


/* ------------------------------------------------------------
   10. MEDIA
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .video-wrapper { border-radius: 2px; }
  iframe { max-width: 100%; }

  /* Photo panels are pinned to desktop heights inline (400px to 480px).
     On a phone those become tall empty bands, so they come down to a
     proportionate height. Inline styles need !important to be beaten. */
  [style*="height:400px"], [style*="height: 400px"],
  [style*="height:420px"], [style*="height: 420px"],
  [style*="height:440px"], [style*="height: 440px"],
  [style*="height:460px"], [style*="height: 460px"],
  [style*="height:480px"], [style*="height: 480px"] { height: 250px !important; }
}


/* ------------------------------------------------------------
   11. SPACING AND RHYTHM
   Desktop section padding is generous. On a phone it reads as
   dead space and pushes content below the fold.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  :root { --section-pad: 48px; }
  .container, .footer-inner, .cta-bar-inner { padding-left: 24px; padding-right: 24px; }
  .cta-bar { padding: 44px 0; }
  .site-footer { padding: 44px 0 28px; }
  .footer-grid { gap: 28px; padding-bottom: 32px; }
  .footer-brand p { max-width: none; }
}

@media (max-width: 400px) {
  .container, .footer-inner, .cta-bar-inner,
  .page-hero-inner, .hero-inner { padding-left: 18px; padding-right: 18px; }
}


/* ------------------------------------------------------------
   12. TEXT ALIGNMENT EXCEPTIONS
   styles.css centers text below 768px by design. That rule keys
   off class names containing "card" plus a short list of blocks.
   Sections added since then need the same exemption so their copy
   stays left aligned and readable.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .tuition-table, .comparison-table, .ar-table,
  .dd-col, .dd-links, .drawer-inner,
  .nf-timeline-item, .nf-contact-card, .nf-doc, .nf-link,
  .interview-step, .aid-step, .faq-item, .faq-answer, .faq-q, .faq-a,
  .wb-name-col, .wb-mission-grid p, .wb-credo-body,
  .cf-item, .cf-col, .int-host-grid li, .dp-rates li,
  .form-field, .form-check-group, .form-row, .form-row-3,
  .shield-level, .give-option, .wtg-option, .gd-area,
  .person, .person-grid > *, .coach, .sports-list li, .clubs-list li,
  .episodes-grid > *, .options-grid > *, .visit-types-grid > * {
    text-align: left;
  }
}


/* ------------------------------------------------------------
   13. PRINT AND MOTION COURTESIES
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .bounce { animation: none; }
  * { scroll-behavior: auto; }
}