/* ============================================================
   LEAD-GENERATION LAYER — in-content course blocks, sidebar
   rail, and the "Other Courses" strip.

   Enqueued by riyasat_leadgen_assets() (inc/leadgen.php) on
   single posts only, AFTER current-affairs.css — the blocks
   deliberately reuse .ca-btn / .ca-box / .ca-card rather than
   minting a second button and card system, so this file styles
   only what is genuinely new.

   ------------------------------------------------------------
   TOKENS
   ------------------------------------------------------------
   --s-*, --e-*, --hairline, --ink, --ink-soft and the two font
   stacks are declared on .yatharth-page-wrapper in main.css, and
   every template that renders these blocks sits inside it. Each
   var() still carries a literal fallback: riyasat_leadgen_block()
   is callable from anywhere, and an unresolved --s-3 would
   collapse the padding to zero rather than degrade to something
   readable.

   Palette is the existing one — #e71d39, #FA4651, #FF515A,
   #FF8C2B. Nothing new.

   ------------------------------------------------------------
   MARKUP CONTRACT
   ------------------------------------------------------------
     aside.lg-block[.lg-block--incontent]
       p.lg-block-tag
       p.lg-block-head > a
       p.lg-block-pitch
       .lg-block-row > a.ca-btn.ca-btn--call|--wa|--apply

     section.ca-card.lg-rail > .ca-card-body
       p.lg-rail-title > a
       p.lg-rail-pitch
       .lg-rail-row > a.ca-btn
       ul.ca-links.lg-rail-links > li.ca-links-item > a

     section.ca-box.lg-other > .ca-box-body
       ul.lg-other-grid > li.lg-other-card
         span.lg-other-tag + p.lg-other-title > a + p.lg-other-pitch
       p.lg-other-note > a.lg-other-tel

   Mobile-first. Every tap target is >= 44px; the .ca-btn rules in
   current-affairs.css already guarantee that and are not
   overridden here.
   ============================================================ */

/* ---------- IN-CONTENT BLOCK ----------
   Reads as a bordered aside, not as a banner: it is spliced into the middle of
   an article, and anything that looks like an advertisement there costs the
   article its credibility. The left brand rule is the only chrome — enough to
   mark it as "not the article", cheap enough not to break the reading rhythm. */
.lg-block {
  margin: var(--s-4, 32px) 0;
  padding: var(--s-3, 24px);
  border: 1px solid var(--hairline, #ece8e4);
  border-left: 3px solid #e71d39;
  border-radius: 12px;
  background: #fbf9f8;
  box-shadow: var(--e-1, 0 1px 2px rgba(16, 12, 10, 0.04));
}

.lg-block-tag {
  margin: 0 0 var(--s-1, 8px);
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* The section-header gradient, applied to the eyebrow only — the full
     gradient behind a whole block would read as a paid banner. */
  background: linear-gradient(90deg, #e71d39 0%, #FF8C2B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Forced-colors mode drops background images, which takes the gradient with it
   and leaves colour:transparent painting the eyebrow onto nothing — the tag
   disappears entirely for exactly the readers who need it most. Hand the text
   back a real colour there. */
@media (forced-colors: active) {
  .lg-block-tag {
    background: none;
    color: CanvasText;
    forced-color-adjust: none;
  }
}

.lg-block-head {
  margin: 0 0 var(--s-1, 8px);
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink, #14100E);
}

.lg-block-head a {
  color: inherit;
  text-decoration: none;
}

.lg-block-head a:hover,
.lg-block-head a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lg-block-pitch {
  margin: 0 0 var(--s-3, 24px);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft, #5C5550);
}

.lg-block-row {
  display: grid;
  gap: var(--s-1, 8px);
}

@media (min-width: 560px) {
  .lg-block { padding: var(--s-4, 32px); }
  .lg-block-head { font-size: 21px; }
  .lg-block-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-2, 16px);
  }
}

/* ---------- BUTTONS ON A LIGHT SURFACE ----------
   .ca-btn's VARIANTS are surface-coupled in a way the base class is not: they
   were written for .ca-cta, the red/orange gradient panel, so --call and
   --apply are white fills and --wa is a 14%-white wash with white text. The
   lead blocks put them on #fbf9f8 and on the white .ca-card, where measurement
   at 375px gave --wa a contrast ratio of 1.00:1 — white text on white, the
   WhatsApp CTA invisible on every article — while --call and --apply became
   white shapes on near-white with no boundary.

   Reusing the .ca-btn geometry is still right (one place owns height, radius,
   icon sizing). Only the fills are re-declared, and only inside the lead
   containers, so the gradient panels elsewhere are untouched. */
.lg-block .ca-btn--call,
.lg-rail .ca-btn--call {
  background: #e71d39;
  color: #ffffff;
  box-shadow: none;
}

.lg-block .ca-btn--wa,
.lg-block .ca-btn--apply,
.lg-rail .ca-btn--wa,
.lg-rail .ca-btn--apply {
  background: #ffffff;
  color: #e71d39;
  box-shadow: inset 0 0 0 1px rgba(231, 29, 57, 0.45);
}

/* ---------- SIDEBAR RAIL ----------
   Inherits .ca-card's shell; only the inner type and the two-up button row are
   new. The rail column is narrow, so the buttons stack until it is not. */
.lg-rail-title {
  margin: 0 0 var(--s-1, 8px);
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink, #14100E);
}

/* The rail card body holds buttons and a related-course list, so the overlay
   trick used on .lg-other-card would sit on top of them. Give the anchor the
   44px itself instead — it measured 20px. */
.lg-rail-title a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}

