/* ============================================================
   Course pages — mobile optimization (audit fixes)
   Loaded LAST on the 7 course clone pages. No content changes —
   only sizing, spacing, alignment, uniformity, touch targets.
   ============================================================ */

/* M6 — softer body text instead of pure #000 (covers all 7 pages; sheet is course-scoped) */
.riyasat-premium-page, .elementor,
.riyasat-premium-page p, .riyasat-premium-page li,
.elementor p, .elementor li { color: #0F172A; }

/* S5 — uniform topper photos (old varying crops -> square frame, cover) */
.student-image-space img,
.premium-student-card .student-image-space img,
.mentor-photo img { width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: contain; background: #f4f1ee; /* never clip a face */
  display: block; border-radius: 10px; }

/* Faculty photos: designer supplied uniform 800x1000 (4:5). Show them in a uniform
   4:5 frame that fits the card (overrides the clone's blanket ".elementor img{height:auto}"
   which otherwise let the tall photo overflow the old 110px avatar box). */
.faculty-image-space { height: auto !important; flex: 0 0 auto !important; width: 150px !important; border-radius: 12px; overflow: hidden; }
.faculty-image-space img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 5 !important; object-fit: cover !important; display: block; }
@media (max-width: 767px) {
  .faculty-card { flex-direction: column; align-items: center; text-align: center; }
  .faculty-image-space { width: 200px !important; margin: 0 auto; }
}

/* S7 — one consistent card token */
.premium-student-card,
.batch-card,
.mentorship-card,
.info-box { border-radius: 14px; box-shadow: 0 8px 24px rgba(16,12,10,.06); }

/* M9 — anchor offset so the 80px sticky header never hides section tops */
h1, h2, h3, :target { scroll-margin-top: 92px; }

/* ---------------- MOBILE ( <=767px ) ---------------- */
@media (max-width: 767px) {

  /* S3 — kill justified 'rivers' of whitespace */
  .riyasat-premium-page p,
  .riyasat-premium-page li { text-align: left !important; }

  /* S4 — cap oversized headings (clamp so they never clip / wrap 4 lines) */
  .riyasat-premium-page h1, .elementor h1,
  .editorial-main-title { font-size: clamp(24px, 7vw, 30px) !important; line-height: 1.2 !important; }
  .riyasat-premium-page h2, .elementor h2,
  .section-title { font-size: clamp(21px, 6vw, 26px) !important; line-height: 1.22 !important; }
  .riyasat-premium-page h3, .elementor h3,
  .sub-section-title { font-size: clamp(18px, 5vw, 21px) !important; line-height: 1.25 !important; }

  /* S6 — content not too pinched: consistent 16px gutters, readable body */
  .content-container, .about-text, .inner-container, .overlap-text,
  .hero-v4-text, .mentorship-container, .batch-details-section {
    padding-left: 16px !important; padding-right: 16px !important;
  }
  .about-text p, .riyasat-premium-page p[style*="20px"] { font-size: 16px !important; line-height: 1.6 !important; }

  /* Topper slider on mobile: the desktop marquee animation crops cards at the
     viewport edge. Convert to a natural swipe carousel: no animation, snap
     points, one-card-ish width. (Duplicated marquee cards just extend the swipe.) */
  .student-slider-wrapper { overflow: hidden !important; width: 100% !important; max-width: 100vw !important; }
  /* CRITICAL: the marquee track is width:max-content (~25000px). A card sized in
     % resolves against THAT, producing 20000px cards that cover the whole page.
     The track must be re-constrained and cards sized in vw, never %. */
  .student-slider-track {
    display: flex !important; flex-wrap: nowrap !important; gap: 12px;
    width: 100% !important; max-width: 100vw !important; min-width: 0 !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; padding: 4px 16px 12px;
    animation: none !important; transform: none !important;
  }
  .premium-student-card {
    flex: 0 0 80vw !important; width: 80vw !important; max-width: 80vw !important;
    min-width: 0 !important; box-sizing: border-box; scroll-snap-align: center;
  }
  .premium-student-card .card-inner-content,
  .premium-student-card .student-image-space { max-width: 100% !important; min-width: 0 !important; }
  .premium-student-card .student-image-space img {
    width: 100% !important; max-width: 100% !important; height: auto !important;
    aspect-ratio: 1/1 !important; object-fit: contain !important;
    object-position: 50% 50% !important; background: #f4f1ee;  /* whole photo, never clipped */
  }
  .card-inner-content, .student-image-space { max-width: 100% !important; width: 100% !important; box-sizing: border-box; }

  /* Sections overlapping videos: the old design pulls text cards up with big
     negative margins; on a phone they land on top of the video. Neutralise. */
  .overlap-text, .overlap-row.reverse .overlap-text { margin: 12px 0 0 !important; position: static !important; }
  .overlap-row, .overlap-row.reverse { flex-direction: column !important; gap: 12px; }
  .feature-text { margin-top: 0 !important; }

  /* Fees/batch table: give columns breathing room; container still scrolls. */
  .batch-table { min-width: 640px; }
  .batch-table th, .batch-table td { padding: 10px 12px !important; font-size: 14px !important; line-height: 1.45 !important; min-width: 110px; white-space: normal !important; }
  /* fees column carries the longest text — give it real room */
  .batch-table th:nth-child(4), .batch-table td:nth-child(4),
  .batch-table th:nth-child(3), .batch-table td:nth-child(3) { min-width: 150px; }

  /* fees / batch table -> contained horizontal scroll, never breaks the page (secure pages) */
  .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* S1 / S2 — remove the floating CTA stack that overlaps body text (bottom bar stays) */
  .clc-stack { display: none !important; }

  /* M2 — touch targets >= 44px on nav / footer links & the menu toggle */
  .menu a, .footer-menu a, nav.main-navigation a, .site-footer a,
  #site-navigation a { min-height: 44px; display: flex; align-items: center; }
  .menu-toggle, .hamburger, button[aria-expanded] { min-width: 44px !important; min-height: 44px !important; }

  /* feature rows stack cleanly */
  .feature-row { flex-direction: column !important; }
  .feature-media, .feature-text { width: 100% !important; }
}

