/*
 * learn-markup.css
 * Shared stylesheet for all /learn/* article pages.
 * Requires Bootstrap 5 (grid + utilities). Does NOT use --bs-primary.
 * Load once in layouts/app.blade.php
 */

/* ─────────────────────────────────────────
   BRAND TOKENS
───────────────────────────────────────── */
:root {
  --lm-blue:          #204283;
  --lm-blue-dark:     #172f61;
  --lm-blue-mid:      #2e57b0;
  --lm-blue-soft:     #d6f7ff;
  --lm-blue-soft-2:   #eaf5fd;

  --lm-green:         #50ba79;
  --lm-green-dark:    #3a9460;
  --lm-green-soft:    #f2fff9;

  --lm-gray-100:      #f7f8fa;
  --lm-gray-200:      #eef0f4;
  --lm-gray-300:      #dde1ea;
  --lm-gray-500:      #8b93a7;
  --lm-gray-700:      #4a5168;
  --lm-gray-900:      #1e2333;

  --lm-text:          #1e2333;
  --lm-text-muted:    #5a6278;
  --lm-border:        #dde1ea;
  --lm-radius:        10px;
  --lm-radius-lg:     14px;
}


main {
    overflow: unset !important;
}


/* ─────────────────────────────────────────
   BASE WRAPPER
───────────────────────────────────────── */
.learn-markup {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--lm-text);
}

.learn-markup p {
  margin-bottom: 1.1rem;
  color: var(--lm-gray-700);
}

.learn-markup h2 {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--lm-blue);
  margin-top: 2.75rem;
  margin-bottom: 0.5rem;
}

.learn-markup h2:first-child { margin-top: 0; }

.learn-markup h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--lm-gray-900);
  margin-top: 1.5rem;
  margin-bottom: 0.4rem;
}

.learn-markup .learn-section-lead {
  font-size: 1rem;
  color: var(--lm-text-muted);
  margin-bottom: 1.4rem;
  max-width: 700px;
}

/* ─────────────────────────────────────────
   PAGE HERO  (title + summary + stats)
   Rendered by the Blade template, not in body HTML.
   Documented here for reference only.
───────────────────────────────────────── */
.learn-hero {
  background: linear-gradient(135deg, var(--lm-blue) 0%, var(--lm-blue-mid) 100%);
  padding: 56px 0 48px;
}

.learn-hero__breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 0.82rem; }
.learn-hero__breadcrumb span { color: rgba(255,255,255,0.9); font-size: 0.82rem; }
.learn-hero__breadcrumb i { color: rgba(255,255,255,0.35); margin: 0 6px; font-size: 0.7rem; }

.learn-hero__badge {
  display: inline-block;
  background: var(--lm-green);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.learn-hero__title {
  color: #fff;
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 12px;
}

.learn-hero__summary {
  color: rgba(255,255,255,0.8);
  font-size: 1.05rem;
  max-width: 640px;
  margin-bottom: 0;
}

/* Stats row inside hero */
.learn-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.learn-hero__stat {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--lm-radius);
  padding: 16px 22px;
  flex: 1 1 160px;
}

.learn-hero__stat-value {
  display: block;
  font-size: 1.8rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: 4px;
}

.learn-hero__stat-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.4;
}

/* ─────────────────────────────────────────
   LAYOUT: two-column with sticky sidebar
   Rendered by the Blade template.
───────────────────────────────────────── */
.learn-sidebar {
  position: sticky;
  top: 24px;
}

/* TOC Card */
.learn-toc {
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
}

.learn-toc__header {
  background: var(--lm-blue);
  color: #fff;
  padding: 11px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.learn-toc__body { padding: 8px 0; }

.learn-toc__link {
  display: block;
  padding: 7px 16px;
  font-size: 0.83rem;
  color: var(--lm-gray-700);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.learn-toc__link:hover,
.learn-toc__link.active {
  background: var(--lm-blue-soft-2);
  border-left-color: var(--lm-green);
  color: var(--lm-blue);
}

/* CTA sidebar card */
.learn-sidebar-cta {
  background: var(--lm-green-soft);
  border: 1px solid #b8edcd;
  border-radius: var(--lm-radius-lg);
  padding: 22px 20px;
  text-align: center;
}

.learn-sidebar-cta h6 {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--lm-blue);
  margin-bottom: 8px;
}

.learn-sidebar-cta p {
  font-size: 0.82rem;
  color: var(--lm-text-muted);
  margin-bottom: 14px;
}

.learn-sidebar-cta .btn-demo {
  display: block;
  background: var(--lm-blue);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s;
}

.learn-sidebar-cta .btn-demo:hover { background: var(--lm-blue-dark); color: #fff; }


/* ─────────────────────────────────────────
   STAT BLOCK  (inline body use)
   Usage: <div class="learn-stat-block"> ... </div>
───────────────────────────────────────── */
.learn-stat-block {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 1.75rem 0;
}

.learn-stat {
  flex: 1 1 160px;
  background: var(--lm-blue-soft);
  border-radius: var(--lm-radius);
  padding: 20px 18px;
  text-align: center;
}

.learn-stat__value {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  color: var(--lm-blue);
  line-height: 1;
  margin-bottom: 6px;
}

.learn-stat__label {
  font-size: 0.82rem;
  color: var(--lm-text-muted);
  line-height: 1.4;
}


/* ─────────────────────────────────────────
   CARD GRID
   Usage: <div class="learn-card-grid"> <div class="learn-card"> ... </div> </div>
   Modifier: .learn-card-grid--2col
───────────────────────────────────────── */
.learn-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 14px;
  margin: 1.25rem 0 1.75rem;
}

.learn-card-grid--2col {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.learn-card {
  background: var(--lm-gray-100);
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  padding: 20px 18px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.learn-card:hover {
  border-color: #a8c4e8;
  box-shadow: 0 2px 12px rgba(32,66,131,0.07);
}

.learn-card--green {
  background: var(--lm-green-soft);
  border-color: #b8edcd;
}

.learn-card--primary {
  background: var(--lm-blue);
  border-color: var(--lm-blue);
  color: #fff;
}

.learn-card h5 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--lm-blue);
  margin-bottom: 6px;
}

.learn-card p {
  font-size: 0.85rem;
  color: var(--lm-text-muted);
  margin: 0;
  line-height: 1.55;
}

.learn-card--primary h5,
.learn-card--primary p { color: #fff; }
.learn-card--primary p { color: rgba(255,255,255,0.82); }

.learn-card__badge {
  display: inline-block;
  background: var(--lm-blue);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.learn-card--primary .learn-card__badge {
  background: rgba(255,255,255,0.2);
}


/* ─────────────────────────────────────────
   TICK LIST
   Usage: <ul class="learn-tick-list"> <li><div><strong>...</strong><span>...</span></div></li> </ul>
   Modifier: .learn-tick-list--compact (no description, tighter spacing)
───────────────────────────────────────── */
.learn-tick-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 1.75rem;
}

.learn-tick-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--lm-border);
}

