/*
 * Maninder English - Grammar lesson premium polish.
 * Phase 4: reading experience, lesson components, sidebar, exercises, and mobile.
 */

:root {
  --lp-bg: #fbfaf7;
  --lp-surface: #ffffff;
  --lp-surface-warm: #f8f7f4;
  --lp-ink: #111827;
  --lp-ink-soft: #263354;
  --lp-muted: #5f6b7c;
  --lp-border: rgba(217, 210, 197, .88);
  --lp-violet: #6633dd;
  --lp-violet-dark: #5220c8;
  --lp-violet-soft: #ede8fb;
  --lp-blue: #2563eb;
  --lp-green: #059669;
  --lp-red: #dc2626;
  --lp-saffron: #b5470f;
  --lp-shadow-soft: 0 16px 44px rgba(26, 37, 64, .09);
  --lp-shadow-card: 0 10px 30px rgba(26, 37, 64, .08);
  --lp-shadow-strong: 0 24px 70px rgba(26, 37, 64, .15);
  --lp-ease: cubic-bezier(.22, 1, .36, 1);
}

body.grammar-lesson-single {
  background:
    linear-gradient(180deg, #ffffff 0%, var(--lp-bg) 44%, #ffffff 100%);
  color: var(--lp-ink);
}

.grammar-lesson-single .wrap {
  max-width: 790px;
}

.grammar-lesson-single .me-nav {
  top: 12px;
  width: min(1120px, calc(100vw - 32px));
  margin: 12px auto 0;
  border: 1px solid rgba(232, 228, 220, .8);
  border-radius: 18px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 12px 34px rgba(26, 37, 64, .08);
  overflow: hidden;
}

.admin-bar.grammar-lesson-single .me-nav {
  top: 44px;
  margin-top: 0;
}

.grammar-lesson-single .me-nav-wrap {
  height: 62px;
  padding-inline: 22px;
}

.grammar-lesson-single .me-logo {
  letter-spacing: 0;
}

.grammar-lesson-single .nav-lesson-title {
  color: var(--lp-muted);
}

.grammar-lesson-single .nav-yt,
.grammar-lesson-single .lh-yt-cta,
.grammar-lesson-single .share-yt {
  background: #ff1d1d;
  box-shadow: 0 10px 22px rgba(255, 0, 0, .15);
}

.grammar-lesson-single .nav-yt:hover,
.grammar-lesson-single .lh-yt-cta:hover,
.grammar-lesson-single .share-yt:hover {
  background: #d90000;
}

.grammar-lesson-single .lesson-hero {
  position: relative;
  padding: clamp(54px, 6vw, 82px) 0 clamp(34px, 4.5vw, 54px);
  border-bottom: 1px solid rgba(232, 228, 220, .82);
  background:
    radial-gradient(circle at 15% 8%, rgba(102, 51, 221, .13), transparent 32%),
    radial-gradient(circle at 84% 18%, rgba(37, 99, 235, .12), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
  overflow: hidden;
}

.grammar-lesson-single .lesson-hero::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(102, 51, 221, .28), transparent);
}

.grammar-lesson-single .lh-breadcrumb {
  width: fit-content;
  padding: 8px 12px;
  border: 1px solid rgba(102, 51, 221, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 8px 24px rgba(26, 37, 64, .05);
  color: var(--lp-muted);
}

.grammar-lesson-single .lh-breadcrumb a {
  color: var(--lp-violet-dark);
  font-weight: 700;
}

.grammar-lesson-single .lh-breadcrumb span {
  color: #a6adba;
}

.grammar-lesson-single .lh-pill {
  min-height: 34px;
  padding: 8px 16px;
  border: 1px solid rgba(102, 51, 221, .16);
  border-radius: 999px;
  background: rgba(237, 232, 251, .86);
  letter-spacing: .08em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .68);
}

.grammar-lesson-single .lesson-hero h1 {
  max-width: 760px;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.04;
  letter-spacing: 0;
  color: var(--lp-ink);
  text-wrap: balance;
}

