/* ==========================================================================
   CrysMed — "Learn. Certify. Grow." section — full redesign 2026-09-09
   Ditto copy of a client-shared design: a real 3-tab interface (Featured
   Courses / CME Programmes / Learning Summary), one tab bar + one panel
   area with only one panel visible at a time — same click-to-swap
   mechanics as "More ways we support you" (support-tabs.js), not 3
   permanent stacked sections. Every number/title/stat is static content,
   per the client's own instruction (pure visual copy, no live data wiring).
   index.html only. Replaces the previous lrn-* hero+grid layout entirely.
   ========================================================================== */

.ltab-tabs { margin-top: var(--sp-2); }

.ltab-tabs__bar {
  display: flex;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-5);
  overflow-x: auto;
  scrollbar-width: none;
}
.ltab-tabs__bar::-webkit-scrollbar { display: none; }

.ltab-tabs__tab {
  flex: 0 0 auto;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink-500);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.ltab-tabs__tab:hover { color: var(--ink-900); }
.ltab-tabs__tab.is-active { color: var(--brand-700); border-bottom-color: var(--brand-700); }

/* ---- Panel shell: [copy column / media column] on top, full-width stats
   strip below both — NOT inside the copy column. The media column has no
   fixed height: grid's default stretch makes it exactly match the copy
   column's real content height per tab, which is why the photo is taller
   on the Learning Summary tab (more copy content) than on the other two —
   matches the client's design exactly, not a fixed crop. */
.ltab-tabs__panel { display: none; }
.ltab-tabs__panel.is-active { display: block; }

.ltab-panel-top {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--sp-6);
  margin-bottom: var(--sp-5);
}
/* Learning Summary only: a real 3-visual-column row (category tiles |
   upcoming-learning box | photo) — confirmed directly against
   new-designs/Featured Courses/Featured Courses.jpeg at full resolution
   (2026-09-09). Built as 2 GRID columns — [left-group] [media] — where
   left-group is its own nested 2-column grid (copy, upcoming).
   left-group opts OUT of stretch (align-items:start): the upcoming box
   hugs its own 4 list rows instead of being force-expanded to match the
   copy column — stretching it (tried earlier) just moved the same dead
   space inside the tan card instead of removing it. The OUTER row keeps
   default stretch, so the photo matches left-group's real height (driven
   by copy, its tallest cell) instead of an independent fixed number —
   client confirmed (2026-09-09) the photo should shrink to that height,
   not the other way around. The upcoming box itself is bottom-aligned
   within its cell (align-self:end) instead of a hardcoded top margin, so
   its bottom lines up with copy's/the photo's shared bottom edge and
   self-adjusts if the list's real content ever changes height. */
.ltab-panel-top--summary { grid-template-columns: 2fr 1.1fr; }
.ltab-left-group { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; }
[data-learning-panel="summary"] .ltab-upcoming { align-self: end; }
[data-learning-panel="summary"] .ltab-media { min-height: 0; }

.ltab-eyebrow {
  display: inline-flex;
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-700);
  background: var(--brand-tint);
  padding: 4px 12px;
  border-radius: var(--r-full);
  margin-bottom: var(--sp-3);
}
.ltab-copy h3 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
  margin: 0 0 var(--sp-3);
}
.ltab-copy h3 em { display: block; font-style: normal; color: var(--brand-700); }
.ltab-copy > p { font-size: var(--fs-sm); color: var(--ink-500); line-height: var(--lh-relaxed); max-width: 52ch; margin-bottom: var(--sp-5); }

/* ---- Two feature/course cards ---- */
.ltab-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.ltab-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
}
.ltab-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.ltab-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  background: var(--brand-tint);
  color: var(--brand-700);
  flex-shrink: 0;
}
.ltab-card__icon svg { width: 19px; height: 19px; }
.ltab-card__tag {
  font-size: .625rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-700);
  background: var(--brand-tint);
  padding: 3px 9px;
  border-radius: var(--r-full);
}
.ltab-card b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-900); line-height: var(--lh-snug); margin-bottom: var(--sp-3); }
.ltab-card__meta { display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--sp-4); flex: 1; }
.ltab-card__meta span { display: flex; align-items: center; gap: 7px; font-size: .75rem; color: var(--ink-700); }
.ltab-card__meta svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--ink-500); }
.ltab-card__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--brand-700);
  color: var(--brand-700);
  background: var(--white);
  font-size: .75rem;
  font-weight: var(--fw-bold);
  padding: .5rem var(--sp-4);
  border-radius: var(--r-full);
  text-decoration: none;
  margin-top: auto;
}
.ltab-card__cta:hover { background: var(--brand-tint); }

.ltab-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-full);
  text-decoration: none;
  border: 1px solid transparent;
}
.ltab-btn--solid { background: var(--brand-700); color: var(--white); }
.ltab-btn--solid:hover { background: var(--brand-900); }
.ltab-btn--outline { background: var(--white); color: var(--brand-700); border-color: var(--brand-700); }
.ltab-btn--outline:hover { background: var(--brand-tint); }