/* ---- YouTube click-to-load facade (perf: defer third-party player) ---- */
.yt-facade{background:#000;cursor:pointer;overflow:hidden;border-radius:inherit;display:block}
.yt-facade-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.yt-facade .yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:48px;background:#f00;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.45);transition:background .2s;z-index:2}
.yt-facade:hover .yt-play,.yt-facade:focus .yt-play{background:#c00}
.yt-facade .yt-play::after{content:"";position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff}
.yt-facade:focus-visible{outline:3px solid #F59E0B;outline-offset:2px}

/* ============ post-launch visual QA fixes (all viewports) ============ */

/* Video boxes: wrappers carried fixed heights / flex-basis heights that left
   big colour bands under the 16:9 video. Verified live 26-Jul: force wrappers
   to a 16:9 ratio box and let the facade fill it. */
.about-video, .feature-media, .mains-video-col, .demo-video-wrapper {
  aspect-ratio: 16 / 9 !important; height: auto !important; min-height: 0 !important;
  flex-basis: auto !important; flex-grow: 0 !important;
  position: relative !important; padding: 0 !important; overflow: hidden;
}
/* facades the JS placed in absolute mode fill their ratio-box wrapper */
.yt-facade[style*="absolute"] { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; }
/* free-standing facades keep their own 16:9 */
.yt-facade:not([style*="absolute"]) { aspect-ratio: 16 / 9 !important; height: auto !important; width: 100% !important; }
.yt-facade-thumb { width: 100% !important; height: 100% !important; object-fit: cover !important; }
/* overlap-video keeps its padded-box pattern: facade must fill it absolutely */
.overlap-video .yt-facade { position: absolute !important; inset: 0 !important; aspect-ratio: auto !important; height: 100% !important; }

/* The side-by-side video card no longer stretches to its text neighbour's
   height (was leaving a large blank band under the video). */
.mentorship-video-card { align-self: flex-start !important; height: auto !important; }

/* In-content headings (essay page etc.): subheads inside the text column must
   read as headings, not body text. */
.about-text h2, .about-text .section-title {
  display: block; font-size: clamp(19px, 2.2vw, 24px) !important;
  font-weight: 800 !important; line-height: 1.3 !important;
  text-align: left !important; margin: 28px 0 10px !important; color: #0F172A !important;
}

/* Footer readability on course pages: legacy clone CSS bleeds dark colours
   into the footer. Force the theme's light palette. */
.site-footer, .site-footer p, .site-footer li, .site-footer address { color: #D8D2CC !important; }
.site-footer a { color: #F3EFEA !important; }
.footer-address { color: #C9C2BB !important; }
.footer-disclaimer, .footer-disclaimer p { color: #B9B2AC !important; }
.footer-disclaimer strong { color: #D8D2CC !important; }

/* ============ 26-Jul round 2 (user screenshots) ============ */

/* upsc "Why It Works": video now sits under the heading, centered — then cards */
.why-video-standalone { max-width: 760px; margin: 26px auto 34px; padding: 0 16px; }
.why-video-standalone iframe, .why-video-standalone .yt-facade { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 14px; overflow: hidden; display: block; box-shadow: 0 12px 32px rgba(16,12,10,.12); }

/* the point-card grid: contained, wraps, never bleeds past the viewport,
   and text no longer crammed into the card corners */
.mentorship-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px; max-width: 1200px; margin: 0 auto !important;
  padding: 0 20px 8px; overflow: visible !important;
  animation: none !important; transform: none !important;
}
.mentorship-card { padding: 26px 24px !important; box-sizing: border-box; min-width: 0; }
@media (max-width: 767px) {
  .mentorship-grid { grid-template-columns: 1fr; padding: 0 16px 8px; }
}

/* ============================================================
   CHROME GUARD  — root-cause fix (26 Jul)
   The cloned old-site CSS carries the OLD site's header/footer
   rules (.site-header{z-index:2147483647!important}, footer
   colours, nav sizing). Those hijack the NEW theme's chrome and
   were the real cause of: side panel painting UNDER the top bar,
   invisible footer text, nav/spacing drift. This sheet loads
   after every clone sheet, so these restore the theme's own
   chrome and must stay last.
   ============================================================ */
.site-header {
  z-index: 9998 !important;          /* must stay BELOW the enquiry panel */
  background: rgba(255,255,255,.94) !important;
  width: auto !important; max-width: none !important;
  height: auto !important; padding: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid #ece8e4 !important;
}
.site-footer { background: #14100E !important; }
.footer-container { padding-left: 20px !important; padding-right: 20px !important; }

/* ============================================================
   SAFE MARGINS — no content may touch the screen edge.
   Cloned sections were built full-bleed for the old site; on a
   phone that puts text hard against the bezel.
   ============================================================ */
@media (max-width: 767px) {
  .riyasat-premium-page .content-container,
  .riyasat-premium-page .inner-container,
  .riyasat-premium-page .mentorship-container,
  .riyasat-premium-page .about-section-wrapper,
  .riyasat-premium-page .curriculum-section,
  .riyasat-premium-page .features-section,
  .riyasat-premium-page .obstacles-section,
  .riyasat-premium-page .batch-details-section,
  .riyasat-premium-page .faculty-section,
  .riyasat-premium-page .success-highlight-section,
  .hero-v4-container, .hero-v4-text,
  .elementor .content-container, .elementor .inner-container {
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
  }
  /* cards inside those wrappers keep their own inner padding, never 0 */
  .mentorship-card, .obstacle-card, .feature-card, .batch-card,
  .faculty-card, .info-box, .premium-student-card .card-inner-content {
    padding: 22px 20px !important; box-sizing: border-box;
  }
  /* headings and paragraphs never flush to the edge */
  .riyasat-premium-page h1, .riyasat-premium-page h2,
  .riyasat-premium-page h3, .elementor h1, .elementor h2, .elementor h3 {
    padding-left: 2px; padding-right: 2px; overflow-wrap: break-word;
  }
  /* full-bleed sections keep their background but inset their content */
  .success-banner, .obstacles-grid, .features-grid, .faculty-grid {
    padding-left: 4px !important; padding-right: 4px !important;
  }
}

/* facade never reads as an empty box, even if YouTube's thumb CDN fails */
.yt-facade--nothumb { background: linear-gradient(135deg,#1f2937,#111827) !important; }
/* The label is a FALLBACK only: with a real thumbnail it just clutters the
   artwork, so it is shown solely when the thumbnail could not load. */
.yt-facade-label { display: none; }
.yt-facade--nothumb .yt-facade-label {
  display: block; position: absolute; left: 0; right: 0; top: 58%;
  text-align: center; color: #fff; font-size: 14px; font-weight: 700;
  letter-spacing: .02em; text-shadow: 0 1px 4px rgba(0,0,0,.7);
  pointer-events: none; z-index: 2;
}

/* Absolute safety net: nothing may ever exceed the viewport, whatever the
   cloned CSS computes. Guards against %-of-max-content blowups like the
   20378px topper image (26 Jul). */
.riyasat-premium-page img, .elementor img,
.riyasat-premium-page iframe, .elementor iframe,
.riyasat-premium-page video, .elementor video {
  max-width: 100% !important;
}
@media (max-width: 767px) {
  .riyasat-premium-page img, .elementor img { max-width: 100vw !important; }
}

/* Catch-all edge guard: some cloned section titles/labels sit outside the
   padded wrappers and ran flush to the bezel (found by the defect scanner,
   26 Jul: upsc .section-label, secure-* .section-title). */
@media (max-width: 767px) {
  .section-title, .sub-section-title, .sub-heading,
  .editorial-main-title, .mains-left-title, .demo-title, .obstacle-text {
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   MOBILE ENQUIRY PANEL — fit the whole form on one screen.
   The panel led with an illustration + pitch + duplicate
   Call/WhatsApp row, pushing the form below the fold. On a
   phone the form IS the panel; everything else is noise
   (Call/WhatsApp already live in the sticky bottom bar).
   ============================================================ */
@media (max-width: 767px) {
  #upsc-popup-box {
    padding: 12px 12px 10px !important;
    max-height: 92vh !important;
    display: flex !important; flex-direction: column !important;
  }
  #upsc-popup-box .upsc-popup-logo,
  #upsc-popup-box .upsc-popup-pitch,
  #upsc-popup-box .upsc-popup-link,
  #upsc-popup-box .upsc-popup-row { display: none !important; }
  #upsc-popup-box .upsc-popup-heading {
    font-size: 17px !important; line-height: 1.25 !important;
    margin: 0 40px 8px 0 !important; text-align: left !important;
  }
  #upsc-popup-box iframe {
    flex: 1 1 auto !important;
    height: 74vh !important; min-height: 430px !important;
    width: 100% !important; border: 0 !important; display: block !important;
  }
  #upsc-popup-close {
    position: absolute !important; top: 8px !important; right: 8px !important;
    width: 38px !important; height: 38px !important; float: none !important;
  }
}

/* ============================================================
   TOPPER PHOTOS — stop cutting heads.
   The cloned .student-image-space is a FIXED 150px box with
   overflow:hidden and centred content, while the photo renders
   ~308px tall — so it clipped ~79px off the top (the faces) and
   the same off the bottom. Let the frame size to the photo.
   ============================================================ */
.premium-student-card .student-image-space,
.student-slider-track .student-image-space {
  height: auto !important; min-height: 0 !important; max-height: none !important;
  display: block !important; overflow: hidden !important;
  border-radius: 10px; align-items: initial !important;
}
.premium-student-card .student-image-space img,
.student-slider-track .student-image-space img {
  width: 100% !important; height: auto !important;
  aspect-ratio: 1 / 1 !important;   /* every topper source is square (1024x1024) */
  /* CONTAIN, not cover: the whole photo is always shown, so a head or the
     name banner can never be clipped — even if a non-square photo is added
     later. With square sources this fills the frame exactly, no letterbox. */
  object-fit: contain !important; object-position: 50% 50% !important;
  background: #f4f1ee;
  display: block !important;
}

/* ============================================================
   Tighten the empty band under videos on phones (was ~80px
   between the video and the next heading).
   ============================================================ */
@media (max-width: 767px) {
  .about-content-row { margin-bottom: 0 !important; gap: 14px !important; }
  .about-section-wrapper { padding-bottom: 20px !important; }
  .about-section-wrapper + .content-container,
  .about-section-wrapper + div > .content-container { padding-top: 18px !important; }
  .about-video, .feature-media, .demo-video-wrapper, .why-video-standalone { margin-bottom: 10px !important; }
}

/* ============================================================
   NAVIGATION FIX (critical) — the mobile menu could not open on
   any course page, so a visitor who landed on a course page was
   trapped there. Cause: the cloned old-site CSS declares
   `.main-nav { display: none !important; }` and only reveals
   `.main-nav.active`, but this theme's JS toggles `.open`. The
   !important beat the theme, so the panel never appeared.
   Restore the theme's own off-canvas behaviour.
   ============================================================ */
@media (max-width: 1120px) {
  .site-header .hamburger { display: block !important; }
  .main-nav {
    display: block !important;              /* undo clone's display:none!important */
    position: fixed !important;
    top: 72px !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: auto !important; max-width: none !important; max-height: none !important;
    background: #fff !important; overflow-y: auto !important;
    padding: 12px 16px 90px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.12) !important;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s cubic-bezier(0.22,1,0.36,1), visibility 0s linear .3s;
    z-index: 9997 !important;               /* under the header, over the page */
  }
  .main-nav.open,
  .main-nav.active {
    transform: none !important;
    visibility: visible !important;
    display: block !important;
    transition: transform .3s cubic-bezier(0.22,1,0.36,1), visibility 0s linear 0s;
  }
  .main-nav .nav-list { flex-direction: column !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; }
  .main-nav .nav-list a, .main-nav .nav-parent { width: 100% !important; min-height: 44px; display: flex; align-items: center; }
}

/* ID-level so nothing in the cloned sheets can outrank it (class-level
   !important was still losing to the clone's own !important rules). */
@media (max-width: 1120px) {
  #main-nav { transform: translateX(100%) !important; visibility: hidden !important; display: block !important; }
  #main-nav.open { transform: translateX(0) !important; visibility: visible !important; display: block !important; }
}

/* ============================================================
   CENTERING — cloned sections were built for a 1280 canvas and
   on a phone several ran left-biased / merged into the right
   edge. Centre every section wrapper and cap it to the viewport.
   ============================================================ */
@media (max-width: 767px) {
  .riyasat-premium-page, .riyasat-premium-page > div,
  .content-container, .inner-container, .mentorship-container,
  .mentorship-grid, .curriculum-section, .faculty-grid,
  .features-grid, .obstacles-grid, .batch-cards-wrapper,
  .about-content-row, .feature-row, .demo-grid {
    margin-left: auto !important; margin-right: auto !important;
    max-width: 100% !important; width: auto !important;
    float: none !important; box-sizing: border-box !important;
  }
  /* cards centre inside their row and never exceed the screen */
  .mentorship-card, .obstacle-card, .feature-card, .batch-card,
  .faculty-card, .curriculum-card, .demo-card, .info-box {
    margin-left: auto !important; margin-right: auto !important;
    max-width: 100% !important; width: 100% !important;
  }
  /* the enquiry section sat off-centre with a fixed margin */
  .ces-section { margin-left: 12px !important; margin-right: 12px !important; max-width: calc(100vw - 24px) !important; }
}

/* ============================================================
   MOBILE NAV — final, deterministic.
   A CSS transition on `transform` was left permanently "running"
   on course pages (clone + theme rules fighting), which pinned
   the panel at translateX(100%) even against an inline
   !important. Transform is therefore removed from the equation:
   the panel is positioned with `left`, with no transition, so
   opening it cannot be blocked by a stuck animation.
   ============================================================ */
@media (max-width: 1120px) {
  #main-nav {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    position: fixed !important;
    top: 72px !important; bottom: 0 !important;
    left: 100% !important; right: auto !important;
    width: 100% !important; max-width: 100% !important;
    visibility: hidden !important;
    display: block !important;
    overflow-y: auto !important;
    background: #fff !important;
    padding: 12px 16px 90px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.14) !important;
    z-index: 9997 !important;
  }
  #main-nav.open {
    left: 0 !important;
    visibility: visible !important;
  }
}

/* Panel must hug its form — it was 92vh tall with ~227px of empty
   space under a 520px form. Height now follows the content. */
@media (max-width: 767px) {
  #upsc-popup-box {
    height: auto !important;
    max-height: 94vh !important;
    padding-bottom: 8px !important;
  }
  #upsc-popup-box iframe {
    flex: none !important;
    height: 462px !important;   /* Zoho form's real content height — no dead band */
    min-height: 0 !important;
    max-height: 70vh !important;
  }
}

/* ============================================================
   MOBILE ENQUIRY PANEL — compact centred card (final).
   The theme ships this as a full-height side sheet
   (`height:100dvh`) with a 150px decorative ::before image, so
   the form sat mid-panel with a large empty band under it. On a
   phone the form IS the panel: card hugs its content, no
   illustration, everything fillable without scrolling.
   ============================================================ */
@media (max-width: 767px) {
  #upsc-popup-box,
  #upsc-popup-overlay.show #upsc-popup-box {
    position: absolute !important;
    top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(370px, 93vw) !important; max-width: min(370px, 93vw) !important;
    height: auto !important; max-height: 94vh !important;
    padding: 14px 14px 10px !important;
    border-radius: 16px !important;
    overflow-y: auto !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.32) !important;
  }
  /* the 150px decorative header image is pure height on a phone */
  #upsc-popup-box::before { display: none !important; height: 0 !important; margin: 0 !important; }
  #upsc-popup-close { top: 8px !important; right: 8px !important; }
}