.learn-tick-list li:first-child { padding-top: 0; }
.learn-tick-list li:last-child { border-bottom: none; padding-bottom: 0; }

.learn-tick-list li::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  background-image: url("https://autoresilience.ai/assets/front/imgs/tick.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

.learn-tick-list strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--lm-gray-900);
  margin-bottom: 3px;
}

.learn-tick-list span {
  font-size: 0.85rem;
  color: var(--lm-text-muted);
  line-height: 1.55;
}

/* Compact — title only, no description */
.learn-tick-list--compact li { padding: 10px 0; }
.learn-tick-list--compact strong { display: inline; margin-bottom: 0; }


/* ─────────────────────────────────────────
   COMPARE BLOCK
   Usage: <div class="learn-compare"> <div class="learn-compare__col"> ... </div> </div>
───────────────────────────────────────── */
.learn-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 1.25rem 0 1.75rem;
}

@media (max-width: 600px) { .learn-compare { grid-template-columns: 1fr; } }

.learn-compare__col {
  background: var(--lm-gray-100);
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius-lg);
  padding: 24px 22px;
}

.learn-compare__col--primary {
  background: var(--lm-blue);
  border-color: var(--lm-blue);
}

.learn-compare__col h5 {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--lm-blue);
  margin-bottom: 14px;
}

.learn-compare__col--primary h5 { color: #fff; }

.learn-compare__col .learn-tick-list { margin: 0; }
.learn-compare__col .learn-tick-list li { padding: 9px 0; }

.learn-compare__col--primary .learn-tick-list li { border-color: rgba(255,255,255,0.15); }
.learn-compare__col--primary .learn-tick-list li::before { filter: brightness(0) invert(1); }
.learn-compare__col--primary .learn-tick-list strong { color: #fff; }
.learn-compare__col--primary .learn-tick-list span { color: rgba(255,255,255,0.78); }


/* ─────────────────────────────────────────
   ROLES GRID
   Usage: <div class="learn-roles"> <div class="learn-role"> ... </div> </div>
───────────────────────────────────────── */
.learn-roles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0 32px;
  margin: 1.25rem 0 1.75rem;
}

.learn-role {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--lm-border);
}

.learn-role:last-child { border-bottom: none; }

.learn-role::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  background-image: url("https://autoresilience.ai/assets/front/imgs/tick.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

.learn-role__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--lm-green-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.learn-role h5 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--lm-blue);
  margin-bottom: 4px;
}

.learn-role p {
  font-size: 0.83rem;
  color: var(--lm-text-muted);
  margin: 0;
  line-height: 1.5;
}


/* ─────────────────────────────────────────
   CLOSING BLOCK
   Usage: <div class="learn-closing"> <p>...</p> </div>
───────────────────────────────────────── */
.learn-closing {
  background: var(--lm-blue-soft);
  border-left: 4px solid var(--lm-blue);
  border-radius: 0 var(--lm-radius) var(--lm-radius) 0;
  padding: 20px 24px;
  margin: 2rem 0;
}

.learn-closing p { color: var(--lm-gray-700); }
.learn-closing p:last-child { margin-bottom: 0; }


/* ─────────────────────────────────────────
   FAQ BLOCK
   Usage: <div class="learn-faq"> <div class="learn-faq__item"> ... </div> </div>
───────────────────────────────────────── */
.learn-faq { margin: 1.25rem 0 1.75rem; }

.learn-faq__item {
  border-bottom: 1px solid var(--lm-border);
  padding: 16px 0;
}

.learn-faq__item:first-child { padding-top: 0; }
.learn-faq__item:last-child { border-bottom: none; padding-bottom: 0; }

.learn-faq__item h6 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--lm-blue);
  margin-bottom: 5px;
}

.learn-faq__item p {
  font-size: 0.85rem;
  color: var(--lm-text-muted);
  margin: 0;
}


/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 576px) {
  .learn-stat-block,
  .learn-hero__stats { flex-direction: column; }
  .learn-card-grid  { grid-template-columns: 1fr; }
  .learn-roles      { grid-template-columns: 1fr; }
  .learn-hero       { padding: 40px 0 36px; }
}

/* TOC sub-item (h3) — indented */
.learn-toc__link--sub {
  padding-left: 28px;
  font-size: 0.78rem;
  color: var(--lm-gray-500);
}