﻿    /* =========================
      RESPONSIVE
    ========================== */
    @media (max-width: 1024px){
      .event-card{grid-template-columns:minmax(300px,.62fr) minmax(0,1fr)}
      .hero-grid{grid-template-columns: 1fr}
      .hero-banner{min-height: 320px}
      .docs-grid{grid-template-columns: repeat(2,1fr)}
      .day-row{grid-template-columns: 1fr}
      .medical-gallery{grid-template-columns: 1fr}
      .gallery .tile{grid-column: span 6}
      .route-grid{grid-template-columns: 1fr}
      .organization-info-grid{grid-template-columns: 1fr}
      .info-feature-grid,
      .info-feature-grid-compact,
      .info-two-columns,
      .info-doc-link-row,
      .info-document-grid,
      .leadership-grid{
        grid-template-columns: 1fr;
      }
      .pedagog-grid,
      .counselor-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .mandatory-gallery{
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .parents-grid{grid-template-columns: 1fr}
      .rows{grid-template-columns: 1fr}
      .team-grid{grid-template-columns: 1fr}
      .team-points{display:flex; flex-wrap:wrap}
      .sticky-note{position:relative; top:auto}
      .footer-grid{grid-template-columns: 1fr}
      .footer-logo-panel{
        order:-1;
        min-height:160px;
      }
      .footer-logo-link img{
        max-height:180px;
      }
      .scroll-prev{left:6px}
      .scroll-next{right:6px}
    }
    @media (max-width: 1280px){
      .nav{
        grid-template-columns:auto minmax(0, 680px) auto;
        column-gap:22px;
      }
      nav.desktop a:not(.btn-primary){
        font-size:12px;
        padding:5px 4px;
      }
    }

    @media (max-width: 1180px){
      nav.desktop{display:none}
      .header-cta{display:none}
      .burger{display:inline-flex}
      .mobile-panel{display:block}
      .mobile-panel .panel{
        max-height:calc(100vh - 116px);
        overflow-y:auto;
        overscroll-behavior:contain;
      }
    }

    @media (max-width: 768px){
      .event-card{grid-template-columns:1fr; gap:14px; padding:16px}
      .event-card-media{min-height:0; height:auto; aspect-ratio:3 / 2; align-self:start}
      .event-card-media img{min-height:0; height:100%; object-position:50% 50%}
      .event-card-actions{display:grid; grid-template-columns:1fr 1fr}
      .event-card-actions .btn{min-width:0; white-space:normal}
      .event-modal .box{padding:20px 16px}
      .event-modal .topbar{align-items:flex-start}
      .event-modal-header h3{
        font-size:24px;
        line-height:1.18;
        overflow-wrap:anywhere;
      }
      .event-modal-tags{display:grid; gap:6px}
      .event-modal-tags .tag{white-space:normal}
      .event-modal-hero{min-height:260px; height:52vw}
      .event-detail-columns{grid-template-columns:1fr}
      .event-feature-details{grid-template-columns:1fr}
      .event-schedule > div{grid-template-columns:1fr; gap:3px}
      .info-page-title h1 span{
        white-space:normal;
      }
      .info-data-list div,
      .info-mini-list div{
        grid-template-columns: 1fr;
        gap:6px;
      }
      .mandatory-gallery{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .modal{
        align-items:stretch;
        padding:
          max(12px, env(safe-area-inset-top))
          max(12px, env(safe-area-inset-right))
          max(12px, env(safe-area-inset-bottom))
          max(12px, env(safe-area-inset-left));
        overflow:hidden;
      }
      .modal .box{
        width:100%;
        max-width:100%;
        height:100%;
        max-height:none;
        min-height:0;
        box-sizing:border-box;
        margin:0;
      }
      #photoModal{
        padding:12px;
        overflow:hidden;
      }
      #photoModal .box{
        max-width:100%;
        max-height:calc(100dvh - 24px);
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
        pointer-events:auto;
      }
      #photoModal .photo-modal-media{
        width:100%;
        max-width:100%;
        max-height:calc(100dvh - 24px);
        padding:0;
        box-sizing:border-box;
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
      }
      #photoModal .photo-modal-media img{
        display:block;
        width:100%;
        height:auto;
        max-width:100%;
        max-height:calc(100dvh - 28px);
        object-fit:contain;
        margin:0 auto;
      }
      .resort-grid{
        grid-template-columns: 1fr;
        gap:16px;
        align-items:start;
      }
      .resort-grid img{
        display:block;
        width:100%;
        max-width:100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
      }
      .js-open-day-photo{
        width:100%;
        max-width:100%;
        display:block;
        white-space:normal;
        text-align:center;
        line-height:1.3;
        padding:12px 16px;
      }
      .day-cta-break{display:block}
      .grid-4{grid-template-columns: 1fr 1fr}
      .grid-2{grid-template-columns: 1fr}
      .faq{grid-template-columns: 1fr}
      .contact-grid{grid-template-columns: 1fr}
      .contact-list-wide{grid-template-columns: 1fr}
      .contact-column-main{
        justify-self:stretch;
        width:100%;
      }
      .form-row{grid-template-columns: 1fr}
      .footer-grid{grid-template-columns: 1fr}
      .footer-info,
      .footer-contacts{
        text-align:left;
      }
      .hero-grid{grid-template-columns: 1fr}
      .hero-left{
        display:grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:8px;
      }
      .hero-left h1,
      .hero-left .lead,
      .hero-left .hero-banner-mobile,
      .hero-left .hero-actions{
        grid-column: 1 / -1;
      }
      .hero-left h1{max-width:none}
      .hero-banner-desktop{display:none}
      .hero-banner-mobile{
        display:block;
        min-height: 260px;
        margin: 2px 0 8px;
      }
      .hero-perks,
      .hero-tags{display:contents}
      .hero-perks .perk,
      .hero-tags .kicker{
        width:100%;
        min-width:0;
        justify-content:flex-start;
        gap:7px;
        padding:6px 8px;
        font-size:10px;
        line-height:1.2;
        white-space:normal;
      }
      .hero-perks .perk i,
      .hero-tags .kdot{
        font-size:10px;
      }
      .final-cta-text{white-space:normal}
      .final-cta-break{display:block}
      #shifts .subhead{flex-direction:column; align-items:flex-start}
      #shifts .subhead .btn{align-self:flex-start; margin-top:10px}
      #team .subhead{flex-direction:column; align-items:flex-start}
      #team .subhead .btn{align-self:flex-start; margin-top:10px}
      .shift-modal .topbar{
        display:grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items:start;
        gap:12px;
      }
      .shift-modal .tag{
        padding:0;
        border:none;
        background:none;
        box-shadow:none;
        font-size:22px;
        line-height:1.2;
      }
      .shift-modal .box{
        padding:20px 16px;
        max-height:none;
      }
      .payment-modal .box{
        padding:20px 16px;
      }
      .shift-modal .content{grid-template-columns: 1fr}
      .shift-modal .shift-top{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:14px;
      }
      .shift-modal .shift-right{
        order:-1;
        display:block;
      }
      .shift-modal .shift-right img{
        width:100%;
      }
      .program-modal .box{
        padding:20px 16px;
      }
      .program-modal .content{
        gap:14px;
      }
      .program-modal .shift-left{
        display:block;
      }
      .program-modal .shift-left h3{
        font-size:22px;
      }
      .program-modal .shift-right img{
        min-height:0;
        max-height:42vh;
        object-fit:contain;
        transform:none;
      }
      .program-modal-narrow-photo .shift-top{
        gap:14px;
      }
      .program-modal-feature,
      .program-modal .shift-lists > div{
        padding:14px;
      }
      .payment-modal-content{
        display:flex !important;
        flex-direction:column;
        gap:16px;
        overflow:auto;
        font-size:14px;
      }
      .payment-modal-media{
        position:static;
        order:-1;
      }
      .payment-modal-media img{
        max-width:100%;
        max-height:42vh;
        margin:0;
      }
      .privacy-modal-grid{
        grid-template-columns: 1fr;
      }
      #shifts .scroller{grid-auto-columns: minmax(300px, 300px)}
      #shifts .scroller > .shift{min-height: 590px}
      .shift-media-tag{
        display:none;
      }
      .tile{min-height: 160px}
      .scroll-btn{display:none}
    }
    @media (max-width: 420px){
      .nav{
        grid-template-columns:minmax(0, 1fr) auto;
        justify-content:stretch;
        column-gap:10px;
      }
      .brand{min-width:0}
      .logo-image{
        width:150px;
        height:54px;
      }
      .burger{
        gap:7px;
        padding:9px 10px;
      }
      .event-card-media,.event-card-media img{min-height:0}
      .event-card-actions{grid-template-columns:1fr}
      .event-modal-header h3{font-size:22px}
      .event-modal-hero{min-height:210px; height:58vw}
      .container{width: calc(100% - 28px)}
      .modal{
        padding:
          max(10px, env(safe-area-inset-top))
          max(10px, env(safe-area-inset-right))
          max(10px, env(safe-area-inset-bottom))
          max(10px, env(safe-area-inset-left));
      }
      .resort-grid{
        gap:14px;
      }
      .resort-grid img{
        aspect-ratio: 4 / 3;
      }
      .js-open-day-photo{
        font-size:14px;
        padding:11px 14px;
      }
      .grid-4{grid-template-columns: 1fr}
      .pedagog-grid,
      .counselor-grid{
        grid-template-columns: 1fr;
      }
      .docs-grid{grid-template-columns: 1fr}
      .gallery .tile{grid-column: span 12}
      .hero-banner-mobile{
        min-height: 220px;
        margin: 0 0 6px;
      }
      .hero-perks .perk,
      .hero-tags .kicker{
        padding:5px 7px;
        font-size:9px;
        gap:5px;
      }
      .hero-brand-line{
        letter-spacing:0.18em;
        font-size:1.34em;
      }
      .team-points{display:flex; flex-wrap:wrap}
      #shifts .scroller{grid-auto-columns: minmax(86vw, 86vw)}
      #shifts .scroller > .shift{min-height: 560px}
      .mobile-actions{grid-template-columns: 1fr}
      .team-collage{aspect-ratio:auto}
      .team-collage .team-photo{min-height:220px}
    }

    @media (prefers-reduced-motion: reduce){
      *{transition:none !important; scroll-behavior:auto !important}
    }

