/* =====================================================================
   RESPONSIVE.CSS — Enlight Vocational Institute
   Global responsive layer that pairs with style.css, menu.css and
   footer.css. Load this file LAST so its rules can override the base
   desktop styles at each breakpoint.

   Breakpoints used across the site:
     1024px  – small laptops / large tablets (light fine-tuning)
     900px   – tablets (major grid collapses, 2-column layouts)
     700px   – large phones (forms, split layouts stack fully)
     480px   – small phones (single column everywhere, tighter type)
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. GLOBAL SAFETY NET
   --------------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
  width: 100%;
}

body {
  overflow-x: hidden;
}

img,
svg,
video,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* iframes with a fixed pixel height (maps) still need to shrink in width
   without distorting; height is controlled per-component, this just
   guarantees they never force horizontal scroll */
iframe {
  width: 100%;
  padding:0;
}

table {
  max-width: 100%;
}

@media (max-width: 700px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =====================================================================
   1. NAVIGATION (pairs with menu.css)
   ===================================================================== */
@media (max-width: 960px) {
  .brand img {
    margin-left: 0; /* undo the desktop-only offset in menu.css */
  }
}

@media (max-width: 860px) {
  .nav-links {
    display: none;
  }

  .nav-cta {
    display: none;
  }

  .ham {
    display: flex;
  }

  .site-nav-inner {
    padding: 0.7rem 1.2rem;
  }

  .brand-name {
    font-size: 1.02rem;
  }

  .brand img {
    height: 36px;
    width: 36px;
  }

  .mobile-menu {
    display: block;
    max-height: 0;
    overflow: hidden;
    background: var(--white);
    border-top: 1px solid var(--line);
    transition: max-height 0.3s ease;
  }

  .mobile-menu.open {
    max-height: 600px;
  }

  .mobile-menu a {
    display: block;
    padding: 0.9rem 1.5rem;
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }

  .mobile-menu a:last-child {
    border-bottom: none;
  }

  .mobile-menu a.active {
    color: var(--navy);
    font-weight: 600;
    background: var(--blue-tint);
  }

  /* the "More" flyout only makes sense on desktop hover/click layout */
  .nav-more .nav-dropdown {
    display: none;
  }
}

@media (min-width: 320px) and (max-width: 480px) {
  .brand-name {
    font-size: 0.95rem;
  }
  .brand-name small {
    font-size: 0.44rem;
  }
  .mobile-menu {
    display: block;
    max-height: 0;
    overflow: hidden;
    background: var(--white);
    border-top: 1px solid var(--line);
    transition: max-height 0.3s ease;
  }

  .mobile-menu.open {
    max-height: 800px;
  }

  .mobile-menu a {
    display: block;
    padding: 0.7rem 1.5rem;
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }

  .mobile-menu a:last-child {
    border-bottom: none;
  }

  .mobile-menu a.active {
    color: var(--navy);
    font-weight: 600;
    background: var(--blue-tint);
  }
}

/* =====================================================================
   2. HERO SECTIONS
   (page-hero, admissionpage-hero, faq-page-hero, coursepage-hero,
   blog-hero, home-hero and their per-page prefixed duplicates)
   ===================================================================== */
@media (max-width: 900px) {
  [class*="-hero"],
  [class*="hero-enlight"] {
    padding: 3.2rem 1.5rem 3.8rem;
  }

  [class*="hero-shield"] {
    width: 240px !important;
    height: 260px !important;
    opacity: 0.06;
  }
}

@media (max-width: 600px) {
  [class*="-hero"],
  [class*="hero-enlight"] {
    padding: 2.6rem 1.25rem 3.2rem;
    text-align: left;
    margin-top: -1rem;
  }

  [class*="hero-meta"] {
    gap: 1.4rem;
  }

  [class*="hero-buttons"] {
    flex-direction: column;
    align-items: stretch;
  }

  [class*="hero-buttons"] a {
    text-align: center;
  }
}

/* =====================================================================
   3 & 4. CARD GRIDS → SLIDE SIDEWAYS (not stacked)
   Anywhere the grid holds independent, browsable "cards" — stat cards,
   course/blog/news cards, testimonials, team members, feature/vision
   cards — we keep them as one horizontal row and let it scroll rather
   than collapsing to a single stacked column. This matches the
   carousel treatment already used on the homepage (stats, courses,
   news, alumni, vision cards) and extends it site-wide so behaviour
   is consistent everywhere the same component appears.

   Structural / form grids are handled separately in sections 5–7 and
   are deliberately NOT included here — those need every field visible
   at once, not swiped past.
   ===================================================================== */
/*[class*="info-grid"],*/

.simple-grid,
.courses-grid,
.news-grid,
.alumni-grid,
.related-grid,
.culture-grid,
.hub-grid {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

[class*="info-grid"]::-webkit-scrollbar,
[class*="timeline"]:not(.footer-post)::-webkit-scrollbar,
.stats-grid::-webkit-scrollbar,
.home-features-grid::-webkit-scrollbar,
.simple-grid::-webkit-scrollbar,
[class*="team-section-grid"]::-webkit-scrollbar,
.blog-grid::-webkit-scrollbar,
.courses-grid::-webkit-scrollbar,
.courses-wrapper::-webkit-scrollbar,
.news-grid::-webkit-scrollbar,
.alumni-grid::-webkit-scrollbar,
.related-grid::-webkit-scrollbar,
[class*="mission-vision"]:not(
    .aboutpage-mission-vision-card
  )::-webkit-scrollbar,
.home-vision-card-grid::-webkit-scrollbar,
.culture-grid::-webkit-scrollbar,
.hub-grid::-webkit-scrollbar {
  display: none;
}

/* Tablet: two cards visible per view, third peeks at the edge */
@media (max-width: 980px) {
  /*[class*="info-grid"],*/
  
  .simple-grid,
  .courses-grid,
  .news-grid,
  .alumni-grid,
  .related-grid,
  .culture-grid,
  .hub-grid {
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(46%, 1fr) !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.4rem;
  }

  /*[class*="info-grid"] > *,*/
 

  .simple-grid > *,
  .courses-grid > *,
  .news-grid > *,
  .alumni-grid > *,
  .related-grid > *,
  .culture-grid > *,
  .hub-grid > * {
    scroll-snap-align: start;
  }
}

/* Phone: one card shown in full at a time, no peek of the next card.
   Applies to every card/carousel grid site-wide (courses, blog, news,
   stats, alumni, related articles, team, timeline, info cards,
   culture/hub cards, mission-vision, home-vision, etc.) */
@media (max-width: 620px) {
  /*[class*="info-grid"],*/
 
  .simple-grid,
  .courses-grid,
  .news-grid,
  .alumni-grid,
  .related-grid,
  .culture-grid,
  .hub-grid {
    grid-auto-columns: 100% !important;
    gap: 1rem !important;
  }
  .home-hero{
    margin-top: -1rem;
    background-size: cover;
  }
  .home-vision-card-grid {
    display: flex !important;
    flex-direction: column;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .home-features-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-gap: 0.5rem !important;
  }

  .home-feature-box {
    padding: 0.5rem !important;
  }

  /* Courses Page*/

  .courses-wrapper {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  /* admission page */
  .info-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .info-card {
    padding: 0.5rem;
  }
  .info-card .info-icon {
    width: 26px;
    height: 26px;
  }
  .info-card h3 {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
  }
  .info-card p,
  .info-card a {
    font-size: 0.7rem;
    color: var(--slate);
  }

  /* About page*/
  .aboutpage-mission-vision {
    grid-template-columns: 1fr;
  }
  .our-client-grid {
    grid-gap: 0.4rem;
    width: 100% !important;
  }
  .our-client-box {
    padding: 0 !important;
    width: 80%;
  }
  .our-client-box img {
    max-height: 100% !important;
    width: auto !important;
    filter: none;
  }
  .team-section-grid {
    grid-template-columns: 1fr;
  }

  /* Event */

  .news-grid {
    grid-template-columns: 1fr !important;
  }
  .timeline{
    grid-template-columns: 1fr;
  }
  .blog-section{
    padding: 1rem 0;
  }
  .blog-grid{
    grid-template-columns: 1fr;
  }
}

/* ================================
   TABLETS
================================ */
@media (max-width: 768px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

/* ================================
   PHONES
================================ */
@media (max-width: 600px) {
  .home-news-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ================================
   SMALL PHONES
================================ */
@media (max-width: 480px) {
  .home-news-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }
}

/* ================================
   VERY SMALL PHONES
================================ */
@media (max-width: 320px) {
  .news-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .news-card {
    width: 100%;
  }
}

/* =====================================================================
   4c. ARROW-CONTROLLED CAROUSELS (home-vision, stats, courses, news,
   alumni, our-client — the .mobile-carousel-wrapped sections with
   prev/next buttons and dot navigation).

   - Arrows are hidden everywhere by default (desktop shows every card
     in a row, so prev/next buttons serve no purpose there).
   - Arrows only appear once the layout has collapsed to a single
     full-width card (phone view), matching the width at which
     swipe/tap navigation is actually needed.
   ===================================================================== */
.mobile-carousel .carousel-arrow {
  display: none;
}

@media (max-width: 620px) {
  .mobile-carousel .carousel-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .carousel-dots {
  display: block;
  }
}

/* =====================================================================
   4b. WHY CHOOSE US — stays a column grid, not a slider
   These feature boxes read as a scannable checklist, not a browsable
   carousel, so they collapse to fewer columns instead of sliding.
   ===================================================================== */
@media (max-width: 980px) {
  [class*="why-choose"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 560px) {
  [class*="why-choose"] {
    grid-template-columns: 1fr !important;
  }
}

/* =====================================================================
   5. TWO-COLUMN SPLIT LAYOUTS → single column
   about/admission/contact splits, featured post, student-life split
   ===================================================================== */
@media (max-width: 900px) {
  .aboutpage-section-container,
  .home-about-grid,
  .admission-content,
  .contact-wrapper,
  .contact-wrap,
  .featured-post,
  .student-life-content,
  .split-layout,
  .admission-image,
  [class*="about-grid"] {
    grid-template-columns: 1fr !important;
  }

  .aboutpage-image-carousel-container,
  .home-about-image-carousel-container,
  .admission-image,
  .split-layout > div:last-child,
  .student-gallery {
    order: -1;
  }

  .featured-post-body {
    padding: 1.5rem !important;
  }
}

@media (max-width: 520px) {
  .student-gallery {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem !important;
  }
}
@media (max-width: 480px) {
  .contact-container {
    grid-template-columns: 1fr !important;
  }
}
/* =====================================================================
   6. FORMS
   form-grid, choice-row, subject-grid, admissions form fieldsets
   ===================================================================== */
@media (max-width: 760px) {
  [class*="form-grid"] {
    grid-template-columns: 1fr !important;
  }

  [class*="choice-row"] {
    grid-template-columns: 1fr !important;
  }

  [class*="form-block"] {
    padding: 1.4rem 1.2rem !important;
  }

  .radio-row {
    flex-wrap: wrap;
    gap: 0.9rem 1.2rem;
  }
}

@media (min-width: 320px) and (max-width: 480px) {
  [class*="subject-grid-6"],
  [class*="subject-grid-4"],
  [class*="subject-grid-8"] {
    grid-template-columns: 1fr !important;
  }
  [class*="choice-row"] {
    grid-template-columns: 1fr !important;
  }
  [class*="form-block"] {
    margin-left: -3rem;
    margin-right: 0;
  }
  .form-feild,
  label,
  select {
    width: 90vw;
  }
  /* Portfolio */
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
  /* footer */
  .footer-grid {
    display: flex;
    flex-direction: column;
  }

  /* =====================================================================
   7. GALLERY / CAROUSEL GRIDS (department gallery, image carousels)
   ===================================================================== */
  @media (max-width: 980px) {
    .gallery-grid {
      grid-template-columns: repeat(3, 1fr) !important;
    }
  }

  @media (max-width: 700px) {
    .gallery-grid {
      grid-template-columns: repeat(2, 1fr) !important;
    }

    .gallery-tile.wide {
      grid-column: span 2 !important;
    }

    .gallery-filters {
      justify-content: flex-start;
      overflow-x: auto;
      flex-wrap: nowrap;
      padding-bottom: 0.4rem;
      -webkit-overflow-scrolling: touch;
    }

    .filter-btn {
      flex: 0 0 auto;
    }
  }

  @media (max-width: 480px) {
    .gallery-grid {
      grid-template-columns: 1fr 1fr !important;
      gap: 0.7rem !important;
    }

    .lightbox {
      padding: 1rem;
    }

    .lightbox-nav {
      width: 36px;
      height: 36px;
      font-size: 0.95rem;
    }
  }

  /* =====================================================================
   8. SECTION SPACING & TYPE SCALE
   Tighten vertical rhythm and long headings on small screens without
   touching component-specific font sizes already handled by clamp()
   ===================================================================== */
  @media (max-width: 700px) {
    section {
      padding-left: 1.1rem;
      padding-right: 1.1rem;
    }

    .section-heading {
      margin-bottom: 2rem;
    }

    .section-heading h2 {
      font-size: clamp(1.4rem, 6vw, 1.9rem);
    }

    [class*="cta-banner"] {
      padding: 2.4rem 1.5rem !important;
    }
  }

  @media (max-width: 480px) {
    .wrap {
      padding: 0 1rem;
    }

    /* Internships  */

    .inner-section {
      padding: 0;
      padding-bottom: 1rem;
    }

    .icon-card-grid {
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
    .field-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* =====================================================================
   9. TABLES / SLIDERS / MISC COMPONENTS
   ===================================================================== */
  @media (max-width: 700px) {
    [class*="courses_slider"],
    [class*="courses-slider"] {
      aspect-ratio: 4 / 3;
    }
       /*
    .contact-map iframe,
    .map-wrap iframe,
    [class*="map-container"] iframe {
      height: 280px;
    }*/  
    .map-container{
    padding:0 !important;
    background-color:red !important;
    }
  }



  /* =====================================================================
   11. ACCESSIBILITY — reduced motion
   ===================================================================== */
  @media (prefers-reduced-motion: reduce) {
    .aboutpage-image-slides {
      animation: none;
    }

    * {
      scroll-behavior: auto !important;
    }
  }
}

/* ================================================================
   TABLET
   ================================================================ */

@media (max-width: 768px) {
  .evi-gallery-section {
    padding: 4rem 0;
  }

  .evi-gallery {
    gap: 0.8rem;
  }

  .evi-gallery-item {
    height: 230px;
  }

  .evi-gallery-item-wide {
    height: 280px;
  }

  .evi-gallery-overlay {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================================================================
   PHONES
   ================================================================ */

@media (max-width: 600px) {
  .evi-gallery {
    grid-template-columns: 1fr;
  }

  .evi-gallery-item {
    grid-column: 1;
    height: 220px;
  }

  .evi-gallery-item-wide {
    height: 240px;
  }

  .evi-gallery-section {
    padding: 3rem 0;
  }

  .evi-gallery-header {
    margin-bottom: 1.8rem;
  }

  .portfolio-intro {
    padding: 1.5rem 1rem;
    width: 100%;
    margin: auto;
  }

  .portfolio-intro h2 {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    color: var(--navy-deep);
    margin-bottom: 0.6rem;
  }
  .portfolio-section {
    padding: 0;
  }
  .portfolio-wrap {
    width: 90%;
    max-width: 100%;
    padding: 0;
  }
}
/* ================================================================
   SMALL PHONES
   ================================================================ */

@media (max-width: 480px) {
  .evi-gallery {
    gap: 0.7rem;
  }

  .evi-gallery-item {
    height: 190px;
    border-radius: 9px;
  }

  .evi-gallery-item-wide {
    height: 210px;
  }

  .evi-lightbox {
    padding: 1rem;
  }

  .evi-lightbox-close {
    top: 0.8rem;
    right: 0.8rem;
  }
}

/* ================================================================
   VERY SMALL PHONES
   ================================================================ */

@media (max-width: 320px) {
  .evi-gallery-item {
    height: 170px;
  }

  .evi-gallery-item-wide {
    height: 185px;
  }

  .evi-gallery-header h2 {
    font-size: 1.8rem;
  }
}