/* =============================================================================
   SANKALP INSTITUTE — Responsive Overrides
   -----------------------------------------------------------------------------
   Mobile-first base lives in style.css; this file steps the layout down from
   large desktops to small phones.

   Breakpoints: 1399 / 1199 / 991 / 767 / 575 / 399
   ========================================================================== */

/* ≤ 1399px — large desktops ================================================ */
@media (max-width: 1399.98px) {
    .hero__card--rate {
        right: 0;
    }

    .hero__card--live {
        left: 0;
    }

    .hero__chip--certificate {
        left: 2%;
    }

    .site-nav__link {
        padding: .5rem .68rem !important;
        font-size: .89rem;
    }
}

/* ≤ 1199px — the navbar collapses into the off-canvas menu ================= */
@media (max-width: 1199.98px) {
    :root {
        --header-h: 76px;
    }

    .site-nav__toggler {
        display: flex;
    }

    .site-nav__actions {
        display: none;
    }

    .site-nav .container {
        justify-content: space-between;
    }

    .hero__title {
        font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.2rem);
    }

    .gallery__grid {
        grid-auto-rows: 165px;
    }

    .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .steps__item:nth-child(2) .steps__connector {
        display: none;
    }
}

/* ≤ 991px — tablets ======================================================== */
@media (max-width: 991.98px) {
    .topbar {
        display: none;
    }

    section[id] {
        scroll-margin-top: 84px;
    }

    /* Hero stacks: copy first, illustration below */
    .hero {
        padding-top: 130px;
        padding-bottom: 4.5rem;
        text-align: center;
    }

    .hero__subtitle {
        margin-inline: auto;
    }

    .hero__actions,
    .hero__trust {
        justify-content: center;
    }

    .hero__visual {
        max-width: 540px;
        margin: 3.5rem auto 0;
    }

    .hero__scroll {
        display: none;
    }

    /* About */
    .about__visual {
        max-width: 560px;
        margin-inline: auto;
    }

    .about__content {
        margin-top: 3rem;
    }

    .section-heading--left {
        text-align: center;
    }

    .section-heading--left .section-heading__text {
        margin-inline: auto;
    }

    .about__actions {
        justify-content: center;
    }

    .about__list-title {
        text-align: center;
    }

    /* Statistics: 2 x 2 grid, keep the divider only between columns */
    .stat::after {
        display: none;
    }

    /* Timeline becomes a single left-aligned rail */
    .timeline::before {
        left: 22px;
    }

    .timeline__item,
    .timeline__item:nth-child(even) {
        width: 100%;
        margin-left: 0;
        padding-left: 4rem;
        padding-right: 0;
    }

    .timeline__marker,
    .timeline__item:nth-child(even) .timeline__marker {
        left: 0;
        right: auto;
        top: 1.35rem;
        width: 45px;
        height: 45px;
        font-size: .95rem;
    }

    /* Gallery mosaic flattens to a 3-column grid */
    .gallery__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 180px;
    }

    .gallery__item--1,
    .gallery__item--6 {
        grid-column: span 1;
        grid-row: span 1;
    }

    .contact__map,
    .contact__map iframe {
        min-height: 340px;
    }

    .site-footer__newsletter {
        text-align: center;
    }

    .join-card {
        text-align: center;
        justify-content: center;
    }

    .join-card__icon {
        margin-inline: auto;
    }

    .join-card__text {
        margin-inline: auto;
    }

    .course-overview-grid,
    .course-tree,
    .course-detail {
        grid-template-columns: 1fr;
    }

    .courses-structure__head {
        text-align: center;
        margin-inline: auto;
    }

    .course-detail__summary {
        display: grid;
    }
}