.lg-rail-title a:hover,
.lg-rail-title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lg-rail-pitch {
  margin: 0 0 var(--s-2, 16px);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft, #5C5550);
}

.lg-rail-row {
  display: grid;
  gap: var(--s-1, 8px);
}

.lg-rail-links {
  margin: var(--s-2, 16px) 0 0;
  padding-top: var(--s-2, 16px);
  border-top: 1px solid var(--hairline, #ece8e4);
}

/* ---------- RAIL, INLINE PLACEMENT (single.php) ----------
   single.php is one column, so /upsc-exam/ and /mentorship/ articles have no
   sidebar to put the rail in and it is emitted inline under the article instead.
   Same component, same markup — only the constraints differ. The two overrides
   below are exactly the two assumptions the card makes about being in a narrow
   column: buttons stacked (there is now room to sit them side by side), and type
   sized for ~320px (it now spans the measure). Capping the width keeps it from
   becoming a full-bleed banner, which would read as an ad rather than a card. */
.rs-lg-rail {
  margin: var(--s-5, 40px) 0 0;
}

@media (min-width: 640px) {
  .rs-lg-rail .lg-rail-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rs-lg-rail .lg-rail-title { font-size: 19px; }
}

/* ---------- OTHER COURSES ----------
   Inherits .ca-box, which is the same shell the FAQ block uses — the strip sits
   immediately above it, and two adjacent blocks in different shells would read
   as two unrelated interruptions rather than one end-of-article footer. */
.lg-other-grid {
  display: grid;
  gap: var(--s-2, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Two up, then three — and the three-up step waits for 1180px, not 700px,
   because these cards sit in .ca-main, which loses 320px to the sidebar the
   moment the viewport passes 1000px. Going three-up at 700px meant that between
   1000px and 1180px each card had ~130px of content width: a two-word course
   name wrapping over three lines above a pitch set thirteen characters to the
   line. Same breakpoints as .ca-topic-grid, for the same reason. */
@media (min-width: 700px) {
  .lg-other-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1180px) {
  .lg-other-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.lg-other-card {
  /* Anchors the stretched title link below. */
  position: relative;
  padding: var(--s-3, 24px);
  border: 1px solid var(--hairline, #ece8e4);
  border-radius: 12px;
  background: #FFFFFF;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.lg-other-card:hover,
.lg-other-card:focus-within {
  box-shadow: var(--e-2, 0 2px 4px rgba(16, 12, 10, 0.04), 0 8px 24px rgba(16, 12, 10, 0.07));
  transform: translateY(-2px);
}

.lg-other-tag {
  display: inline-block;
  margin-bottom: var(--s-1, 8px);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(231, 29, 57, 0.08);
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e71d39;
}

.lg-other-title {
  margin: 0 0 6px;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink, #14100E);
}

.lg-other-title a {
  color: inherit;
  text-decoration: none;
  display: block;
}

/* Measured at 375px, `display:block` alone left the target 22px tall — full
   width, but a course name is one line, and width is not the axis a thumb
   misses on. This overlay makes the whole card the target. Safe here and only
   here: the card contains no other interactive element for the overlay to
   swallow, unlike the sidebar rail. */
.lg-other-title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.lg-other-title a:hover,
.lg-other-title a:focus-visible {
  color: #e71d39;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lg-other-pitch {
  margin: 0;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft, #5C5550);
}

.lg-other-note {
  margin: var(--s-3, 24px) 0 0;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  color: var(--ink-soft, #5C5550);
}

.lg-other-tel {
  display: inline-block;
  /* 44px tap target on a link that sits inside a sentence. */
  min-height: 44px;
  line-height: 44px;
  padding: 0 4px;
  font-weight: 700;
  color: #e71d39;
}

/* ---------- ACCESSIBILITY ---------- */
.lg-block a:focus-visible,
.lg-rail a:focus-visible,
.lg-other a:focus-visible {
  outline: 2px solid #e71d39;
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .lg-other-card {
    transition: none;
  }
  .lg-other-card:hover,
  .lg-other-card:focus-within {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   OWNER-CREATED BANNERS (Lead Gen admin screen)

   A banner the owner adds is the SAME component as a built-in block — it reuses
   .lg-block wholesale and only adds what the built-in block has no concept of:
   an optional image. Giving admin banners their own look would tell readers
   which promotions were hand-added, which is not information they need.
   --------------------------------------------------------------------------- */
.lg-banner-media {
	margin: 0 0 12px;
}

.lg-banner-img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: 8px;
}

/* In the sidebar the rail is narrow enough that a wide image pushes the CTA
   below the fold; capped so the button stays in the first screenful. */
.lg-banner--sidebar .lg-banner-img {
	max-height: 160px;
	object-fit: cover;
}

/* Admin-set copy can be long. Keeping the CTA row full-width on a phone keeps
   the 44px target intact rather than letting two buttons share one line. */
@media (max-width: 480px) {
	.lg-banner .lg-block-row .ca-btn {
		width: 100%;
		justify-content: center;
	}
}

/* The configured popup panel body + CTA (assets/js/main.js popupApplyConfig). */
.upsc-popup-body {
	margin: 12px 0 16px;
	font-size: 0.95rem;
	line-height: 1.6;
}

.upsc-popup-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
}

/* ============================================================
   COURSE IMAGERY  (riyasat_leadgen_course_media)

   The card art is the course PAGE's own featured image, so the
   card and the page a reader lands on are visibly the same
   thing. The <a> is aria-hidden and tabindex="-1" on purpose:
   the title link directly beneath it goes to the identical URL,
   and two adjacent links to one destination is a duplicate stop
   for a screen-reader or keyboard user without adding a way to
   get anywhere new. The image stays clickable for the mouse,
   which is the only audience that benefits from it.

   FIXED ASPECT RATIO, object-fit: cover. Course banners on this
   site are not one shape — some are wide strips, some are near
   square — and letting each card size itself to its own image
   gives a three-card row three different heights. The ratio is
   the card's decision, not the image's.

   No rule here renders anything when the image is absent: the
   PHP returns '' and the element is never printed, so a course
   page with no picture yields the text-only card unchanged
   rather than an empty box or a broken <img>.
   ============================================================ */
.lg-media {
  display: block;
  overflow: hidden;
  background: #f3efec;
  line-height: 0;
}

.lg-media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* In-content / end-of-article block: the image is a band across the top of the
   card, so the padded body has to be pulled out to the card's edge to meet it. */
.lg-media--block {
  margin: calc(-1 * var(--s-3, 24px)) calc(-1 * var(--s-3, 24px)) var(--s-3, 24px);
  /* The 3px accent border on .lg-block runs down the left edge; matching the
     radius only on the right keeps the image from overhanging it. */
  border-radius: 0 9px 0 0;
  aspect-ratio: 16 / 7;
}

@media (min-width: 560px) {
  .lg-media--block {
    margin: calc(-1 * var(--s-4, 32px)) calc(-1 * var(--s-4, 32px)) var(--s-4, 32px);
  }
}

/* Sidebar rail: sits between .ca-card-head and .ca-card-body, both of which are
   already padded by current-affairs.css, so this spans the full card width. A
   taller 16:9 would push the CTAs below the fold in a 320px sticky column, which
   is the exact failure this whole change is fixing. */
.lg-media--rail {
  aspect-ratio: 16 / 8;
}

/* Other Courses cards. .lg-other-card is padded and has a stretched title link
   over it, so the band is pulled to the card edges the same way the block's is. */
.lg-media--other {
  margin: calc(-1 * var(--s-3, 24px)) calc(-1 * var(--s-3, 24px)) var(--s-2, 16px);
  border-radius: 11px 11px 0 0;
  aspect-ratio: 16 / 8;
}

/* The card lifts on hover; the image should read as part of that one movement
   rather than sitting still inside a moving card. */
@media (prefers-reduced-motion: no-preference) {
  .lg-media-img {
    transition: transform 0.35s ease;
  }

  .lg-other-card:hover .lg-media-img,
  .lg-block:hover .lg-media-img {
    transform: scale(1.03);
  }
}

/* Printed articles do not need course art. */
@media print {
  .lg-media { display: none !important; }
}


/* ============================================================
   SINGLE.PHP TWO-COLUMN BODY

   /upsc-exam/ and /mentorship/ articles had no right-hand column
   at all, so the course rail was emitted inline under the
   article and a reader who did not finish the page never saw a
   course. This is the column.

   1000px matches .ca-layout--sidebar deliberately: the same
   320px rail against the same body copy wants the same
   breakpoint, and two different ones would mean the site has two
   answers to "when is there room for a sidebar".
   ============================================================ */
.rs-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4, 32px);
  align-items: start;
}

.rs-body-main { min-width: 0; }

@media (min-width: 1000px) {
  .rs-body-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--s-5, 48px);
  }

  .rs-side {
    position: sticky;
    top: 90px;
  }

  /* In the column the rail is a sidebar card again, so the inline placement's
     two-up button row and larger type — which exist because the rail used to
     span the full measure — have to be handed back. */
  .rs-side .rs-lg-rail {
    margin-top: 0;
  }

  .rs-side .rs-lg-rail .lg-rail-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .rs-side .rs-lg-rail .lg-rail-title {
    font-size: 17px;
  }
}

/* A sticky rail is its own kind of motion on a scrolling page. */
@media (prefers-reduced-motion: reduce) {
  .rs-side { position: static; }
}

@media print {
  .rs-side { display: none !important; }
  .rs-body-grid { display: block; }
}

/* The media band is pulled to the card's edges with negative margins, so the
   card has to clip it or a square image corner pokes out past a 12px radius.
   Scoped to the --media variants so a text-only card's box model is untouched.
   Safe: nothing inside either card is positioned outside its own bounds — the
   stretched .lg-other-title a::after is inset:0. */
.lg-block--media,
.lg-other-card--media {
  overflow: hidden;
}

/* ============================================================
   CREATIVE LAYER — the original site's image promos.
   Markup from inc/leadgen-creative.php; behaviour in
   assets/js/leadgen.js. Artwork is hotlinked from the
   production host during the migration (see that file's header).
   ============================================================ */

/* --- Sidebar: three portrait course banners (795x1024) --- */
.lg-creative-rail {
  display: grid;
  gap: 16px;
  margin-bottom: 24px;
}

.lg-creative-banner {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lg-creative-banner:hover,
.lg-creative-banner:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

.lg-creative-banner img {
  display: block;
  width: 100%;
  height: auto;
  /* aspect-ratio + contain, not just height:auto.
     height:auto alone only holds the shape while nothing else constrains the
     box. The moment an ancestor sets a height — a flex row that stretches its
     items, a sticky column with a max-height, a grid row — the image is handed
     a box of the wrong shape and the default object-fit:fill DISTORTS it rather
     than refusing. Declaring the ratio makes the correct box the browser's own
     decision, and contain guarantees that even a wrong box letterboxes instead
     of stretching. Also removes layout shift, since the space is reserved before
     the image loads. */
  aspect-ratio: 795 / 1024;
  object-fit: contain;
}

/* --- In-content: the 1920x500 banner slider --- */
.lg-slider {
  position: relative;
  /* "Matches article width" — the original's own note, and the reason this is a
     max-width rather than a full-bleed: a banner wider than the column it
     interrupts reads as a different page, not as part of this one. */
  max-width: 820px;
  margin: 34px auto;
}

.lg-slider-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 8px;
}

.lg-slider-track::-webkit-scrollbar { display: none; }

.lg-slider-track:focus-visible {
  outline: 3px solid #1e3a8a;
  outline-offset: 3px;
}

.lg-slider-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.lg-slider-slide img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  /* Same reasoning as the portrait banners. The slide is a flex item, and flex
     items stretch to the tallest sibling by default — so an image that loads
     late, or fails, would be handed the wrong height and stretched to fill it. */
  aspect-ratio: 1920 / 500;
  object-fit: contain;
}

/* A flex row stretches its children; that is what would hand a slide the wrong
   height in the first place. */
.lg-slider-track { align-items: flex-start; }

.lg-slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* 44px, not the original's 32 — a control smaller than a fingertip on the
     placement most likely to be reached on a phone is a control that gets
     mis-tapped onto the banner underneath it. */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 2;
}

.lg-slider-nav:hover { background: #fff; }

.lg-slider-nav:focus-visible {
  outline: 3px solid #1e3a8a;
  outline-offset: 2px;
}

.lg-slider-nav svg {
  width: 24px;
  height: 24px;
  fill: #1e3a8a;
}

.lg-slider-prev { left: 8px; }
.lg-slider-next { right: 8px; }

.lg-slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.lg-slider-dot {
  /* 10px visual dot inside a 44px hit area — the target is finger-sized without
     the design having to be. */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}

.lg-slider-dot::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d6d3d1;
  transition: background 0.2s ease;
}

.lg-slider-dot.is-active::after { background: #e05e36; }

.lg-slider-dot:focus-visible {
  outline: 3px solid #1e3a8a;
  outline-offset: -6px;
  border-radius: 50%;
}

/* --- Stage 1 panel artwork (background set inline by leadgen-creative.php) --- */
#upsc-popup-box::before {
  content: "";
  display: block;
  height: 150px;
  margin: -10px -10px 14px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* --- Stage 2: the middle modal --- */
.lg-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  padding: 20px;
}

.lg-modal[hidden] { display: none; }

.lg-modal-box {
  position: relative;
  width: 100%;
  max-width: 800px;
}

.lg-modal-box img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.lg-modal-close,
.lg-sticky-close {
  position: absolute;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #e05e36;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.lg-modal-close { top: -14px; right: -8px; }
.lg-sticky-close { top: -18px; right: 4px; }

.lg-modal-close:hover,
.lg-sticky-close:hover { background: #111; }

.lg-modal-close:focus-visible,
.lg-sticky-close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* --- Stage 3: the bottom sticky --- */
.lg-sticky {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 700px;
  z-index: 99999;
}

.lg-sticky[hidden] { display: none; }

.lg-sticky img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.16);
}

@media (max-width: 767px) {
  /* Stage 2 is the CENTRE popup — the owner wants it perfectly centred on mobile as
     well as desktop, so it stays vertically/horizontally centred here rather than
     dropping to a bottom sheet. It is a single promo image with a close button, so a
     centred card does not bury an article the way a full-cover form would. */
  .lg-modal {
    align-items: center;
    justify-content: center;
    padding: 16px;
  }

  .lg-modal-box {
    max-width: 94vw;
    max-height: 86vh;
    overflow-y: auto;
    border-radius: 12px;
    background: #fff;
    padding: 10px;
  }

  .lg-modal-close { top: -12px; right: -6px; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-creative-banner,
  .lg-slider-dot::after {
    transition: none;
  }

  .lg-creative-banner:hover,
  .lg-creative-banner:focus-visible {
    transform: none;
  }

  .lg-slider-track { scroll-behavior: auto; }
}

/* The theme defines .screen-reader-text only scoped to .ca-pagination, so the
   modal's accessible label would render as visible text without this. Standard
   WordPress clip pattern. */
.lg-modal .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------
   MOBILE: swap the wide banner for the portrait crop.

   Measured on staging at 375px: a 1920x500 banner in a phone column
   renders 343x89. The ratio is exact — nothing is distorted — but the
   text baked into that artwork lands at roughly 4px and cannot be read.
   A banner nobody can read is not a smaller banner, it is no banner,
   and it still costs a network request and vertical space.

   The portrait crop of the same course is already loaded for the
   sidebar and renders 343x442 on the same screen, which is legible. So
   below the sidebar breakpoint the slider shows the portrait art
   instead of the wide art. Both are emitted; CSS picks per viewport,
   which keeps it a pure presentation change with no PHP branching.
   ------------------------------------------------------------------ */
@media (max-width: 1000px) {
  /* <picture> swaps the FILE; this swaps the reserved BOX to match, so the
     portrait source does not inherit the wide source's 1920/500 ratio and
     letterbox itself into a thin strip. */
  .lg-slider-slide img { aspect-ratio: 795 / 1024; }
}

/* ------------------------------------------------------------------
   CTA DE-DUPLICATION ON PHONES

   Measured on a live article at 375px: FIVE separate Call/WhatsApp
   button rows — the in-content block, two theme CTA rows, the sidebar
   rail, and the fixed bottom bar. 642px of identical calls-to-action
   on an 812px screen, plus 13 tel: links and 8 wa.me links in one
   document.

   That is not five times the conversion. A reader who has scrolled past
   the same three buttons four times has learned to skip them, and the
   article they came for is buried. The fixed bar at the bottom is
   already permanent and always one thumb away, so on a phone it IS the
   call-to-action; every other copy is noise competing with it.

   So below the sidebar breakpoint the lead-gen components keep their
   OFFER — heading, pitch, course banner, the link to the course — and
   drop only the redundant button row. Desktop is untouched: there is no
   fixed bar there, so those rows are the only way to act.
   ------------------------------------------------------------------ */
@media (max-width: 1000px) {
  .lg-block-row,
  .lg-rail-row {
    display: none;
  }

  /* The sidebar's own generic CTA is a THIRD copy of the same three buttons.
     On desktop it sits in a column beside the article and reads as a separate
     offer; on a phone the sidebar stacks underneath, so it lands directly below
     the article's own CTA row — the same buttons twice, a screen apart. The
     article's copy is the one in context, so the sidebar's is the one to drop. */
  .ca-side .ca-cta-row,
  .ca-side .ca-cta-title {
    display: none;
  }

  /* The offer still needs one way to act on it — the course link stays,
     styled as the single action rather than a row of three. */
  .lg-block .lg-block-more,
  .lg-rail .lg-rail-links {
    display: block;
    margin-top: var(--s-2, 16px);
  }
}