/* =============================================================
   ISCAE 2026 — Responsive Stylesheet (responsive.css)
   Mobile-first refinements & breakpoint overrides.
   Breakpoints follow Bootstrap 5:
     xl < 1200 · lg < 992 · md < 768 · sm < 576
   ============================================================= */

/* -------------------------------------------------------------
   Large desktops & down (< 1400px) — navbar collapses here (expand-xxl)
   ------------------------------------------------------------- */
@media (max-width: 1399.98px) {

    .navbar-brand__title { font-size: 1.2rem; }

    /* Collapsed mobile menu panel */
    .navbar-collapse {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-lg);
        padding: 1rem;
        margin-top: .8rem;
        max-height: 80vh;
        overflow-y: auto;
    }
    .navbar-nav .nav-link { padding: .7rem .6rem; }
    .navbar-nav .nav-link::after { display: none; }
    .navbar-nav .nav-item { border-bottom: 1px solid var(--border); }
    .navbar-nav .nav-item:last-child { border-bottom: none; }

    .dropdown-menu {
        box-shadow: none;
        border: none;
        border-left: 2px solid var(--secondary);
        border-radius: 0;
        margin: 0 0 .4rem .6rem;
        padding-left: .6rem;
        min-width: auto;
    }

    /* Full-width CTA buttons in the mobile menu */
    .nav-item--cta { margin: .6rem 0 0; border-bottom: none !important; }
    .nav-item--cta .btn { display: block; width: 100%; text-align: center; }
}

/* -------------------------------------------------------------
   Tablets (< 992px)
   ------------------------------------------------------------- */
@media (max-width: 991.98px) {

    :root { --header-h: 84px; }

    .hero { text-align: center; }
    .hero__meta { justify-content: center; }
    .hero__actions { justify-content: center; }
    .hero__countdown { justify-content: center; }
    .hero-card { margin-top: 2.5rem; text-align: left; }

    .about__img-wrap { margin-bottom: 2.5rem; }
    .section-head--start { text-align: center; }

    .sdg-grid { grid-template-columns: repeat(4, 1fr); }
    .gallery-grid { grid-template-columns: repeat(3, 1fr); }

    .footer-legal { justify-content: center; margin-top: .5rem; }
    .footer-copy { text-align: center; }
}

/* -------------------------------------------------------------
   Mobiles (< 768px)
   ------------------------------------------------------------- */
@media (max-width: 767.98px) {

    .section { padding: 3rem 0; }

    .hero__meta { gap: .8rem 1.4rem; }
    .hero__meta li { font-size: .9rem; }
    .countdown-box { min-width: 72px; padding: .8rem .9rem; }

    .sch-item { flex-direction: column; gap: .6rem; }
    .sch-item__time { min-width: auto; }

    .sdg-grid { grid-template-columns: repeat(3, 1fr); }
    .sdg-goals-grid { --sdg-cols: 6; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }

    .footer-newsletter__inner { transform: translateY(40px); text-align: center; }
    .footer-main { padding-top: calc(clamp(1.8rem, 4vw, 3rem) + 5rem); }
    .footer-newsletter__form .form-feedback { text-align: center; padding-left: 0; }

    .btn-lg { padding: .85rem 1.8rem; font-size: .95rem; }
    .cta-band .btn { width: 100%; }
}

/* -------------------------------------------------------------
   Small mobiles (< 576px)
   ------------------------------------------------------------- */
@media (max-width: 575.98px) {

    .navbar-brand__logo { height: 42px; }
    .navbar-brand__title { font-size: 1.05rem; }
    .navbar-brand__sub { font-size: .62rem; }

    .hero { padding: 2rem 0 3.2rem; }
    .hero__title { font-size: 2rem; }
    .hero__actions .btn { width: 100%; }

    .sdg-grid { grid-template-columns: repeat(2, 1fr); }
    .sdg-goals-grid { --sdg-cols: 5; }

    .timeline__item { padding-left: 3.8rem; }

    .footer-newsletter__form .input-group { flex-wrap: nowrap; }
    .footer-legal { flex-wrap: wrap; gap: .8rem; }

    .reg-card__price { font-size: 2rem; }

    /* Keep the WhatsApp bubble clear of the back-to-top button */
    .whatsapp-float { left: 1rem; bottom: 1rem; height: 48px; max-width: 48px; padding-right: .8rem; }
    .whatsapp-float i { width: 38px; font-size: 1.4rem; }
    .whatsapp-float:hover, .whatsapp-float:focus-visible { max-width: 220px; }
}

