/* ==========================================================================
   Campus Yatra — responsive.css
   Overrides for viewports below the approved desktop layout.

   >= 1440px        Large desktop  (style.css, 1rem = 16px)
   1200 – 1439px    Laptop         (style.css, proportional root scale)
   992 – 1199px     Small laptop / landscape tablet
   768 – 991px      Tablet
   <  768px         Mobile
   ========================================================================== */

/* ---------- Below 1200px: collapsed navigation, re-flowed grids ---------- */
@media (max-width: 1199.98px) {
  .cy-br-desktop { display: none; }

  /* Header: stays visible while scrolling on tablet / phone */
  .cy-header { position: sticky; top: 0; box-shadow: 0 1px 0 var(--cy-border); }
  .cy-navbar { height: auto; min-height: 4.5rem; padding: .5rem 0; }
  .cy-brand { width: auto; }
  .cy-brand img { height: 3.25rem; }
  .cy-navbar .navbar-collapse {
    margin-top: .5rem; padding: .5rem 0 1rem;
    border-top: 1px solid var(--cy-border);
    max-height: calc(100vh - 5rem); max-height: calc(100dvh - 5rem); overflow-y: auto; overscroll-behavior: contain;
  }
  .cy-nav { gap: 0; margin-left: 0; align-items: stretch; }
  .cy-nav .nav-link { padding: .85rem .25rem; font-size: 1rem; border-bottom: 1px solid #F3F5F8; }
  .cy-nav .nav-link.active::after { display: none; }
  .cy-nav .dropdown-toggle { display: flex; justify-content: space-between; align-items: center; }
  .cy-dropdown { border: 0; box-shadow: none; padding: .25rem 0 .5rem .75rem; font-size: 1rem; }
  .cy-dropdown .dropdown-item { padding: .7rem .8rem; white-space: normal; }
  .cy-header__cta { width: 100%; height: 3.25rem; margin-top: 1rem; font-size: 1rem; }

  /* Hero */
  .cy-hero { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .cy-hero__inner { width: auto !important; margin: 0 0 0 1.5rem; padding-right: 1rem; }
  .cy-hero__content { padding: 2rem 0; max-width: none; }
  .cy-hero__title { font-size: clamp(2rem, 3.55vw, 2.7rem); line-height: 1.14; }
  .cy-hero__lead { font-size: 1.05rem; line-height: 1.7; }
  .cy-hero__visual { position: relative; width: 100%; }
  .cy-stats { flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 1.6rem; }
  .cy-stat__icon { font-size: 2rem; }

  /* Buttons */
  .cy-btn--lg { min-width: 0; height: 3.6rem; padding: 0 1.8rem; font-size: 1.1rem; }
  .cy-btn--xl { min-width: 0; height: 4rem; padding: 0 1.6rem; font-size: 1.05rem; }

  /* Section headings */
  .cy-section__title, .cy-how__title { font-size: 2rem; }
  .cy-how__subtitle { font-size: 1.1rem; }

  /* How it helps: 3 x 2 */
  .cy-steps { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; }
  .cy-step:nth-child(3n)::after { display: none; }
  .cy-step__icon { width: 5.25rem; height: 5.25rem; font-size: 2.4rem; }
  .cy-step:not(:last-child)::after { top: 2.625rem; }
  .cy-step__title { font-size: 1.1rem; white-space: normal; }
  .cy-step__text { margin-top: .6rem; font-size: 1rem; line-height: 1.6; }

  /* Courses */
  .cy-course-grid { grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 1rem; }
  .cy-course { height: 8rem; }
  .cy-course__title { padding-top: 1.4rem; font-size: .95rem; line-height: 1.45rem; }
  .cy-course__title--tight { font-size: .86rem; }

  /* Colleges */
  .cy-college-grid { grid-template-columns: repeat(3, 1fr); }
  .cy-college { height: 8rem; }
  .cy-college img { max-height: 6.6rem; }

  /* Students / Parents: one panel per row */
  .cy-audience__grid { grid-template-columns: 1fr; }
  .cy-panel { min-height: 30rem; }
  .cy-panel__body, .cy-panel--parents .cy-panel__body { margin-left: min(46%, 19.5rem); padding: 2rem 1.25rem 2rem 1rem; }
  .cy-panel__title { font-size: 2.1rem; }
  .cy-checklist li { min-height: 3rem; font-size: 1.05rem; }
  .cy-panel .cy-btn--lg, .cy-panel--parents .cy-btn--lg { min-width: 0; height: 3.6rem; font-size: 1.1rem; margin-top: 1rem; }

  /* Articles: uniform thumbnails */
  .cy-article-grid { grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); gap: 1rem; }
  .cy-article { height: 11.5rem; }
  .cy-article__img { flex: 0 0 38%; width: 38%; max-width: none; height: 100%; }
  .cy-article__more { padding-top: .75rem; }

  /* CTA */
  /* CTA: copy takes the full banner width, photo is hidden */
  .cy-cta { padding-inline: .75rem; }
  .cy-cta__banner { min-height: 0; }
  .cy-cta__img { display: none; }
  .cy-cta__body { margin-left: 0; padding: 0 1.5rem; }
  .cy-cta__top { flex-wrap: wrap; justify-content: center; text-align: center; gap: 1rem; padding: 2rem 0 1.25rem; min-height: 0; }
  .cy-cta__copy { flex: 1 1 100%; }
  .cy-cta__title { font-size: 2rem; white-space: normal; }
  .cy-cta__text { font-size: 1.15rem; }
  .cy-cta .cy-btn--xl { margin-top: 0; }
  .cy-cta .cy-btn--xl .bi-telephone-fill { font-size: 1.4rem; margin-right: .4rem; }
  .cy-cta__spark { display: none; }
  .cy-cta__features { flex-wrap: wrap; justify-content: center; gap: .75rem 0; min-height: 0; padding: 1rem 0 1.25rem; }
  .cy-cta__features li { font-size: 1rem; gap: .75rem; }
  .cy-cta__icon { flex-basis: 3.25rem; width: 3.25rem; height: 3.25rem; font-size: 1.6rem; }

  /* Footer */
  .cy-footer { padding-top: 2.25rem; }
  .cy-footer__grid { grid-template-columns: .9fr 1.35fr 1.1fr 1.35fr; gap: 1.5rem 1.25rem; }
  .cy-footer__brand { grid-column: 1 / -1; }
  .cy-footer__about { max-width: 34rem; }
  .cy-footer__col { padding-top: 0; }
  .cy-footer__links li { line-height: 1.4; padding: .4rem 0; }
  .cy-footer__links { margin-top: .75rem; }
}

/* ---------- 992 – 1199px ---------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .cy-hero__content { padding-left: .5rem; }
}

/* ---------- Tablet and below (< 992px) ---------- */
@media (max-width: 991.98px) {
  /* Hero stacks: copy first, photograph below */
  .cy-hero { display: block; background: linear-gradient(180deg, #FFFFFF 0%, #FFFDFB 40%, #FEF6EE 100%); }
  .cy-hero__inner { width: calc(100% - 3rem) !important; margin: 0 auto; padding-right: 0; }
  .cy-hero__content { padding: 2rem 0 1.5rem; }
  .cy-hero__title { font-size: clamp(1.75rem, 6.2vw, 3rem); }
  .cy-line { white-space: normal; }
  .cy-hero__lead { max-width: 36rem; }
  .cy-hero__visual { max-width: 40rem; margin-left: auto; border-radius: 0; }

  .cy-section__head { flex-wrap: wrap; }
  .cy-colleges .cy-link-more { margin-top: 0; }

  /* Footer: link columns side by side, contact details on their own row */
  .cy-footer__grid { grid-template-columns: 1fr 1.4fr 1.2fr; }
  .cy-footer__grid > :last-child { grid-column: 1 / -1; }
}

/* ---------- Mobile (< 768px) ---------- */
@media (max-width: 767.98px) {
  .container.cy-container { width: calc(100% - 2rem); }
  .container.cy-container--wide { width: calc(100% - 1.5rem); }
  .cy-hero__inner { width: calc(100% - 2rem) !important; }

  .cy-section__title, .cy-how__title { font-size: 1.6rem; }
  .cy-section__subtitle { font-size: 1rem; }
  .cy-section { padding-top: 2.25rem; }

  .cy-hero__lead { font-size: 1rem; }
  .cy-hero .cy-btn--lg { width: 100%; max-width: 22rem; }
  .cy-stats { gap: 1rem 1.25rem; }
  .cy-stat { gap: .6rem; }
  .cy-stat__value { font-size: 1rem; }
  .cy-stat__label { font-size: .85rem; }

  /* How it helps: 2 x 3 */
  .cy-how__box { padding: 1.75rem 1rem 2rem; }
  .cy-how__subtitle { font-size: 1rem; }
  .cy-steps { grid-template-columns: repeat(2, 1fr); gap: 1.75rem .9rem; margin-top: 1.5rem; }
  .cy-step::after { display: none !important; }
  .cy-step__icon { width: 4.5rem; height: 4.5rem; font-size: 2rem; }
  .cy-step__title { font-size: 1rem; line-height: 1.35; }
  .cy-step__text { font-size: .9rem; margin-top: .4rem; }
  .cy-step br { display: none; }

  /* ---- Swipe rows (Courses, Colleges, Articles) ----
     Native horizontal scrolling with snap points: works the same on Android
     Chrome and iOS Safari. The row bleeds to the screen edges so the next card
     peeks in, signalling that the row can be swiped. main.js adds the dots. */
  [data-cy-carousel] {
    display: grid; grid-auto-flow: column; grid-template-columns: none;
    gap: .75rem;
    margin-inline: -1rem; padding: .25rem 1rem .75rem;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [data-cy-carousel]::-webkit-scrollbar { display: none; }
  [data-cy-carousel] > * { scroll-snap-align: start; min-width: 0; }

  /* Courses: two rows, image above the title */
  .cy-course-grid { grid-template-rows: repeat(2, auto); grid-auto-columns: min(42vw, 11.5rem); }
  .cy-course { flex-direction: column; height: 100%; min-height: 10.5rem; box-shadow: 0 .1rem .5rem rgba(31, 42, 68, .06); }
  .cy-course:hover { transform: none; }
  .cy-course__img { height: 6.25rem; align-self: flex-start;
    -webkit-mask-image: linear-gradient(90deg, #000 75%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 75%, transparent 100%); }
  .cy-course__title, .cy-course__title--tight { padding: .5rem 2.6rem .85rem .85rem; font-size: .95rem; line-height: 1.35; }
  .cy-course__title br { display: none; }
  .cy-course__arrow { right: .7rem; bottom: .8rem; width: 1.75rem; height: 1.75rem; }

  /* Colleges: one row of logo cards */
  .cy-college-grid { grid-auto-columns: min(40vw, 10.5rem); }
  .cy-college { height: 7rem; }
  .cy-college img { max-height: 5.8rem; }

  /* Articles: vertical cards, large image on top */
  .cy-article-grid { grid-auto-columns: min(78vw, 19rem); gap: .9rem; }
  .cy-article { flex-direction: column; height: 100%; min-height: 0; padding: .6rem; box-shadow: 0 .2rem .8rem rgba(31, 42, 68, .07); }
  .cy-article__img { flex: none; width: 100%; height: auto; max-width: none; min-height: 0; aspect-ratio: 16 / 11; object-fit: cover; object-position: center 30%; }
  .cy-article__body { flex: 1; padding: .85rem .35rem .3rem; }
  .cy-article__title { margin-top: .6rem; font-size: 1rem; line-height: 1.45; }
  .cy-article__more { margin-top: auto; padding-top: .9rem; min-height: 2.75rem; }

  /* Dots under each swipe row */
  .cy-dots { display: flex; justify-content: center; gap: .5rem; margin-top: .35rem; }
  .cy-dots button {
    width: .5rem; height: .5rem; padding: 0; border: 0; border-radius: 999px;
    background: #D9DEE7; transition: width var(--cy-transition), background-color var(--cy-transition);
    position: relative;
  }
  .cy-dots button::before { content: ""; position: absolute; inset: -.75rem -.4rem; } /* 44px-class touch target */
  .cy-dots button[aria-current="true"] { width: 1.4rem; background: var(--cy-orange); }

  /* Footer links: comfortable touch targets */
  .cy-footer__links li { padding: .55rem 0; }

  /* Footer: two columns */
  .cy-footer__grid { grid-template-columns: 1fr 1.5fr; }
  .cy-footer__grid > :last-child { grid-column: 1 / -1; } /* contact details on their own row */
  .cy-footer__bottom { flex-direction: column; gap: .35rem; padding-bottom: 1.75rem; }
}

/* ---------- Small mobile (< 576px) ---------- */
@media (max-width: 575.98px) {
  /* Hero overlay cards: enlarged for legibility, still covering the same area of the photo */
  .cy-hero-bubble { width: 32cqw; min-height: 21cqw; font-size: 2.6cqw; }
  .cy-hero-card { left: 48.6%; top: 37.5%; width: 46.4cqw; min-height: 43cqw; gap: 1.6cqw; padding: 2.4cqw 3cqw; }
  .cy-hero-card a { font-size: 2.75cqw; min-height: 7.6cqw; }
  .cy-hero-card__icon { flex-basis: 6.4cqw; width: 6.4cqw; height: 6.4cqw; font-size: 3.8cqw; }

  /* Students / Parents: photograph above the copy */
  .cy-panel { min-height: 0; }
  .cy-panel__img {
    position: static; display: block; height: 15rem; margin: 0 auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  }
  .cy-panel--parents .cy-panel__img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  }
  .cy-panel__body, .cy-panel--parents .cy-panel__body { margin-left: 0; padding: 1.25rem 1.25rem 1.75rem; }
  .cy-panel__title { font-size: 1.8rem; }
  .cy-panel__text { font-size: 1rem; }
  .cy-checklist li { font-size: 1rem; gap: .85rem; }
  .cy-panel .cy-btn--lg, .cy-panel--parents .cy-btn--lg { width: 100%; }


  /* CTA */
  .cy-cta__body { padding: 0 1rem; }
  .cy-cta__title { font-size: 1.6rem; }
  .cy-cta__text { font-size: 1rem; }
  .cy-cta .cy-btn--xl { width: 100%; }
  .cy-cta__features { flex-direction: column; align-items: flex-start; width: max-content; max-width: 100%; margin-inline: auto; }
  .cy-cta__features li + li { margin-left: 0; padding-left: 0; background: none; }

  .cy-footer__logo img { height: 3.6rem; }
}

/* Hide dots where the rows are regular grids */
@media (min-width: 768px) {
  .cy-dots { display: none; }
}

/* ---------- Very small phones (< 360px) ---------- */
@media (max-width: 359.98px) {
  .cy-footer__grid { grid-template-columns: 1fr 1fr; }
  .cy-footer__grid > :last-child { grid-column: 1 / -1; }
  .cy-stats { flex-direction: column; }
}