/* sections/course_assistant.php — „Dedykowany opiekun maturalny".
   Tło białe (.m-sec), bez slaba — sekcja domyka landing zaraz po
   course_teacher i ma być spokojna; jedynym kolorowym polem jest ciepły panel
   z checklistą. Chrom (typografia .text-*, podkreślenie .hl-underline, marker
   listy .list-check, placeholder .ph, kontener .container-ms) pochodzi
   z design-system.css — tu tylko rytm sekcji, portret z plakietkami, panel,
   CTA telefoniczne i reveal.

   Jeden DOM, trzy zakresy (mobile-first):
     <576px   jedna kolumna, portret pełnej szerokości
     576px+   portret ograniczony do 380px i wyśrodkowany — bez tego limitu
              kadr 3:4 puchnie do ~700×930px na tablecie (kontener .container-ms
              ma 1320px, referencja zakładała 1200px i tylko próg 1024px)
     1024px+  wariant desktop: portret w lewej kolumnie (340–460px) rozciągnięty
              na wysokość treści, nagłówek i treść po prawej */
.ca { padding: 32px 0 48px; }
@media (min-width: 1024px) { .ca { padding: 56px 0 80px; } }

.ca-wrap { display: grid; gap: var(--ds-space-5); }

/* ── Nagłówek ────────────────────────────────────────────────────────────
   Jedno wyróżnienie: rysowane podkreślenie .hl-underline z DS. */
.ca-head { display: flex; flex-direction: column; gap: 8px; }

/* .text-eyebrow ustawia kolor na --ds-color-ink; nad tym nagłówkiem ma być
   granatowy odcień marki (tak jak w sąsiednich sekcjach landingu). Dwie klasy
   w selektorze biją pojedyncze .text-eyebrow. */
.ca-eyebrow.ca-eyebrow { display: block; color: var(--ds-color-primary-ink); }

.ca-title { margin: 0; color: var(--ds-color-ink); text-wrap: pretty; }

/* ── Portret ─────────────────────────────────────────────────────────────
   Kadr 3:4 wymuszony na obrazie, więc wysokość jest znana przed pobraniem
   pliku (CLS). Plakietki leżą na zdjęciu — półprzezroczysta biel + blur. */
/* `width: 100%` jest tu konieczne, nie ozdobne: w zakresie tabletowym figura
   dostaje `margin-inline: auto`, co wyłącza rozciąganie elementu siatki i każe
   mu liczyć szerokość z zawartości. Leniwy obraz przed pobraniem nie ma
   szerokości własnej, więc bez tej deklaracji cały kadr zapada się do 0×0
   i portret znika do czasu załadowania pliku. */
.ca-media { position: relative; margin: 0; width: 100%; }
.ca-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  height: auto;
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-lg);
}
.ca-media picture { display: block; }

.ca-avail {
  position: absolute;
  left: var(--ds-space-3);
  top: var(--ds-space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 6px 11px 6px 13px;
  border-radius: var(--ds-radius-full);
  background-color: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ds-color-ink);
  white-space: nowrap;
}
/* Kropka dostępności: statyczny punkt + rozchodzący się pierścień w ::before.
   Animujemy wyłącznie transform/opacity (CLAUDE.md → „Stabilność", pkt 2). */
.ca-pulse {
  position: relative;
  display: block;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-color-success);
}
.ca-pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-color-success);
  animation: ca-ring 1.9s var(--ds-ease-out-soft) infinite;
}
@keyframes ca-ring {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

.ca-plate {
  position: absolute;
  left: var(--ds-space-3);
  right: var(--ds-space-3);
  bottom: var(--ds-space-3);
  margin: 0;
  padding: var(--ds-space-3) 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: var(--ds-radius-lg);
  background-color: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ca-plate-name { color: var(--ds-color-ink); }
.ca-plate-role { color: var(--ds-color-ink-secondary); }

/* ── Treść ───────────────────────────────────────────────────────────── */
.ca-body { display: flex; flex-direction: column; gap: var(--ds-space-5); }
.ca-lead { margin: 0; color: var(--ds-color-ink); text-wrap: pretty; }
.ca-text { margin: 0; color: var(--ds-color-ink-secondary); text-wrap: pretty; }

.ca-panel {
  padding: var(--ds-space-4);
  border-radius: var(--ds-radius-lg);
  background-color: var(--ds-color-canvas-warm);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
}
.ca-panel-label { margin: 0; color: var(--ds-color-ink); }
.ca-list { margin: 0; display: flex; flex-direction: column; gap: var(--ds-space-3); }
.ca-item { color: var(--ds-color-ink-secondary); }

.ca-sign { margin: 0; color: var(--ds-color-ink); }
.ca-sign-img { display: block; height: auto; max-width: 240px; }

.ca-rule { margin: 0; border: 0; height: 1px; background-color: var(--ds-color-hairline); opacity: 1; }

/* ── CTA telefoniczne ────────────────────────────────────────────────────
   Karta-link, nie przycisk Solar: na tym ekranie mocne CTA niesie sticky bar,
   a tu ma zostać spokojne „możesz po prostu zadzwonić". Numer nigdy się nie
   łamie, strzałka idzie tuż za nim. */
.ca-cta {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  min-height: 56px;
  padding: 14px var(--ds-space-4);
  /* Na mobile kafel „Masz pytania?" idzie na pełną szerokość kolumny — to
     ostatni element sekcji i jedyny klikalny, więc nie ma powodu, żeby stał
     w połowie wiersza. Od 1024px wraca do szerokości treści. */
  align-self: stretch;
  max-width: 100%;
  background-color: var(--ds-color-surface);
  /* 1px, nie 1.5px — połówka piksela renderuje się nierówno na 2×/3×
     (CLAUDE.md, reguła 18). */
  border: 1px solid var(--ds-color-hairline);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-sm);
  color: var(--ds-color-ink);
  text-decoration: none;
  transition:
    transform var(--ds-duration-base) var(--ds-ease-out-soft),
    box-shadow var(--ds-duration-base) var(--ds-ease-out-soft);
}
.ca-cta:hover { transform: var(--ds-hover-lift); box-shadow: var(--ds-shadow-md); color: var(--ds-color-ink); }
.ca-cta:active { transform: scale(var(--ds-press-scale)); box-shadow: var(--ds-shadow-xs); }
.ca-cta:focus-visible { outline: 2px solid var(--ds-color-primary); outline-offset: 3px; }

.ca-cta-icon {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--ds-radius-sm);
  background-color: var(--ds-color-primary-tint);
  color: var(--ds-color-primary-ink);
  box-shadow: inset 0 0 0 1px rgba(10, 92, 245, 0.12);
}
.ca-cta-icon svg { width: 20px; height: 20px; }

