/* Case Study Competition page: phone layout from the Figma mobile frame "Building India Mobile"
   (Nation Building file, Export page). Loaded last; every rule is phone-only, so desktop is untouched. */

@media (max-width: 767px) {
    /* ===== Hero ===== */
    .csc-hero { min-height: 500px; padding-top: 134px; padding-bottom: 40px; }
    .csc-back-link { margin-bottom: 24px; font-size: 14px; }
    .csc-back-link > span { font-size: 20px; line-height: 1; }
    .csc-hero h1 { gap: 0; font-size: 32px; line-height: 35px; }
    .csc-hero-tagline { margin-top: 16px; font-size: 16px; line-height: 22px; }
    .csc-hero-actions { flex-direction: column; align-self: stretch; gap: 20px; margin-top: 16px; }
    .csc-hero-actions .csc-btn { width: 100%; font-size: 16px; }
    .csc-hero-actions .csc-btn-outline { border-color: #fff; }

    /* Slide controls: centred 8px round dots, no arrows (slides change by swipe, dot tap or autoplay). */
    .csc-hero-controls { justify-content: center; width: auto; margin-top: 24px; }
    .csc-hero.is-film-active .csc-hero-controls { left: 16px; right: 16px; }
    .csc-hero-controls .csc-round { display: none; }
    .csc-hero-dots { gap: 8px; }
    .csc-hero-dots button { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #8e8e8e; }
    .csc-hero-dots button.is-active { width: 8px; background: #f5b123; }
    .csc-hero-dots button::before { content: ''; position: absolute; inset: -10px -4px; }
    .csc-hero-slides { touch-action: pan-y; }

    /* ===== Our Impact: one full-width card per slide ===== */
    .csc-impact { padding-top: 40px; padding-bottom: 40px; }
    .csc-impact .csc-stats { margin-top: 24px; }
    html .csc-stats[data-mobile-autoscroll] > li { flex-basis: 100%; min-height: 159px; border-radius: 29px; }

    /* ===== What is the Building India Case Study Competition? (centred) ===== */
    .csc-about { gap: 20px; padding-top: 20px; padding-bottom: 40px; }
    .csc-about h2 { text-align: center; }
    .csc-about-copy { gap: 24px; padding-bottom: 0; text-align: center; line-height: 23.6px; color: #4d5d73; }

    /* ===== FAQ: white rounded question cards ===== */
    .csc-faq { padding: 40px 20px; }
    .csc-faq .csc-heading { align-items: flex-start; padding-top: 0; text-align: left; }
    .csc-faq h2 { font-size: 28px; line-height: 38px; color: #00123a; }
    .csc-faq-list { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
    .csc-faq details { padding: 16px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
    .csc-faq summary { gap: 12px; padding: 0; font-size: 16px; line-height: 19px; color: #073763; }
    .csc-faq details[open] summary { color: #00123a; }
    .csc-faq summary::after { width: 16px; height: 16px; background-size: 12px 12px; }
    .csc-faq details p { margin-top: 12px; padding-bottom: 0; font-size: 14px; line-height: 1.5; color: #354e6d; }
}