/* ============================================================
   Vertical rhythm on phones — the cloned sections use desktop
   padding (50–80px) which reads as large empty bands between a
   banner/video and the next heading on a 375px screen.
   ============================================================ */
@media (max-width: 767px) {
  .hero-split-section { padding-bottom: 16px !important; padding-top: 8px !important; }
  .riyasat-mentorship-section,
  .about-section-wrapper,
  .curriculum-section,
  .faculty-section,
  .obstacles-section,
  .features-section,
  .success-highlight-section,
  .batch-details-section { padding-top: 22px !important; padding-bottom: 22px !important; }
  .section-header-global { margin-bottom: 10px !important; padding-top: 0 !important; }
  .section-header-global h2 { margin-bottom: 6px !important; }
  /* the divider under a section title */
  .section-header-global .underline { margin: 8px auto 0 !important; }
}

/* Fees-table "View Schedule" links were 16px tall — below a tappable
   target on a phone. Give them a real button-sized hit area. */
@media (max-width: 767px) {
  .batch-table .batch-link,
  .batch-table td a {
    display: inline-flex !important; align-items: center; justify-content: center;
    min-height: 40px !important; padding: 8px 10px !important;
    line-height: 1.3 !important; text-decoration: underline;
  }
}

/* ============================================================
   upsc — sections 2 to 4 (.overlap-row / .overlap-text) sat
   flush against the LEFT edge with a 36px gap on the right,
   i.e. visibly off-centre. Give them the same symmetric
   gutters as the rest of the page.
   ============================================================ */