/* ≤ 767px — phones ========================================================= */
@media (max-width: 767.98px) {
    :root {
        --section-y: 3.5rem;
    }

    .hero {
        padding-top: 118px;
    }

    .hero__pill {
        font-size: .74rem;
    }

    .hero__actions .btn {
        flex: 1 1 100%;
    }

    /* Floating decoration adds clutter on small screens */
    .hero__card,
    .hero__chip--certificate,
    .hero__chip--laptop {
        display: none;
    }

    .hero__chip {
        width: 46px;
        height: 46px;
        font-size: 1.05rem;
    }

    .about__list {
        grid-template-columns: 1fr;
    }

    .about__image--small {
        width: 42%;
        right: 0;
    }

    .about__badge {
        left: 0;
        padding: .85rem 1rem;
    }

    .about__badge-value {
        font-size: 1.5rem;
    }

    .statistics__panel {
        border-radius: var(--r-lg);
    }

    .gallery__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 150px;
        gap: .75rem;
    }

    .gallery__item--flat {
        height: 210px;
    }

    .gallery__overlay {
        opacity: 1;
        background: linear-gradient(to top, rgba(17, 17, 17, .78) 0%, transparent 60%);
    }

    .gallery__caption {
        transform: none;
    }

    .gallery__caption strong {
        font-size: .88rem;
    }

    .steps {
        grid-template-columns: 1fr;
    }

    .steps__connector {
        display: none;
    }

    .admission__cta,
    .site-footer__bottom {
        flex-direction: column;
        text-align: center;
    }

    .admission__cta-actions .btn,
    .error-page__actions .btn {
        width: 100%;
    }

    .newsletter-form__group {
        flex-direction: column;
        align-items: stretch;
        gap: .6rem;
        padding: .85rem;
        border-radius: var(--r-md);
    }

    .newsletter-form__group>i {
        display: none;
    }

    .newsletter-form__input {
        padding: .55rem .75rem;
        border-radius: var(--r-sm);
        background: rgba(255, 255, 255, .07);
    }

    .newsletter-form__group .btn {
        width: 100%;
    }

    .site-footer__legal {
        justify-content: center;
        gap: 1.1rem;
    }

    .lightbox {
        grid-template-columns: 1fr;
        padding-inline: .75rem;
    }

    .lightbox__nav {
        position: absolute;
        bottom: 1.5rem;
    }

    .lightbox__nav--prev {
        left: 25%;
    }

    .lightbox__nav--next {
        right: 25%;
    }

    .lightbox__image {
        max-height: 64vh;
    }

    .back-to-top {
        right: 14px;
        bottom: 14px;
        width: 44px;
        height: 44px;
    }

    .whatsapp-float {
        left: 14px;
        bottom: 14px;
        width: 48px;
        height: 48px;
        font-size: 1.35rem;
    }

    .course-tree__group,
    .course-overview__top {
        flex-direction: column;
    }

    .course-detail__content {
        grid-template-columns: 1fr;
    }

    .course-detail__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ≤ 575px — small phones =================================================== */
@media (max-width: 575.98px) {
    .container {
        padding-inline: 1rem;
    }

    /* Tighter side padding needs tighter horizontal gutters; the vertical
       gutter (--bs-gutter-y) stays untouched so stacked rows keep breathing. */
    .row {
        --bs-gutter-x: 1.5rem;
    }

    .site-nav__logo {
        height: 40px;
    }

    .hero__trust {
        flex-direction: column;
        gap: .75rem;
    }

    .hero__visual {
        padding: .5rem;
    }

    .feature-card,
    .testimonial-card,
    .contact__form-wrap {
        padding: 1.5rem 1.25rem;
    }

    .course-card__actions {
        grid-template-columns: 1fr;
    }

    .course-overview,
    .course-tree__group,
    .course-detail {
        border-radius: var(--r-md);
    }

    .course-detail__block {
        padding: 1rem;
    }

    .faq__accordion .accordion-button {
        padding: 1rem;
        font-size: .94rem;
    }

    .faq__accordion .accordion-body {
        padding: 0 1rem 1.1rem;
    }

    .faq__help {
        flex-direction: column;
        text-align: center;
    }

    .timeline__card {
        padding: 1.25rem 1.1rem;
    }

    .timeline__item,
    .timeline__item:nth-child(even) {
        padding-left: 3.25rem;
    }

    .timeline::before {
        left: 18px;
    }

    .timeline__marker,
    .timeline__item:nth-child(even) .timeline__marker {
        width: 38px;
        height: 38px;
        font-size: .82rem;
    }

    .mobile-menu {
        width: min(320px, 92vw);
    }

    .error-page__links {
        gap: 1rem;
    }
}

/* ≤ 399px — very small phones ============================================== */
@media (max-width: 399.98px) {
    .gallery__grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 190px;
    }

    .hero__avatar {
        width: 36px;
        height: 36px;
    }

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

/* Landscape phones: trim the vertical rhythm ================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        padding-top: 110px;
        padding-bottom: 3rem;
    }

    .error-page {
        min-height: auto;
    }
}

/* Print ==================================================================== */
@media print {

    .site-header,
    .site-footer__newsletter,
    .back-to-top,
    .whatsapp-float,
    .preloader,
    .hero__scroll,
    .lightbox,
    .testimonials__nav {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .section {
        padding-block: 1.5rem;
        break-inside: avoid;
    }

    a[href^="http"]::after {
        content: ' (' attr(href) ')';
        font-size: .75em;
        color: #555;
    }
}