/* DrMaco — use-cases.html page styles.
   Persona switcher (large cards), split rows with photo/render art,
   a numbered "why" grid, and the shared faq-layout two-column pattern. */

/* Photos (lifestyle desk shots) render full-bleed — no edge-fade mask.
   Renders (glass shield / glass sphere) keep the inherited .media mask. */
.media--photo img { mask-image: none; -webkit-mask-image: none; }

/* Hero CTA row: buttons have white-space:nowrap + default flex-shrink:1,
   so the flex row shrinks them instead of wrapping on narrow screens,
   spilling nowrap text past the viewport. Force wrap-not-shrink. */
.page-hero__row .btn { flex-shrink: 0; }
@media (max-width: 420px) {
  .page-hero__row { flex-direction: column; align-items: stretch; }
  .page-hero__row .btn { width: 100%; }
}

/* ---------------------------------------------------------------------
   Persona switcher
   --------------------------------------------------------------------- */
.personas-section { position: relative; }

.persona-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: clamp(36px, 5vw, 56px);
}
@media (max-width: 900px) {
  .persona-tabs { grid-auto-columns: minmax(168px, 1fr); grid-template-columns: none; grid-auto-flow: column; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .persona-tabs::-webkit-scrollbar { display: none; }
}

.persona-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  padding: 20px 18px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s var(--ease-out), background 0.25s ease;
}
.persona-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--hairline-2); }
.persona-card .tile { margin-bottom: 2px; }
.persona-card__name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); }
.persona-card__hook { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }

.persona-card.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow-sm);
}
.persona-card.is-active .persona-card__hook { color: var(--accent-ink); }

/* Panels: only the active persona renders */
.feat-panel { display: none; }
.feat-panel.is-active { display: block; animation: uc-fade-up 0.5s var(--ease-out) both; }
@keyframes uc-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.feat-panel .split { margin-bottom: 0; }
.feat-panel .grid--3 { margin-top: 0; }

/* Redefine flow--between locally (home.css scopes the original to index.html) */
.flow--between { position: relative; display: block; height: clamp(64px, 8vw, 130px); width: min(100%, 900px); margin: 4px auto -4px; color: var(--ink-4); opacity: 0.8; }
@media (max-width: 900px) { .flow--between { display: none; } }

/* ---------------------------------------------------------------------
   Why grid — bez licznika CSS: tytuly kart same zawieraja numeracje
   ("1. ", "2. " ...) w kazdym z 7 jezykow, wiec chip 01/02 dublowal ja.
   --------------------------------------------------------------------- */
.why-grid .card__body { display: grid; gap: 8px; align-content: start; }

/* ---------------------------------------------------------------------
   FAQ two-column layout (shared pattern, page-scoped per brief)
   --------------------------------------------------------------------- */
.faq-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq-layout__head { position: sticky; top: 120px; }
/* Kolumna naglowka ma ok. 419px przy 1440px, a display--sm ma 62px — dlugie
   zlozenia (PL "Zaawansowanych", ES "Desarrolladores", RU "Пользователей")
   wychodzily poza kolumne na liste FAQ. Mniejszy stopien + dzielenie wyrazow. */
.faq-layout__head .display { font-size: clamp(30px, 3.1vw, 44px); hyphens: auto; }
@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-layout__head { position: static; }
}

/* Grid items with long titles can force the 1fr track wider than
   available space (grid auto min-size = max-content unless told
   otherwise). Let cards shrink so text wraps within the column. */
.personas-section .grid > .card,
#why .grid > .card {
  min-width: 0;
}