@media (max-width: 767px) {
  .overlap-row, .overlap-row.reverse {
    width: 100% !important; max-width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important;
    padding-left: 16px !important; padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  .overlap-text, .overlap-video {
    width: 100% !important; max-width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  .overlap-text { margin-top: 12px !important; }
}

/* ============================================================
   Numbered section headings (1. 2. 3. 4.) were getting THREE
   layers of left padding — the container's 18px, the bullet's
   own ~20px, and the 18px added by the edge-guard above — so the
   heading text started ~56px in while its cards started ~17px.
   That mismatch is what reads as "the section is pushed right".
   The container already supplies the gutter; the label only
   needs room for its bullet.
   ============================================================ */
@media (max-width: 767px) {
  /* .section-label is a flex row whose ::before bullet already supplies the
     indent, and .inner-container already supplies the page gutter. Any extra
     padding here just pushes the heading right of its own cards. */
  .section-label {
    padding-left: 0 !important;
    padding-right: 8px !important;
    margin-left: 0 !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   Stacked flex rows: when .feature-row / .overlap-row switch to
   column on mobile, the clone's flex-basis (written for WIDTH)
   starts controlling HEIGHT — leaving ~150px of dead space under
   the text before the video. Size these to their content.
   ============================================================ */
@media (max-width: 767px) {
  .feature-row, .overlap-row, .overlap-row.reverse { gap: 14px !important; align-items: stretch !important; }
  .feature-text, .feature-media,
  .overlap-text, .overlap-video,
  .mains-left, .mains-video-col {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .feature-media, .overlap-video { align-self: stretch !important; }
}

/* ============================================================
   Headings that already sit inside a padded wrapper must not get
   the edge-guard's extra 18px — that made them start 18px right
   of their own body text. The guard stays for orphan headings
   that sit directly on a full-bleed section.
   ============================================================ */
@media (max-width: 767px) {
  .content-container .section-title, .content-container .sub-section-title,
  .about-text .section-title, .about-text .sub-section-title,
  .inner-container .section-title, .inner-container .sub-section-title,
  .mentorship-container .section-title, .batch-details-section .section-title {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}