/* Case study Good Politics — Figma 13776:8739 (секція Good Politics 13773:27659, сторінка Cases/Insights).
   Стоїть поверх шаблону css/case.css. Класи .cs- тут — нові блоки шаблону, які візьме наступний кейс:
     .cs-domains  рядки «хто читає» з назвою, підрізаною лінією роздільника (Row/Domain, Services §8)
     .cs-swap     таблиця «було → стало»: стара копія закреслена, нова поруч
     .cs-read     один екран сторінки з номерами поверх кадру й виносками під ним
   Класи .gp- — тільки цей кейс: шрифти й кольори клієнта, специмен «How it looks», телефони.
   Units: em on the site's fluid scale. Desktop: Figma px ÷ 16. Mobile (≤479) — 1em = 16px at 390, як у case.css. */

/* Шрифти клієнта для живого тексту в «було → стало» і «How it looks». Обидва — Google Fonts, OFL, латиниця.
   IBM Plex Sans — змінний файл, вага 400 і 500 з одного файлу. */
@font-face {
  font-family: "Prata";
  src: url("../fonts/Prata-Regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-latin-var.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

.case-page {
  --gp-red: #ac201b;      /* Signal Red */
  --gp-ink: #1f1f1e;      /* Ink */
  --gp-slate: #434341;    /* Slate */
  --gp-stone-aa: #747473; /* Stone #939392 дає 3,1 : 1 на білому — для 12 px затемнено до AA (4,6 : 1) */
  --gp-paper: #faf8f4;    /* Paper */
}

/* ============ Shared bits ============ */

.gp-section--120 { padding: 7.5em 0; }   /* 120: 04 і розділи «Page by page» */
.gp-head { gap: 2em; }                     /* eyebrow → 32 → headline row */
.gp-head__display { width: 13.125em; margin: 0; color: #fff; }   /* 840 / 64 */
.gp-ink { color: var(--cs-ink); }
.gp-note--dark { color: var(--cs-white-70); }

.gp-cover__media img { aspect-ratio: 1320 / 660; }

/* ============ 03 Who it had to convince — Row/Domain ============ */

.gp-readers { gap: 2.5em; }
.cs-domains { margin: 0; padding: 0; list-style: none; }
/* Рядок 76: індекс 19 + 8 + назва Head/1 (57,6) = 84,6 — нижні ~9 px назви ріже лінія роздільника. */
.cs-domain {
  display: grid; grid-template-columns: 23.125em 25em 16.875em; column-gap: 2.5em; align-items: center;
  height: 4.75em; overflow: hidden; border-bottom: 1px solid var(--cs-white-15);
}
.cs-domain__name { align-self: start; display: flex; flex-direction: column; gap: .5em; margin: 0; }
.cs-domain__word { font-family: var(--cs-rg); font-size: 4em; font-weight: 400; line-height: .9; letter-spacing: -.0234375em; color: rgba(255, 255, 255, .5); white-space: nowrap; }
.cs-domain__quote { max-width: 20em; margin: 0; font-size: 1.25em; font-weight: 300; line-height: 1.2; letter-spacing: -.025em; color: var(--cs-white-70); }
.cs-domain__answer { display: flex; flex-direction: column; gap: .25em; margin: 0; }
.cs-domain__label { font-size: .875em; font-weight: 300; line-height: 1.2; color: var(--cs-white-70); }
.cs-domain__value { font-size: 1em; font-weight: 400; line-height: 1.2; letter-spacing: -.0625em; color: #fff; }

/* ============ 04 What it says now — було → стало ============ */

.cs-swap { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cs-swap thead td, .cs-swap thead th { padding: 0 2.5em 1em 0; border-bottom: 1px solid var(--cs-gray-300); text-align: left; vertical-align: bottom; }
.cs-swap thead td { width: 15em; }                              /* 200 + 40 */
.cs-swap thead th:nth-child(2) { width: 27.5em; }                /* 400 + 40 */
.cs-swap thead th:last-child { padding-right: 0; }
.cs-swap tbody tr { border-bottom: 1px solid var(--cs-gray-300); }
.cs-swap tbody th, .cs-swap tbody td { padding: 3em 2.5em 3em 0; text-align: left; vertical-align: top; }
.cs-swap tbody td:last-child { padding-right: 0; }
/* Рядки в th мають власний font-size, тож відступи 48 / 40 рахуються в em самої клітинки. */
.cs-swap__place { font-weight: 400; }
.cs-swap__place > span { display: block; }
.cs-swap__name, .cs-swap__why { margin-top: .75em; font-size: 1em; font-weight: 400; line-height: 1.2; letter-spacing: -.0625em; color: var(--cs-ink); }
.cs-swap__why { color: var(--cs-gray-500); }
.cs-swap__before { font-size: 1.25em; font-weight: 300; line-height: 1.2; letter-spacing: -.025em; color: var(--cs-gray-500); }
.cs-swap tbody td.cs-swap__before { padding: 2.4em 2em 2.4em 0; }   /* 48 · 40 at 20 */
.cs-swap__before s { text-decoration-thickness: 1px; }
.cs-swap__after > * + * { margin-top: 1em; }

.gp-prata { margin: 0; font-family: "Prata", Georgia, serif; font-weight: 400; letter-spacing: 0; color: var(--gp-ink); }
.gp-prata--48 { font-size: 3em; line-height: 1.15; }
.gp-prata--40 { font-size: 2.5em; line-height: 1.15; }
.gp-prata--32 { font-size: 2em; line-height: 1.2; }
.gp-red { color: var(--gp-red); }
.gp-plex { margin: 0; font-family: "IBM Plex Sans", Arial, sans-serif; font-weight: 400; letter-spacing: 0; color: var(--gp-slate); }
.gp-plex--lead { font-size: 1em; line-height: 1.5; }

.gp-services { display: flex; flex-direction: column; gap: .75em; margin: 0; padding: 0; list-style: none; }
.gp-services li { display: flex; align-items: center; gap: 1.25em; }
.gp-services img { flex: none; width: 4.5em; height: 4.5em; object-fit: cover; }   /* 72 */
.gp-services .gp-prata--40 { font-size: 2.5em; }

.gp-facts { display: flex; flex-wrap: wrap; gap: .5em 2.5em; margin: 0; font-family: "IBM Plex Sans", Arial, sans-serif; }
.gp-facts div { display: flex; flex-direction: column; gap: .25em; }
.gp-facts dt { font-size: .75em; font-weight: 400; line-height: 1.4; color: var(--gp-stone-aa); }
.gp-facts dd { margin: 0; font-size: 1em; font-weight: 500; line-height: 1.4; color: var(--gp-ink); }

/* ============ 05 How it looks — шрифти й кольори клієнта ============ */

.gp-type { display: flex; flex-direction: column; gap: 1.25em; margin: 0; }
.gp-type__plate {
  display: flex; align-items: center; gap: 4em; min-height: 41.875em; box-sizing: border-box;
  padding: 4em; background: var(--gp-paper); color: var(--gp-ink);
}                                                                    /* 1320 × 670, padding 64 */
.gp-type__prata { display: flex; flex-direction: column; gap: .75em; width: 32.5em; }   /* 520 */
.gp-type__specimen { margin: 0; font-family: "Prata", Georgia, serif; font-size: 18.75em; font-weight: 400; line-height: 1; letter-spacing: -.02em; color: var(--gp-ink); }   /* 300 */
.gp-type__name { font-size: 2.5em; line-height: 1.2; }
.gp-type__name--plex { font-weight: 500; color: var(--gp-ink); }
.gp-type__plex { display: flex; flex-direction: column; gap: 2.5em; width: 38em; }   /* 608 */
.gp-type__plex-head { display: flex; flex-direction: column; gap: .5em; }
.gp-swatches { display: grid; grid-template-columns: repeat(3, 12em); gap: 1.5em 1em; margin: 0; padding: 0; list-style: none; font-family: "IBM Plex Sans", Arial, sans-serif; }
.gp-swatches li { display: flex; flex-direction: column; gap: .5em; }
.gp-swatch { display: block; height: 7.5em; background: var(--sw); }   /* 192 × 120 */
.gp-swatch--paper { border: 1px solid #e8e5de; box-sizing: border-box; }
.gp-swatch__name { font-size: .875em; font-weight: 500; line-height: 1.4; color: var(--gp-ink); }
.gp-swatch__hex { margin-top: -.5714em; font-size: .875em; font-weight: 400; line-height: 1.4; color: var(--gp-slate); }   /* name → 8 → hex */

/* ============ 06–09 Page by page — один екран, номери, виноски ============ */

.gp-chapter { gap: 7.5em; }   /* header → 120 → перший пункт */
.cs-reads { display: flex; flex-direction: column; gap: 7.5em; margin: 0; padding: 0; list-style: none; }
.cs-read { display: flex; flex-direction: column; gap: 2em; }
.cs-read__figure { display: flex; flex-direction: column; gap: 2em; margin: 0; }
.cs-read__frame { position: relative; }
.cs-read__frame img { display: block; width: 100%; height: auto; aspect-ratio: 1320 / 825; object-fit: cover; border: 1px solid var(--cs-gray-300); box-sizing: border-box; background: var(--cs-gray-100); }

/* Номер 36 px: коло ink/850, цифра Body/3 Upper білим. Позиція — центр кола у відсотках від кадру 1320 × 825.
   Радіус тут — форма знака, як кола-якорі на вайрфреймах Services §4, а не радіус UI. Білий обідок 2 px —
   щоб номер читався й на темних частинах скріна (футер, картка Result); у Figma його немає. */
.cs-pin {
  position: absolute; left: var(--x); top: var(--y);
  display: flex; align-items: center; justify-content: center;
  width: 2.5714em; height: 2.5714em; margin: -1.2857em 0 0 -1.2857em;   /* 36 / 14 */
  box-sizing: border-box; border: 2px solid #fff; border-radius: 50%; background: var(--cs-ink); color: #fff;
  font-family: Worksans, Arial, sans-serif; font-size: .875em; font-weight: 300; line-height: 1; letter-spacing: 0;
}
.cs-pin--static { position: static; flex: none; margin: 0; border: 0; }

.cs-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5em; margin: 0; padding: 0; list-style: none; }
.cs-notes li { display: flex; flex-direction: column; align-items: flex-start; gap: 1em; }

/* ============ 10 Mobile — три телефони з виносками ============ */

.gp-phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5em; margin: 0; padding: 0; list-style: none; }
.gp-phone { display: flex; flex-direction: column; gap: 1.5em; margin: 0; }
.gp-phone img { display: block; width: 19.5em; max-width: 100%; height: auto; aspect-ratio: 312 / 676; object-fit: cover; border: 1px solid var(--cs-gray-300); box-sizing: border-box; background: #fff; }   /* 312 × 676 */
.gp-phone figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 1em; }

/* ============ Mobile ≤ 479 ============ */

@media screen and (max-width: 479px) {
  .gp-section--120 { padding: 5em 0; }
  .gp-head { gap: 1.5em; }
  .gp-head__display { width: auto; }

  /* Три цифри обкладинки стосом: «with a strategist, booked from any page» у колонці 110 px ламалось на чотири рядки,
     а column-reverse при різній висоті підписів зсував числа з однієї лінії. */
  .cs-cover .cs-figures { flex-direction: column; align-items: center; gap: 1.5em; }

  /* Row/Domain: назву ріже власна лінія під нею, цитата й відповідь — нижче */
  .gp-readers { gap: 2em; }
  .cs-domain { display: flex; flex-direction: column; align-items: stretch; gap: 1em; height: auto; overflow: visible; padding-bottom: 2em; border-bottom: 0; }
  .cs-domain__name { height: 3.5em; overflow: hidden; border-bottom: 1px solid var(--cs-white-15); }   /* 19 + 8 + 36 → ріже ~7 */
  .cs-domain__name .cs-index { font-size: .875em; }
  .cs-domain__word { font-size: 2.5em; letter-spacing: -.0375em; }
  .cs-domain__quote { max-width: none; font-size: 1em; line-height: 1.4; letter-spacing: -.03125em; }
  .cs-domain__label { font-size: .75em; font-weight: 400; }
  .cs-domain__value { font-size: .875em; letter-spacing: -.0357em; line-height: 1.4; }

  /* Було → стало: рядки стосом; підпис «Before / After» над кожною клітинкою з data-label */
  .cs-swap, .cs-swap tbody, .cs-swap tr, .cs-swap th, .cs-swap td { display: block; width: auto; }
  .cs-swap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .cs-swap tbody tr { padding: 2em 0; border-top: 1px solid var(--cs-gray-300); border-bottom: 0; }
  .cs-swap tbody tr:last-child { border-bottom: 1px solid var(--cs-gray-300); }
  .cs-swap tbody th, .cs-swap tbody td, .cs-swap tbody td.cs-swap__before { padding: 0; }
  .cs-swap tbody td { margin-top: 1.5em; }
  .cs-swap td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .75em; font-size: .75rem; font-weight: 400; line-height: 1.2; letter-spacing: 0; text-transform: uppercase; color: var(--cs-gray-500); }
  .cs-swap td.cs-swap__before[data-label]::before { font-size: .6em; }   /* 12 at 20 */
  .cs-swap__name, .cs-swap__why { font-size: .875em; letter-spacing: -.0357em; line-height: 1.4; }
  .cs-swap__before { font-size: 1em; line-height: 1.4; letter-spacing: -.03125em; }
  .gp-prata--48 { font-size: 1.75em; }   /* 28 */
  .gp-prata--40, .gp-services .gp-prata--40 { font-size: 1.5em; }   /* 24 */
  .gp-prata--32 { font-size: 1.375em; }   /* 22 */
  .gp-plex--lead { font-size: .875em; }
  .gp-services { gap: .5em; }
  .gp-services li { gap: 1em; }
  .gp-services img { width: 3em; height: 3em; }   /* 48 */
  .gp-facts { gap: .75em 1.5em; }

  /* Специмен: стосом */
  .gp-type__plate { flex-direction: column; align-items: stretch; gap: 2.5em; min-height: 0; padding: 1.5em; }
  .gp-type__prata, .gp-type__plex { width: auto; }
  .gp-type__specimen { font-size: 10em; }   /* 160 */
  .gp-type__name { font-size: 1.75em; }
  .gp-type__plex { gap: 2em; }
  .gp-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em .75em; }
  .gp-swatch { height: 4em; }
  .gp-swatch__name, .gp-swatch__hex { font-size: .75em; }
  .gp-swatch__hex { margin-top: -.6667em; }

  /* Екрани: номери 24 px, виноски рядками «номер — текст» */
  .gp-chapter, .cs-reads { gap: 4em; }
  .cs-read { gap: 1.25em; }
  .cs-read__figure { gap: 1.5em; }
  /* Номер 18 px. На десктопі центр номера стоїть ≈ 18 px правіше за кінець елемента (1,36 % кадру); на 358 кадр
     у 3,7 раза менший, тож номер ставиться лівим краєм туди, де кінчається елемент, а не центром — інакше він
     закриває слово, на яке вказує. */
  .cs-pin { left: calc(var(--x) - 1.3636% + 1px); width: 2em; height: 2em; margin: -1em 0 0; font-size: .5625em; font-weight: 400; border-width: 1px; }   /* 18 / 9 */
  .cs-pin--static { width: 2em; height: 2em; margin: 0; font-size: .75em; }   /* 24 / 12 */
  .cs-notes { grid-template-columns: minmax(0, 1fr); gap: 1em; }
  .cs-notes li { flex-direction: row; gap: .75em; }

  /* Телефони: стрічка, що зрізається краєм екрана */
  .gp-phones {
    display: flex; gap: 1em; margin-inline: -1em; padding: 0 1em;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1em; scrollbar-width: none;
  }
  .gp-phones::-webkit-scrollbar { display: none; }
  .gp-phones > li { flex: none; width: 13.75em; scroll-snap-align: start; }   /* 220 */
  .gp-phone { gap: 1em; }
  .gp-phone img { width: 100%; }
  .gp-phone figcaption { flex-direction: row; gap: .75em; }
}