/* ============================================================
   SMCU Responsive — Breakpoints & Mobile Adaptations
   Saint Mary's Christian University

   Breakpoints:
     1024px — Tablets / small desktops
      768px — Mobile
      480px — Small mobile

   Accessibility:
     prefers-reduced-motion — disable animations
     print — clean print output
   ============================================================ */


/* ============================================================
   1. TABLET — max-width: 1024px
   ============================================================ */
@media (max-width: 1024px) {

    /* --- Navigation -------------------------------------- */
    .smcu-nav-desktop {
        display: none;
    }

    .smcu-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* --- Grids ------------------------------------------- */
    .smcu-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .smcu-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .smcu-outcomes-list {
        grid-template-columns: 1fr 1fr;
    }

    /* --- Footer ------------------------------------------ */
    .smcu-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* --- Content layout (sidebar stacks below) ----------- */
    .smcu-content-layout {
        grid-template-columns: 1fr;
    }

    .smcu-quick-facts {
        position: static;
    }

    /* --- Contact ----------------------------------------- */
    .smcu-contact-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   2. MOBILE — max-width: 768px
   ============================================================ */
@media (max-width: 768px) {

    /* --- Header ------------------------------------------ */
    .smcu-header-inner {
        height: 64px;
    }

    .smcu-logo {
        height: 42px;
    }

    .smcu-header-right .smcu-btn-gold {
        display: none;
    }

    /* --- Hero (home) ------------------------------------- */
    .smcu-home-hero {
        min-height: 480px;
    }

    .smcu-home-hero__title {
        font-size: clamp(1.8rem, 6vw, 2.5rem);
    }

    .smcu-home-hero__actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    .smcu-home-hero__actions .smcu-btn {
        width: 100%;
    }

    /* --- Hero (subpages) --------------------------------- */
    .smcu-hero {
        min-height: 300px;
    }

    .smcu-hero--small {
        min-height: 220px;
    }

    /* --- Sections ---------------------------------------- */
    .smcu-section {
        padding: 50px 0;
    }

    .smcu-section-header {
        margin-bottom: 2rem;
    }

    /* --- Grids — all stack to single column --------------- */
    .smcu-grid-2,
    .smcu-grid-3,
    .smcu-grid-4 {
        grid-template-columns: 1fr;
    }

    .smcu-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    /* --- Typography -------------------------------------- */
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    /* --- Footer ------------------------------------------ */
    .smcu-footer-grid {
        grid-template-columns: 1fr;
    }

    .smcu-footer-bottom-inner {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    /* --- Cards ------------------------------------------- */
    .smcu-prog-card__highlights {
        grid-template-columns: 1fr;
    }

    /* --- Pricing cards ----------------------------------- */
    .smcu-pricing-card__price {
        font-size: 2rem;
    }

    /* --- Mobile drawer ----------------------------------- */
    .smcu-mobile-drawer {
        width: 100%;
        max-width: 100%;
    }

    /* --- Disable hover transforms on mobile -------------- */
    .smcu-card:hover,
    .smcu-prog-card:hover,
    .smcu-pricing-card:hover {
        transform: none;
    }

    /* --- CTA Band ---------------------------------------- */
    .smcu-cta-band__actions {
        flex-direction: column;
        align-items: center;
    }

    .smcu-cta-band__actions .smcu-btn {
        width: 100%;
        max-width: 360px;
    }

    /* --- Forms ------------------------------------------- */
    .smcu-inline-form {
        flex-direction: column;
    }
}


/* ============================================================
   3. SMALL MOBILE — max-width: 480px
   ============================================================ */
@media (max-width: 480px) {

    /* --- Container --------------------------------------- */
    .smcu-container {
        padding: 0 16px;
    }

    .smcu-footer-grid,
    .smcu-footer-bottom-inner,
    .smcu-header-inner {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* --- Utility bar ------------------------------------- */
    .smcu-utility-left {
        display: none;
    }

    /* --- Stats ------------------------------------------- */
    .smcu-stats-grid {
        grid-template-columns: 1fr;
    }

    .smcu-stat__value {
        font-size: 2rem;
    }

    /* --- Sections ---------------------------------------- */
    .smcu-section {
        padding: 36px 0;
    }

    /* --- CTA Band ---------------------------------------- */
    .smcu-cta-band {
        padding: 40px 0;
    }

    /* --- Feature cards ----------------------------------- */
    .smcu-feature-card {
        padding: 1.5rem;
    }

    /* --- Buttons — ensure 44px tap targets --------------- */
    .smcu-btn {
        min-height: 44px;
    }

    /* --- Cards tighten padding --------------------------- */
    .smcu-card__body {
        padding: 1.25rem;
    }

    .smcu-prog-card {
        padding: 1.25rem;
    }

    /* --- Footer column headings -------------------------- */
    .smcu-footer-col h4 {
        margin-bottom: 0.75rem;
    }
}


/* ============================================================
   4. TOUCH DEVICE — hover: none
   ============================================================ */
@media (hover: none) {
    .smcu-card:hover,
    .smcu-prog-card:hover,
    .smcu-pricing-card:hover,
    .smcu-feature-card:hover {
        transform: none;
    }

    .smcu-btn:hover {
        transform: none;
    }

    /* Ensure comfortable tap targets */
    .smcu-mobile-drawer a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}


/* ============================================================
   5. REDUCED MOTION — prefers-reduced-motion: reduce
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }

    .smcu-animate {
        opacity: 1 !important;
        transform: none !important;
    }

    html {
        scroll-behavior: auto;
    }
}


/* ============================================================
   6. PRINT STYLES
   ============================================================ */
@media print {
    /* Hide chrome */
    .smcu-utility-bar,
    .smcu-header,
    .smcu-mobile-nav,
    .smcu-mobile-drawer,
    .smcu-footer,
    .smcu-cta-band,
    .smcu-back-to-top,
    .smcu-btn {
        display: none !important;
    }

    /* Clean output */
    body {
        color: #000;
        background: #fff;
    }

    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    .smcu-section {
        padding: 1rem 0;
        background: none !important;
    }

    .smcu-hero,
    .smcu-home-hero {
        min-height: auto;
        background: none !important;
        color: #000;
    }

    .smcu-card {
        box-shadow: none !important;
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #555;
    }

    /* Prevent orphaned headings */
    h1, h2, h3, h4 {
        page-break-after: avoid;
        color: #000;
    }
}