/* ---- 4-item stat/feature strip — full width, own content per tab ---- */
.ltab-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.ltab-stats__item { display: flex; align-items: center; gap: var(--sp-3); }
.ltab-stats__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--white);
  color: var(--brand-700);
  flex-shrink: 0;
}
.ltab-stats__icon svg { width: 19px; height: 19px; }
.ltab-stats__item span { font-size: .75rem; font-weight: var(--fw-semibold); color: var(--ink-900); line-height: 1.25; }

/* ---- Right column: photo + floating info card. No fixed height — fills
   whatever height the grid row (i.e. the copy column) actually is. ---- */
.ltab-media { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 260px; }
.ltab-media__photo { width: 100%; height: 100%; object-fit: cover; display: block; }

.ltab-float {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 200px;
  padding: var(--sp-4);
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
}
/* Gold accent — matches the client design exactly; --accent-500/700 are this
   project's blue tokens (confusing name), not gold. --ref-gold-500 is the
   real "featured" gold token, already used for the Featured Offer badges
   elsewhere on this page. inline-block so the underline hugs the title text
   width, not the full card width. */
.ltab-float b { display: inline-block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-900); padding-bottom: var(--sp-2); border-bottom: 2px solid var(--ref-gold-500); margin-bottom: var(--sp-3); }
.ltab-float ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.ltab-float li { display: flex; align-items: center; gap: var(--sp-2); font-size: .75rem; color: var(--ink-700); }
.ltab-float li svg { width: 16px; height: 16px; color: var(--ref-gold-500); flex-shrink: 0; }
/* Learning Summary only: floating card sits at the photo's bottom-right,
   not top-right like the other two tabs' cards. */
.ltab-float--bottom { top: auto; bottom: var(--sp-4); }

/* ---- Panel 3 only: category tiles ----
   Learning Summary's copy column measured 139px taller than Featured
   Courses/CME (505.8px) with identical outer spacing (eyebrow/h3/p) —
   project lead flagged the resulting photo/panel height as too tall
   (2026-09-09). Tightened only this panel's own internal spacing (tile
   padding, upcoming-list row height, inter-block margins) to bring it back
   in line — same content, same item counts, nothing removed. */
.ltab-categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-2); }
.ltab-category {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: .75rem;
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
  line-height: 1.2;
}
.ltab-category svg { width: 18px; height: 18px; color: var(--brand-700); flex-shrink: 0; }

/* ---- Panel 3 only: tinted "Upcoming learning" list ---- */
.ltab-upcoming {
  background: #ffe7c7;
  border: 1px solid #f3d3a0;
  border-radius: var(--r-lg);
  padding: var(--sp-3);
}
.ltab-upcoming__head { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-900); margin-bottom: var(--sp-1); }
.ltab-upcoming__head svg { width: 16px; height: 16px; color: var(--cta-orange, var(--danger)); }
.ltab-upcoming ul { display: flex; flex-direction: column; }
.ltab-upcoming li { display: flex; align-items: center; gap: var(--sp-3); padding-block: 3px; border-bottom: 1px solid #f3d3a0; }
.ltab-upcoming li:last-child { border-bottom: none; }
.ltab-upcoming__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--white);
  color: var(--cta-orange, var(--danger));
  flex-shrink: 0;
}
.ltab-upcoming__icon svg { width: 12px; height: 12px; }
.ltab-upcoming__title { flex: 1; min-width: 0; font-size: .8125rem; font-weight: var(--fw-medium); color: var(--ink-900); }
.ltab-upcoming__date { font-size: .75rem; color: var(--ink-700); white-space: nowrap; }

.ltab-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
/* This panel's copy column is a real 1/3-width grid column now (3-column
   layout), narrower than tabs 1/2's ~58% column — the two buttons need
   tighter padding/font to sit side by side like the reference, instead of
   wrapping to their own lines. Scoped so tabs 1/2's buttons are untouched. */
[data-learning-panel="summary"] .ltab-actions .ltab-btn { padding: .625rem var(--sp-3); font-size: .8125rem; }

/* Panel 3's own eyebrow/heading/subtitle sit closer together too — scoped so
   Featured Courses/CME (which already measured correct) are untouched. */
[data-learning-panel="summary"] .ltab-eyebrow { margin-bottom: var(--sp-2); }
[data-learning-panel="summary"] .ltab-copy h3 { margin-bottom: var(--sp-2); }
[data-learning-panel="summary"] .ltab-copy > p { margin-bottom: var(--sp-3); }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .ltab-panel-top, .ltab-panel-top--summary { grid-template-columns: minmax(0, 1fr); }
  .ltab-left-group { grid-template-columns: minmax(0, 1fr); }
  .ltab-media, [data-learning-panel="summary"] .ltab-media { order: -1; min-height: 0; height: 280px; }
}
@media (max-width: 640px) {
  .ltab-copy h3 { font-size: var(--fs-xl); }
  .ltab-cards { grid-template-columns: minmax(0, 1fr); }
  .ltab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ltab-categories { grid-template-columns: minmax(0, 1fr); }
  .ltab-float { position: static; width: 100%; margin-top: var(--sp-3); }
}