.grammar-lesson-single .lh-hi {
  max-width: 690px;
  margin-top: 18px;
  margin-bottom: 26px;
  padding: 14px 18px 14px 20px;
  border: 1px solid rgba(181, 71, 15, .18);
  border-left: 4px solid var(--lp-saffron);
  border-radius: 14px;
  background: rgba(255, 251, 235, .9);
  box-shadow: 0 10px 28px rgba(181, 71, 15, .06);
}

.grammar-lesson-single .lh-meta {
  gap: 10px;
  margin-bottom: 26px;
}

.grammar-lesson-single .lh-meta-item {
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(232, 228, 220, .9);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: var(--lp-muted);
  box-shadow: 0 8px 22px rgba(26, 37, 64, .04);
}

.grammar-lesson-single .lh-intro {
  max-width: 720px;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.78;
  color: #394456;
}

.grammar-lesson-single .lh-yt-cta {
  min-height: 50px;
  border-radius: 14px;
}

.grammar-lesson-single .lesson-layout {
  grid-template-columns: minmax(0, 760px) 260px;
  gap: clamp(36px, 5vw, 64px);
  max-width: 1130px;
}

.grammar-lesson-single .lesson-content {
  padding: clamp(34px, 4.5vw, 54px) 0 88px;
}

.grammar-lesson-single .lesson-content > *:first-child {
  margin-top: 0;
}

.grammar-lesson-single .l-section {
  position: relative;
  margin-bottom: clamp(58px, 7vw, 84px);
  scroll-margin-top: 100px;
}

.grammar-lesson-single .l-section::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 4px;
  bottom: 12px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(102, 51, 221, .28), rgba(102, 51, 221, 0));
}

.grammar-lesson-single .l-section-label {
  margin-bottom: 22px;
}

.grammar-lesson-single .l-section-num {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--lp-violet), var(--lp-violet-dark));
  color: #fff;
  box-shadow: 0 12px 26px rgba(102, 51, 221, .22);
}

.grammar-lesson-single .l-section-tag {
  color: var(--lp-violet-dark);
  letter-spacing: .08em;
}

.grammar-lesson-single .l-section h2 {
  max-width: 720px;
  margin-bottom: 18px;
  font-size: clamp(25px, 3vw, 36px);
  line-height: 1.12;
  letter-spacing: 0;
  text-wrap: balance;
}

.grammar-lesson-single .l-section h3 {
  letter-spacing: 0;
}

.grammar-lesson-single .l-section p,
.grammar-lesson-single .l-section li {
  font-size: 17px;
  line-height: 1.86;
  color: #374151;
}

.grammar-lesson-single .l-section strong {
  color: #111827;
}

.grammar-lesson-single .example-pair {
  gap: 18px;
  margin: 32px 0;
}

.grammar-lesson-single .example-card,
.grammar-lesson-single .example-single,
.grammar-lesson-single .future-card,
.grammar-lesson-single .reveal-card,
.grammar-lesson-single .tap-word,
.grammar-lesson-single .fact-acc,
.grammar-lesson-single .fill-item,
.grammar-lesson-single .practice-q,
.grammar-lesson-single .takeaway-item {
  border-color: var(--lp-border);
  box-shadow: var(--lp-shadow-card);
}

.grammar-lesson-single .example-card,
.grammar-lesson-single .example-single {
  border-radius: 18px;
}

.grammar-lesson-single .example-card {
  padding: 24px;
}

.grammar-lesson-single .example-card:hover,
.grammar-lesson-single .takeaway-item:hover,
.grammar-lesson-single .future-card:hover,
.grammar-lesson-single .reveal-card:hover,
.grammar-lesson-single .tap-word:hover,
.grammar-lesson-single .fact-acc:hover {
  box-shadow: var(--lp-shadow-soft);
}