.ca-cta-text { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; min-width: 0; }
.ca-cta-kicker { color: var(--ds-color-ink-muted); }
.ca-cta-main { display: inline-flex; align-items: center; gap: 7px; }
.ca-cta-number {
  color: var(--ds-color-primary-ink);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ds-color-primary-line);
}
.ca-cta-arrow {
  display: inline-flex;
  flex: none;
  color: var(--ds-color-primary);
  transition: transform var(--ds-duration-link) var(--ds-ease-out-soft);
}
.ca-cta-arrow svg { width: 17px; height: 17px; }
.ca-cta:hover .ca-cta-arrow { transform: translateX(4px); }

/* ── Tablet ─────────────────────────────────────────────────────────────
   Nadal jedna kolumna, ale kolumna przestaje puchnąć razem z kontenerem:
   bez tego limitu przy 768px wiersz leadu ma ~80 znaków, a kadr 3:4 rośnie
   do ~700px szerokości. Portret dodatkowo wyśrodkowany. */
@media (min-width: 576px) and (max-width: 1023.98px) {
  /* Treść sekcji trzyma szerokość .container-ms, jak reszta landingu — własnego
     limitu 640px już tu nie ma. Ograniczony zostaje sam portret: kadr 3:4
     rozciągnięty na całą szerokość tabletu miałby ~700px wysokości i wypchnął
     treść pod ekran. */
  .ca-media { max-width: 380px; margin-inline: auto; }
}

/* ── Desktop ────────────────────────────────────────────────────────────
   Portret w lewej kolumnie na wysokość obu wierszy, nagłówek i treść
   po prawej. */
@media (min-width: 1024px) {
  .ca-wrap {
    grid-template-columns: minmax(340px, 460px) 1fr;
    column-gap: 72px;
    row-gap: 22px;
    align-items: start;
  }
  .ca-media { grid-column: 1; grid-row: 1 / span 2; max-width: none; margin-inline: 0; }
  .ca-head  { grid-column: 2; grid-row: 1; max-width: 520px; }
  .ca-cta   { align-self: flex-start; }
  .ca-body  { grid-column: 2; grid-row: 2; gap: var(--ds-space-6); }

  .ca-lead { max-width: 58ch; }
  .ca-text { max-width: 62ch; }
  .ca-panel { padding: var(--ds-space-6) 26px; gap: var(--ds-space-4); }
  .ca-list { gap: var(--ds-space-4); }
  .ca-item { font-size: 16px; line-height: 1.6; }

  .ca-avail { left: var(--ds-space-4); top: var(--ds-space-4); }
  .ca-plate { left: var(--ds-space-4); right: var(--ds-space-4); bottom: var(--ds-space-4); padding: var(--ds-space-4) 18px; }
  .ca-plate-name { font-size: 18px; }
  .ca-plate-role { font-size: 15px; }
}

/* ── Reveal ──────────────────────────────────────────────────────────────
   Klasę .ca-reveal dopina JS (assets/js/course_assistant.js) — bez JS treść
   jest po prostu widoczna. Animujemy wyłącznie opacity i transform, czasy
   i krzywa z tokenów DS; stagger przez --i. */
.ca-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--ds-duration-slow) var(--ds-ease-out-soft),
    transform var(--ds-duration-slow) var(--ds-ease-out-soft);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.ca-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ca-reveal { opacity: 1; transform: none; transition: none; }
  .ca-pulse::before { animation: none; opacity: 0; }
  .ca-cta, .ca-cta-arrow { transition: none; }
}