/* =============================================================================
   Секция „Какво е L2H" — Figma 15:1875 (десктоп) и 15:2549 (мобилно).

   Десктоп: панел 1132 × 977, rgba(60,60,60,0.4), радиус 16, padding 32.
   Горен ред 1068 × 267, items-end, justify-between: лява колона 546
   (eyebrow ред 20 → 48px → текстов блок 199, вътре заглавие + 35px + бутони),
   дясна колона 435 × 162. Отдолу медия 1068 × 614.

   Медията е плейсхолдър и в самия дизайн (сив правоъгълник + play икона):
   реалната анонимизирана визия идва от дизайн екипа (вж. platform/TODO.md).
   ============================================================================= */
.whatis {
  padding-block: var(--space-16);
}

.whatis-inner {
  max-width: var(--container-narrow); /* 1132 (x=154) */
  margin: 0 auto;
  padding-inline: var(--space-4);
}

.whatis-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-8); /* дизайн: 32px */
  padding: var(--space-8); /* дизайн: 32px */
  background: color-mix(in srgb, var(--surface-panel) 40%, transparent);
  border-radius: var(--radius-panel);
}

.whatis-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
}

.whatis-text {
  display: flex;
  flex-direction: column;
  /* пролуките са различни: 48 от eyebrow до заглавието и 35 до бутоните,
     затова се носят от margin-а на заглавието, а не от общ gap */
  gap: 0;
  max-width: 34.125rem; /* 546px */
}

.whatis-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.4; /* caption-XL: 14/1.4 → ред 20px */
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold);
  text-shadow: var(--shadow-text);
}

.whatis-heading {
  margin: var(--space-12) 0 2.1875rem; /* дизайн: 48px отгоре, 35px до бутоните */
  max-width: 34.4375rem;  /* 551px (текстовият възел 15:1887) */
  font-family: var(--font-display);
  font-weight: 300;   /* Argent CF Light; placeholder-ът няма 300 — стойността е точната от дизайна */
  font-size: var(--text-4xl);
  line-height: 1.2;
  color: var(--color-white);
}

.whatis-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 360 + 173 = 533 в колона от 546 → пролуката е остатъкът, не фиксирана */
  gap: 0;
  width: 100%;
}

.whatis-actions .btn {
  height: 3rem; /* 48px (дизайн 15:1889 / 15:1897) */
  flex-shrink: 0;
}

.whatis-actions .btn-primary {
  width: 22.5rem;      /* 360px */
  font-weight: 500;    /* дизайн 15:1890: Jost Medium, не SemiBold */
  line-height: normal;
  letter-spacing: 0;   /* само вторичният бутон носи tracking */
}

.whatis-secondary {
  width: 10.8125rem; /* 173px (дизайн 15:1897) */
  background: var(--surface-action-dark);
  border: 2px solid transparent; /* дизайн: 2px прозрачен кант */
  color: var(--color-white);
}

.whatis-lead {
  margin: 0;
  width: 27.1875rem; /* 435px */
  flex-shrink: 0;
  font-size: var(--text-lg);
  font-weight: 400;  /* дизайн 15:1898: Jost Regular */
  line-height: 1.5;
  color: var(--color-white);
}

/* Медията: плейсхолдърът от самия дизайн — реалната визия идва отделно */
.whatis-media {
  position: relative;
  height: 38.375rem; /* 614px (дизайн 15:1899) */
  /* сивото на плейсхолдъра от дизайна, мапнато към най-близкия токен —
     временно, докато дойде реалната визия от доклада */
  background: var(--color-mock-gray); /* дизайн 15:1899 */
  border-radius: var(--radius-btn); /* дизайн: 14px, колкото бутоните */
  display: grid;
  place-items: center;
}

.whatis-play {
  display: block;
  position: relative;
  top: -0.5rem; /* дизайн 15:1900: иконата е 8px над центъра на медията */
}

/* --- Mobile (разумен пас, без Figma вариант) ------------------------------ */
@media (max-width: 64em) {
  .whatis-top {
    flex-direction: column;
    align-items: stretch;
  }

  .whatis-text,
  .whatis-lead {
    max-width: none;
  }

  .whatis-heading {
    font-size: var(--text-3xl);
  }

  .whatis-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .whatis-media {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}