.grammar-lesson-single .ex-wrong {
  background: linear-gradient(180deg, #fff, #fff7f7);
}

.grammar-lesson-single .ex-right {
  background: linear-gradient(180deg, #fff, #f4fffa);
}

.grammar-lesson-single .ex-sentence,
.grammar-lesson-single .es-sentence {
  letter-spacing: 0;
}

.grammar-lesson-single .hindi-note,
.grammar-lesson-single .pull-quote,
.grammar-lesson-single .rule-box,
.grammar-lesson-single .memory-trick,
.grammar-lesson-single .pro-context,
.grammar-lesson-single .practice-section,
.grammar-lesson-single .next-lesson,
.grammar-lesson-single .svg-diagram,
.grammar-lesson-single .tone-demo {
  border-radius: 20px;
  box-shadow: var(--lp-shadow-card);
}

.grammar-lesson-single .hindi-note {
  padding: 22px 24px;
  border-color: rgba(217, 119, 6, .22);
  background:
    linear-gradient(135deg, rgba(255, 251, 235, .98), rgba(255, 247, 237, .92));
}

.grammar-lesson-single .pull-quote {
  padding: 28px 30px;
  border-left: 0;
  background:
    linear-gradient(135deg, rgba(237, 232, 251, .98), rgba(239, 246, 255, .86));
  border: 1px solid rgba(102, 51, 221, .16);
}

.grammar-lesson-single .pull-quote p {
  font-size: clamp(19px, 2.2vw, 23px);
  color: #1f2937;
}

.grammar-lesson-single .rule-box,
.grammar-lesson-single .memory-trick,
.grammar-lesson-single .pro-context,
.grammar-lesson-single .next-lesson,
.grammar-lesson-single .tone-demo {
  position: relative;
  overflow: hidden;
}

.grammar-lesson-single .rule-box {
  background: var(--vl, #EDE8FB);
  border-left: 4px solid var(--violet, #6633DD);
  padding: 32px 34px;
}

.grammar-lesson-single .rule-formula {
  border-radius: 14px;
}

.grammar-lesson-single .memory-trick {
  background: var(--vl, #EDE8FB);
  border-left: 4px solid var(--violet, #6633DD);
}

/* Text inside rule-box/memory-trick was still styled for the old dark
   card (white text at low opacity). Now that both use a light lavender
   background, override to ink/violet tones so it's actually readable. */
.grammar-lesson-single .rule-box-label {
  color: var(--violet, #6633DD);
}

.grammar-lesson-single .rule-box h3 {
  color: var(--navy, #1A2540);
}

.grammar-lesson-single .rule-box p {
  color: #4A5568;
}

.grammar-lesson-single .rule-box strong {
  color: var(--navy, #1A2540);
}

.grammar-lesson-single .rule-formula {
  color: var(--vd, #5220C8);
  background: rgba(102, 51, 221, .08);
  border-color: rgba(102, 51, 221, .22);
}

.grammar-lesson-single .rule-formula span {
  color: var(--navy, #1A2540);
}

.grammar-lesson-single .rule-formula em {
  color: #0D7A52;
}

.grammar-lesson-single .mt-label {
  color: var(--violet, #6633DD);
}

.grammar-lesson-single .mt-text {
  color: var(--navy, #1A2540);
}

.grammar-lesson-single .mt-sub {
  color: #4A5568;
}

.grammar-lesson-single .memory-trick strong {
  color: var(--navy, #1A2540);
}

.grammar-lesson-single .memory-trick::before {
  opacity: .85;
  font-size: 44px;
  filter: drop-shadow(0 4px 10px rgba(82, 32, 200, .18));
}

.grammar-lesson-single .pro-context {
  background: linear-gradient(160deg, #F9FAFC 0%, #EEF2F7 100%);
  border: 1px solid rgba(44, 72, 112, .1);
  border-left: 4px solid #2C4870;
  padding: 26px 30px;
  box-shadow:
    0 1px 2px rgba(17, 24, 39, .05),
    0 14px 32px rgba(26, 37, 64, .07);
}

.grammar-lesson-single .pro-context::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), transparent);
  pointer-events: none;
}

.grammar-lesson-single .pro-context:last-of-type {
  margin-bottom: 0;
}

.grammar-lesson-single .pc-label {
  color: #2C4870;
  position: relative;
}

.grammar-lesson-single .pc-scenario {
  color: var(--navy, #1A2540);
  position: relative;
}

.grammar-lesson-single .pc-why {
  color: #2D3748;
  position: relative;
}

.grammar-lesson-single .pc-why em {
  color: var(--violet, #6633DD);
}

.grammar-lesson-single .pc-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  font-style: normal;
  margin-right: 2px;
}

.grammar-lesson-single .pc-mark-good {
  color: #059669;
  background: #ECFDF5;
}

.grammar-lesson-single .pc-mark-caution {
  color: #B5470F;
  background: #FEF3C7;
}

.grammar-lesson-single .rule-box::before,
.grammar-lesson-single .next-lesson::before,
.grammar-lesson-single .tone-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .12), transparent 42%);
  pointer-events: none;
}

.grammar-lesson-single .pattern-table,
.grammar-lesson-single .vocab-table {
  border-radius: 18px;
  border: 1px solid var(--lp-border);
  box-shadow: var(--lp-shadow-card);
  background: #fff;
}

.grammar-lesson-single .pattern-table thead th,
.grammar-lesson-single .vocab-table th {
  background: linear-gradient(135deg, #1a2540, #263354);
}

.grammar-lesson-single .pattern-table tbody td,
.grammar-lesson-single .vocab-table td {
  line-height: 1.62;
}

.grammar-lesson-single .practice-section {
  padding: clamp(24px, 4vw, 38px);
  background:
    linear-gradient(180deg, rgba(248, 247, 244, .96), rgba(255, 255, 255, .9));
}

.grammar-lesson-single .practice-section h3 {
  font-size: clamp(20px, 2.5vw, 26px);
}

.grammar-lesson-single .pq-score-bar,
.grammar-lesson-single .lesson-score {
  border-color: rgba(102, 51, 221, .12);
  box-shadow: 0 10px 26px rgba(26, 37, 64, .06);
}

.grammar-lesson-single .pq-opt,
.grammar-lesson-single .fill-opt,
.grammar-lesson-single .tile-toggle-btn {
  min-height: 42px;
}

.grammar-lesson-single .pq-opt:hover:not([disabled]),
.grammar-lesson-single .fill-opt:hover,
.grammar-lesson-single .tile-toggle-btn:hover {
  transform: translateY(-1px);
}

.grammar-lesson-single .pq-feedback,
.grammar-lesson-single .fill-note {
  border: 1px solid rgba(232, 228, 220, .8);
}

.grammar-lesson-single .takeaway-item {
  border-radius: 16px;
}

.grammar-lesson-single .tk-num {
  border-radius: 10px;
  background: var(--lp-violet-soft);
}

.grammar-lesson-single .lesson-sidebar {
  top: 96px;
  padding-top: clamp(34px, 4.5vw, 54px);
}

.grammar-lesson-single .ls-toc,
.grammar-lesson-single .ls-share {
  border: 1px solid rgba(232, 228, 220, .86);
  border-radius: 18px;
  background: rgba(255, 255, 255, .84);
  box-shadow: var(--lp-shadow-card);
  backdrop-filter: blur(16px);
}

.grammar-lesson-single .ls-share {
  padding: 18px;
}

.grammar-lesson-single .ls-toc h4,
.grammar-lesson-single .ls-share h4 {
  letter-spacing: .08em;
  color: var(--lp-muted);
}

.grammar-lesson-single .toc-item {
  min-height: 42px;
  padding: 9px 0;
}

.grammar-lesson-single .toc-num {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--lp-surface-warm);
}

.grammar-lesson-single .toc-item.active .toc-num {
  background: var(--lp-violet);
  color: #fff;
}

.grammar-lesson-single .toc-label {
  color: #4b5563;
}

.grammar-lesson-single .share-yt {
  min-height: 44px;
  border-radius: 12px;
}

.grammar-lesson-single .next-lesson {
  background: linear-gradient(135deg, #111827 0%, #1a2540 62%, #5220c8 100%);
}

.grammar-lesson-single .nl-btn {
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(102, 51, 221, .24);
}

.grammar-lesson-single footer.me-footer {
  background: linear-gradient(180deg, #1a2540, #111827);
}

.grammar-lesson-single .foot-grid {
  border-bottom-color: rgba(255, 255, 255, .1);
}

@media (max-width: 980px) {
  .grammar-lesson-single .lesson-layout {
    grid-template-columns: 1fr;
    max-width: 820px;
  }
  /* .lesson-sidebar stays display:none here — see inline template
     style block (@media max-width:860px). Do not re-introduce a
     display/position/order override for .lesson-sidebar or .lesson-layout
     in this query; it will win on specificity over the inline rule
     and force the TOC card back onto mobile unintentionally. */
}

@media (max-width: 720px) {
  .grammar-lesson-single .me-nav {
    top: 0;
    width: 100%;
    margin: 0;
    border-inline: 0;
    border-top: 0;
    border-radius: 0;
  }

  .admin-bar.grammar-lesson-single .me-nav {
    top: 46px;
  }

  .grammar-lesson-single .me-nav-wrap {
    height: auto;
    min-height: 58px;
    padding: 10px 16px;
    gap: 10px;
  }

  .grammar-lesson-single .me-logo {
    font-size: 18px;
  }

  .grammar-lesson-single .nav-sep,
  .grammar-lesson-single .nav-lesson-title {
    display: none;
  }

  .grammar-lesson-single .nav-yt {
    margin-left: auto;
    padding: 8px 11px;
    font-size: 12px;
  }

  .grammar-lesson-single .lesson-hero {
    padding: 42px 0 38px;
  }

  .grammar-lesson-single .wrap,
  .grammar-lesson-single .wrap-wide,
  .grammar-lesson-single .lesson-layout {
    padding-inline: 18px;
  }

  .grammar-lesson-single .lesson-hero h1 {
    font-size: clamp(31px, 10vw, 44px);
  }

  .grammar-lesson-single .lh-breadcrumb {
    border-radius: 14px;
  }

  .grammar-lesson-single .lh-pill {
    align-items: flex-start;
    line-height: 1.35;
  }

  .grammar-lesson-single .lh-meta-item {
    width: 100%;
  }

  .grammar-lesson-single .lh-yt-cta {
    width: 100%;
    justify-content: center;
    padding-inline: 18px;
  }

  .grammar-lesson-single .lesson-content {
    padding-top: 34px;
  }

  .grammar-lesson-single .l-section::before {
    display: none;
  }

  .grammar-lesson-single .l-section h2 {
    font-size: clamp(24px, 7vw, 31px);
  }

  .grammar-lesson-single .l-section p,
  .grammar-lesson-single .l-section li {
    font-size: 16px;
    line-height: 1.78;
  }

  .grammar-lesson-single .example-pair,
  .grammar-lesson-single .tone-cards {
    grid-template-columns: 1fr;
  }

  .grammar-lesson-single .example-card,
  .grammar-lesson-single .hindi-note,
  .grammar-lesson-single .pull-quote,
  .grammar-lesson-single .rule-box,
  .grammar-lesson-single .memory-trick,
  .grammar-lesson-single .pro-context,
  .grammar-lesson-single .practice-section,
  .grammar-lesson-single .next-lesson,
  .grammar-lesson-single .tone-demo {
    border-radius: 16px;
  }

  .grammar-lesson-single .rule-box,
  .grammar-lesson-single .memory-trick,
  .grammar-lesson-single .pro-context,
  .grammar-lesson-single .next-lesson {
    padding: 24px;
  }

  .grammar-lesson-single .pattern-table,
  .grammar-lesson-single .vocab-table {
    font-size: 14px;
  }

  .grammar-lesson-single .pattern-table thead th,
  .grammar-lesson-single .pattern-table tbody td,
  .grammar-lesson-single .vocab-table th,
  .grammar-lesson-single .vocab-table td {
    padding: 12px 14px;
  }

  .grammar-lesson-single .pq-opt,
  .grammar-lesson-single .fill-opt {
    width: 100%;
    justify-content: flex-start;
  }

  .grammar-lesson-single .foot-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grammar-lesson-single *,
  .grammar-lesson-single *::before,
  .grammar-lesson-single *::after {
    scroll-behavior: auto !important;
  }
}