/* -------------------------------------------------------------
   Featured Links beside the first section — unstick when stacked
   ------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .fl-first-aside .featured-links--compact { position: static; top: auto; }
    .fl-first-row > .col-lg-8 > .section-head { text-align: center; }
}

/* -------------------------------------------------------------
   Checkout — unstick the summary once the columns stack
   ------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .checkout-summary { position: static; top: auto; }
}
@media (max-width: 575.98px) {
    .checkout-panel,
    .checkout-summary { padding: 1.4rem 1.1rem; }
    .checkout-summary__list > div { flex-direction: column; gap: .1rem; }
    .checkout-summary__list dd { text-align: left; }
    .checkout-status__actions .btn { width: 100%; }
}

/* -------------------------------------------------------------
   Contact shell — reduce the banner overlap on small screens
   ------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .contact-shell { margin-top: -2rem; border-radius: 20px; }
    .ct-form__footer .btn { width: 100%; }
}

/* -------------------------------------------------------------
   Publication workflow timeline — tighten on small screens
   ------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .wf-timeline::before { left: 26px; }
    .wf-step { gap: 1.1rem; }
    .wf-step__node { width: 54px; height: 54px; font-size: 1.05rem; border-width: 3px; }
    .wf-step__icon { width: 26px; height: 26px; font-size: .62rem; }
    .wf-step__card { padding: 1.2rem 1.2rem; }
}

/* -------------------------------------------------------------
   Editorial Board hub — stack to a single column below lg
   ------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .eb-hub { grid-template-columns: 1fr; gap: 1.1rem; max-width: 560px; }
    .eb-hub__center { order: -1; margin-bottom: .8rem; }
    .eb-hub__col--right .eb-node { flex-direction: row; text-align: left; }
    /* Reveal node descriptions by default on touch/smaller screens */
    .eb-node__desc { grid-template-rows: 1fr; }
    .eb-node__desc .en { margin-top: .3rem; }
}
@media (max-width: 575.98px) {
    .hex-panel { width: 100%; max-width: 320px; }
}

/* -------------------------------------------------------------
   Featured Links sidebar — unstick below lg (stacks under promo)
   ------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .featured-links { position: static; top: auto; }
}

/* -------------------------------------------------------------
   Speaker journey roadmap — stack vertically below lg
   ------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .roadmap { flex-direction: column; gap: 1.7rem; max-width: 430px; margin: 0 auto; }
    .roadmap__step { display: flex; align-items: center; gap: 1.1rem; text-align: left; padding: 0; }
    .roadmap__node { margin: 0; }
    .roadmap__step::before { top: -1.7rem; left: 34px; width: 3px; height: 1.7rem; background: linear-gradient(180deg, var(--accent), var(--secondary)); }
    .roadmap__title { text-align: left; }
}

/* -------------------------------------------------------------
   Awards hero — hide floating decorations on small screens
   ------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .award-float { display: none; }
    .glass-intro { padding: 1.3rem 1.4rem; }
    .award-card { padding: 2.2rem 1.4rem 1.8rem; }
    .sel-step { gap: 1.1rem; }
    .sel-step__marker { width: 52px; height: 52px; font-size: 1.15rem; }
    .sel-step::before { left: 25px; top: 56px; }
}

/* -------------------------------------------------------------
   Manuscript timeline — collapse zig-zag to a single column
   ------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .ms-timeline::before { left: 22px; transform: none; }
    .ms-item,
    .ms-item--left,
    .ms-item--right { width: 100%; left: 0; padding: 1rem 0 1rem 3.6rem; }
    .ms-item--left .ms-item__dot,
    .ms-item--right .ms-item__dot { left: 13px; right: auto; }
}

/* -------------------------------------------------------------
   Feedback carousel — stack slide on tablets & down
   ------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .feedback-carousel { padding: 0 2.6rem; }
    .feedback-slide { flex-direction: column; text-align: center; gap: 1.2rem; }
    .feedback-slide__photo { margin: 0 auto; }
}
@media (max-width: 575.98px) {
    .feedback-carousel { padding: 0 1.6rem; }
    .feedback-carousel .carousel-control-prev { left: -8px; }
    .feedback-carousel .carousel-control-next { right: -8px; }
    .feedback-slide__text { font-size: .98rem; }
}