/* ═══════════════════════════════════════════════════════════════
   CYA RESPONSIVE OVERRIDES
   Loaded via template.conf — overrides Zoho platform column collapse
   ═══════════════════════════════════════════════════════════════ */

/* ═══════ TABLET (768px – 991px) ═══════ */

@media all and (min-width: 768px) and (max-width: 991px) {
  
  /* Force rows to stay horizontal on tablet */
  .zpsection .zprow,
  .theme-section .zprow,
  .theme-content-area .zprow {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  
  /* Default: 2 columns on tablet */
  .zpsection .zprow > .zpcolumn,
  .theme-section .zprow > .zpcolumn,
  .theme-content-area .zprow > .zpcolumn {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  
  /* Single-column rows stay full width */
  .zpsection .zprow > .zpcolumn:only-child,
  .theme-section .zprow > .zpcolumn:only-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* 3-column rows: keep 3 across on tablet */
  .zpsection .zprow > .zpcolumn:first-child:nth-last-child(3),
  .zpsection .zprow > .zpcolumn:first-child:nth-last-child(3) ~ .zpcolumn {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    width: 33.333% !important;
  }
  
  /* 4-column rows: 2x2 grid on tablet */
  .zpsection .zprow > .zpcolumn:first-child:nth-last-child(4),
  .zpsection .zprow > .zpcolumn:first-child:nth-last-child(4) ~ .zpcolumn {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  
  /* Hero stats — force 4 across on tablet */
  .cya-hero-overlay .zprow > .zpcolumn:first-child:nth-last-child(4),
  .cya-hero-overlay .zprow > .zpcolumn:first-child:nth-last-child(4) ~ .zpcolumn {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
  
  /* Hero main content row — full width */
  .cya-hero-overlay > .zprow > .zpcolumn:only-child,
  .cya-hero-overlay .zprow > .zpcolumn:first-child:nth-last-child(1) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Font scaling — tablet */
  h1, h1.zpheading, .zpelem-heading h1 { font-size: 32px !important; }
  h2, h2.zpheading, .zpelem-heading h2 { font-size: 28px !important; }
  h3, h3.zpheading, .zpelem-heading h3 { font-size: 24px !important; }
  h4, h4.zpheading, .zpelem-heading h4 { font-size: 20px !important; }
  h5, h5.zpheading, .zpelem-heading h5 { font-size: 16px !important; }
  h6, h6.zpheading, .zpelem-heading h6 { font-size: 14px !important; }
  body, p, .zptext, .zptext p, .zpelem-text p, .zpelem-text { font-size: 15px !important; }
  
  .cya-impact-num, .cya-impact-num .zpheading, .cya-impact-num h2 { font-size: 40px !important; }
  .cya-impact-stat-num, .cya-impact-stat-num .zpheading { font-size: 40px !important; }
  .cya-hero-stat-num, .cya-hero-stat-num .zpheading { font-size: 36px !important; }
  .cya-testimonial h5, .cya-testimonial h5.zpheading { font-size: 20px !important; }
  .cya-photo-break h2, .cya-photo-break h2.zpheading { font-size: 26px !important; }
  
  /* Section padding — tighter on tablet */
  .theme-section { padding-block-start: 40px !important; padding-block-end: 40px !important; }
  
  /* Left alignment ONLY for icon+text rows, not section headers */
  .zpelem-iconheading, .zpelem-iconheadingtext {
    text-align: left !important;
  }
  
  .zpelem-iconheading .zpicon-common,
  .zpelem-iconheadingtext .zpicon-common {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* Cards — reduce min-height on tablet */
  .cya-card-blue.zpelem-box, .cya-card-gold.zpelem-box,
  .cya-card-red.zpelem-box, .cya-card-green.zpelem-box {
    min-height: 320px !important;
    padding: 28px !important;
  }
  
  /* Location cards */
  .cya-location-card { min-height: 260px !important; padding: 28px !important; }
  
  /* Images — constrain height on tablet */
  .zpsection .zpelem-image img {
    max-height: 400px !important;
    object-fit: cover !important;
    width: 100% !important;
  }
}


/* ═══════ MOBILE (max-width: 767px) ═══════ */

@media all and (max-width: 767px) {

  /* Mobile: single column is correct, just fix sizing */
  .zpsection .zprow > .zpcolumn {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Hero stats — 2x2 on mobile */
  .cya-hero-overlay .zprow > .zpcolumn:first-child:nth-last-child(4),
  .cya-hero-overlay .zprow > .zpcolumn:first-child:nth-last-child(4) ~ .zpcolumn {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  
  /* Impact stats — 2x2 on mobile */
  .cya-bg-navy .zprow > .zpcolumn:first-child:nth-last-child(4),
  .cya-bg-navy .zprow > .zpcolumn:first-child:nth-last-child(4) ~ .zpcolumn {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }

  /* Font scaling — mobile */
  h1, h1.zpheading, .zpelem-heading h1 { font-size: 28px !important; }
  h2, h2.zpheading, .zpelem-heading h2 { font-size: 24px !important; }
  h3, h3.zpheading, .zpelem-heading h3 { font-size: 20px !important; }
  h4, h4.zpheading, .zpelem-heading h4 { font-size: 18px !important; }
  h5, h5.zpheading, .zpelem-heading h5 { font-size: 15px !important; }
  h6, h6.zpheading, .zpelem-heading h6 { font-size: 13px !important; }
  body, p, .zptext, .zptext p, .zpelem-text p, .zpelem-text { font-size: 14px !important; }
  
  .cya-impact-num, .cya-impact-num .zpheading, .cya-impact-num h2 { font-size: 32px !important; }
  .cya-impact-stat-num, .cya-impact-stat-num .zpheading { font-size: 32px !important; }
  .cya-hero-stat-num, .cya-hero-stat-num .zpheading { font-size: 28px !important; }
  .cya-testimonial h5, .cya-testimonial h5.zpheading { font-size: 18px !important; }
  .cya-photo-break h2, .cya-photo-break h2.zpheading { font-size: 22px !important; }
  
  /* Section padding — tighter on mobile */
  .theme-section { padding-block-start: 32px !important; padding-block-end: 32px !important; }
  
  /* Left alignment ONLY for icon+text rows, not section headers */
  .zpelem-iconheading, .zpelem-iconheadingtext {
    text-align: left !important;
  }
  
  .zpelem-iconheading .zpicon-common,
  .zpelem-iconheadingtext .zpicon-common {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* Cards — smaller on mobile */
  .cya-card-blue.zpelem-box, .cya-card-gold.zpelem-box,
  .cya-card-red.zpelem-box, .cya-card-green.zpelem-box {
    min-height: 280px !important;
    padding: 24px !important;
    border-radius: 20px !important;
  }
  
  .cya-location-card { min-height: 220px !important; padding: 24px !important; }
  .cya-feat-card { padding: 24px !important; }
  .cya-testimonial { padding: 28px 20px !important; }
  .cya-testimonial::before { font-size: 60px !important; top: 8px !important; left: 16px !important; }
  
  /* Photo break — shorter on mobile */
  .cya-photo-break { min-height: 35vh !important; }
  .cya-photo-break .zpcontainer, .cya-photo-break .zpcontainer-fluid { padding-left: 20px !important; }
  
  /* Images — constrain on mobile */
  .zpsection .zpelem-image img {
    max-height: 300px !important;
    object-fit: cover !important;
    width: 100% !important;
  }
  
  /* Buttons — full width on mobile */
  .cya-hero-overlay .zpbutton-type-primary,
  .cya-hero-overlay .zpbutton-type-secondary {
    padding: 14px 28px !important;
    font-size: 14px !important;
  }
  
  /* Accordion — tighter on mobile */
  .zpaccordion-header { font-size: 14px !important; padding: 14px 16px !important; }
  .zpaccordion-content { padding: 0 16px 14px !important; font-size: 13px !important; }
  
  /* Campus cards */
  .cya-campus-card-blue, .cya-campus-card-red { padding: 20px !important; }
  
  /* Portal cards */
  .cya-portal-card { padding: 24px !important; }
  .cya-portal-icon-blue, .cya-portal-icon-green, .cya-portal-icon-red, .cya-portal-icon-gold {
    width: 48px !important; height: 48px !important;
  }
}


/* ═══════ SMALL MOBILE (max-width: 480px) ═══════ */

@media all and (max-width: 480px) {
  h1, h1.zpheading, .zpelem-heading h1 { font-size: 24px !important; }
  h2, h2.zpheading, .zpelem-heading h2 { font-size: 20px !important; }
  h3, h3.zpheading, .zpelem-heading h3 { font-size: 18px !important; }
  body, p, .zptext, .zptext p, .zpelem-text p { font-size: 13px !important; }
  
  .cya-impact-num, .cya-impact-num .zpheading { font-size: 28px !important; }
  .cya-hero-stat-num, .cya-hero-stat-num .zpheading { font-size: 24px !important; }
  
  .cya-hero-overlay .zpcontainer,
  .cya-hero-overlay .zpcontainer-fluid,
  .cya-hero-overlay .zpcont-full-stretch {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 40px !important;
    padding-top: 80px !important;
  }
  
  .cya-hero-overlay { min-height: 70vh !important; }
}