/* 📣 «Медіа та партнерам» (pages/press.html) — прес-кіт поверх editorial.css (.ab-*), власний префікс .pr-*.
   Кольори інтерфейсу — лише токени --color-*. Виняток: плитки логотипів мають ФІКСОВАНІ фони бренду
   (кремовий / какао / теракотовий / білий) — щоб показати, як знак виглядає на світлому й темному
   незалежно від теми сайту. Значення — з самих файлів логотипа (img/logo/*.svg). */

.pr {
  --pr-cream: #F6EDDF;
  --pr-cocoa: #3B2924;
  --pr-terra: #C85F3D;
}

/* ════════ Липкий зміст прес-кіту ════════ */
.pr-nav { position: sticky; top: var(--header-height, 70px); z-index: 5; background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); }
.pr-toc { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 10px 2px; margin: 0; list-style: none; overscroll-behavior-x: contain; }
.pr-toc::-webkit-scrollbar { display: none; }
.pr-chip { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); font-size: .88rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color .15s var(--ab-ease), color .15s var(--ab-ease); }
.pr-chip:hover { border-color: var(--color-accent); color: var(--ab-ink); }
/* якорі не ховаються під шапкою + липким змістом */
.pr [id] { scroll-margin-top: calc(var(--header-height, 70px) + 72px); }
.pr .ab-stats__note b { color: #fff; font-weight: 600; }

/* ════════ Хто ми: текст + довідка ════════ */
.pr-about { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 6vw, 72px); align-items: start; }
.pr-prose p { margin: 0 0 18px; font-size: 1.06rem; line-height: 1.75; color: var(--color-text-muted); }
.pr-prose p:first-child { font-size: 1.16rem; color: var(--color-text); }
.pr-prose strong { color: var(--color-text); }
.pr-sheet { margin: 0; padding: 26px; border-radius: 24px; background: var(--color-surface); border: 1px solid var(--color-border); display: grid; gap: 0; }
.pr-sheet__t { margin: 0 0 6px; font-family: var(--font-heading); font-size: 1.15rem; color: var(--color-text); }
.pr-sheet dl { margin: 0; }
.pr-sheet dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--color-border); }
.pr-sheet dl > div:first-child { border-top: 0; }
.pr-sheet dt { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); padding-top: 2px; }
.pr-sheet dd { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--color-text); }
.pr-sheet dd a { color: var(--ab-ink); font-weight: 700; text-decoration: none; }
.pr-sheet dd a:hover { text-decoration: underline; }

/* ════════ Місія — велика цитата ════════ */
.pr-mission { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 5vw, 64px); align-items: center; }
.pr-mission blockquote { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.35rem, 3.2vw, 2.15rem); line-height: 1.25; letter-spacing: -.01em; color: var(--color-text); text-wrap: balance; }
.pr-mission blockquote::before { content: "“"; display: block; font-size: 2.6em; line-height: .6; color: var(--color-accent); margin-bottom: 10px; }
.pr-mission figcaption { margin-top: 16px; font-size: .95rem; color: var(--color-text-muted); }
.pr-mission img { width: 150px; height: auto; aspect-ratio: 625 / 900; }
.pr-values { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pr-values li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--color-surface); border: 1px solid var(--color-border); font-size: .92rem; font-weight: 600; color: var(--color-text); }

/* ════════ Готовий опис і посилання (копіювати) ════════ */
.pr-copies { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 18px; align-items: stretch; }
.pr-copies--link { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pr-copy { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 24px; border-radius: 22px; background: var(--color-surface); border: 1px solid var(--color-border); }
.pr-copy__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pr-copy__lbl { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ab-ink); }
.pr-copy__len { font-size: .78rem; color: var(--color-text-muted); white-space: nowrap; }
.pr-copy__txt { flex: 1; margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--color-text); white-space: pre-wrap; word-break: break-word; }
.pr-copy--lead .pr-copy__txt { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.35; }
#lnk-html { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem; }
.pk-copybtn { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-height: 42px; min-width: 140px; padding: 9px 18px; border: none; border-radius: 12px;
  background: var(--color-accent); color: var(--color-on-accent); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; transition: background .15s var(--ab-ease), transform .15s var(--ab-ease); }
.pk-copybtn:hover { background: var(--color-accent-hover, var(--color-accent)); }
.pk-copybtn:active { transform: scale(.97); }
.pr-sub-h { margin: clamp(36px, 5vw, 56px) 0 8px; font-family: var(--font-heading); font-size: clamp(1.2rem, 2.6vw, 1.5rem); color: var(--color-text); }
.pr-sub-p { margin: 0 0 20px; max-width: 62ch; color: var(--color-text-muted); line-height: 1.6; }

/* ════════ Айдентика: логотипи на світлому/темному, кольори, котик ════════ */
.pr-assets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pr-asset { display: flex; flex-direction: column; min-width: 0; border-radius: 22px; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); }
.pr-asset--wide { grid-column: span 2; }
.pr-asset__art { position: relative; display: grid; place-items: center; height: 180px; padding: 26px; background: var(--pr-cream); }
.pr-asset__art img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.pr-asset__art--lockup img { width: 78%; }
.pr-asset__art--mark img { width: 110px; height: 110px; }
.pr-asset__art--white { background: #fff; }
.pr-asset__art--dark { background: var(--pr-cocoa); }
.pr-asset__art--terra { background: var(--pr-terra); }
.pr-asset__art--cover { padding: 0; }
.pr-asset__art--cover img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.pr-asset__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 14px 16px; }
.pr-asset__meta b { font-size: .92rem; color: var(--color-text); }
.pr-asset__meta small { display: block; font-size: .78rem; color: var(--color-text-muted); font-weight: 400; margin-top: 2px; }
.pr-dls { display: flex; gap: 6px; }
.pk-dl { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--color-border); font-size: .8rem; color: var(--ab-ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
.pk-dl:hover { border-color: var(--color-accent); }
/* котики: вертикальні 625×900 — пропорції зберігаємо */
.pr-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pr-cat { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 12px 14px; border-radius: 20px; background: var(--pr-terra); text-decoration: none; }
.pr-cat:nth-child(2n) { background: var(--pr-cream); }
.pr-cat img { width: auto; height: 190px; aspect-ratio: 625 / 900; object-fit: contain; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .18)); }
.pr-cat span { display: inline-flex; min-height: 32px; align-items: center; padding: 4px 12px; border-radius: 999px; background: rgb(255 255 255 / .92); color: #3B2924; font-size: .78rem; font-weight: 700; }
.pr-colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pr-color { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px; border-radius: 18px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
  font: inherit; text-align: left; cursor: pointer; transition: border-color .15s var(--ab-ease); }
.pr-color:hover { border-color: var(--color-accent); }
.pr-color i { flex: none; width: 52px; height: 52px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); }
.pr-color b { display: block; font-size: .95rem; }
.pr-color small { display: block; font-size: .8rem; color: var(--color-text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.pr-rules { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.pr-rules li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: .93rem; line-height: 1.55; color: var(--color-text-muted); }
.pr-rules li::before { content: "✓"; font-weight: 800; color: var(--ab-ink); }
.pr-rules b { color: var(--color-text); }

/* ════════ Партнерство ════════ */
.pr-open { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.pr-open > div { padding: 18px 20px; border-radius: 18px; border: 1.5px dashed color-mix(in srgb, var(--color-accent) 35%, var(--color-border)); background: color-mix(in srgb, var(--color-accent) 4%, transparent); }
.pr-open b { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 1rem; color: var(--color-text); margin-bottom: 4px; }
.pr-open p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--color-text-muted); }
.pr-tlink { display: inline-flex; margin-top: 14px; font-weight: 700; color: var(--ab-ink); text-decoration: none; }
.pr-tlink:hover { text-decoration: underline; }

/* ════════ FAQ ════════ */
.pr-faqwrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.pr-faq { display: grid; gap: 10px; }
.pr-faq details { border-radius: 18px; background: var(--color-surface); border: 1px solid var(--color-border); overflow: hidden; }
.pr-faq details[open] { border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border)); }
.pr-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; font-weight: 700; color: var(--color-text); line-height: 1.4; }
.pr-faq summary::-webkit-details-marker { display: none; }
.pr-faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ab-tint); color: var(--ab-ink); font-size: 1.1rem; font-weight: 700; transition: transform .2s var(--ab-ease); }
.pr-faq details[open] summary::after { transform: rotate(45deg); }
.pr-faq summary:hover { color: var(--ab-ink); }
.pr-faq summary:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; border-radius: 18px; }
.pr-faq details > p { margin: 0; padding: 0 20px 18px; color: var(--color-text-muted); line-height: 1.65; max-width: 70ch; }

/* ════════ Контакти ════════ */
.pr-contact-q { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.12; margin: 0 0 10px; color: #fff; text-wrap: balance; }
.pr-buy-q { color: var(--color-text); }
.pr-contacts { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 8px; }
.pr-contacts a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .14); color: #fff; text-decoration: none; transition: background .15s var(--ab-ease); }
.pr-contacts a:hover { background: rgb(255 255 255 / .14); }
.pr-contacts i { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgb(255 255 255 / .12); font-style: normal; }
.pr-contacts b { display: block; font-size: .98rem; }
.pr-contacts small { display: block; font-size: .78rem; color: rgb(255 255 255 / .66); }

/* ════════ Адаптив ════════ */
@media (max-width: 1024px) {
  .pr-assets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-open { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .pr-about, .pr-faqwrap { grid-template-columns: minmax(0, 1fr); }
  .pr-copies, .pr-copies--link { grid-template-columns: minmax(0, 1fr); }
  .pr-mission img { width: 110px; }
  .pr-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-colors { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .pr-assets { grid-template-columns: minmax(0, 1fr); }
  .pr-asset--wide { grid-column: auto; }
  .pr-asset__art { height: 150px; }
  .pr-mission { grid-template-columns: minmax(0, 1fr); }
  .pr-mission img { display: none; }
  .pr-copy { padding: 18px; }
  .pk-copybtn { align-self: stretch; }
  .pr-sheet { padding: 20px; }
  .pr-sheet dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pr-cat img { height: 120px; }
  .pr .ab-tcard .pr-tlink { grid-column: 2; }
}
@media (max-width: 380px) {
  .ab .pr-contact-q { font-size: 1.3rem !important; }
}
/* 03.10: іконка-PNG — як іконка застосунку (заокруглений квадрат на кремовому), обкладинка — на всю ширину без дірки праворуч */
.pr-asset__art--appicon img { border-radius: 24px; box-shadow: 0 6px 18px rgb(0 0 0 / .14); }
.pr-asset--wide { grid-column: 1 / -1; }
.pr-asset__art--cover { height: auto; aspect-ratio: 1200 / 630; max-height: 420px; }

/* ════════ 13.10: «як Стати брендом» — місія на темній смузі, липкий FAQ з котиком ════════ */
.pr-mission img { width: 210px; filter: drop-shadow(0 18px 26px rgb(0 0 0 / .35)); animation: ab-bob 4s ease-in-out infinite alternate; }
.ab-dark .pr-mission blockquote { color: #fff; font-size: clamp(1.4rem, 3vw, 2.35rem); }
.ab-dark .pr-mission blockquote::before { color: var(--color-sand, var(--color-accent)); }
.ab-dark .pr-mission figcaption { color: rgb(255 255 255 / .7); }
.ab-dark .pr-values li { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .16); color: #fff; }
.pr-faqwrap > div:first-child { position: sticky; top: calc(var(--header-height, 70px) + 84px); }
.pr-faq__cat { display: block; width: 150px; height: auto; margin-top: 26px; filter: drop-shadow(0 14px 20px rgb(0 0 0 / .16)); }
.pr-faq summary { min-height: 58px; box-sizing: border-box; }
.pr-faq details[open] summary::after { background: var(--color-accent); color: var(--color-on-accent); }
.pr-faq details { box-shadow: var(--shadow-sm); }
a.ab-toast { transition: border-color .15s var(--ab-ease); }
a.ab-toast:hover { border-color: var(--color-accent); }
.pr-copy, .pr-asset, .pr-sheet { box-shadow: var(--shadow-sm); }
.pr-asset { transition: transform .3s var(--ab-ease), box-shadow .3s var(--ab-ease); }
@media (hover: hover) { .pr-asset:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } }
@media (max-width: 860px) { .pr-faqwrap > div:first-child { position: static; } .pr-faq__cat { width: 96px; margin-top: 16px; } .pr-mission img { width: 140px; } }
@media (max-width: 600px) { .pr-mission { text-align: left; } }
/* 13.10: картинка — елемент сітки (place-items), тож max-height:100% не діє — головний логотип на всю ширину вилазив за плитку */
.pr-asset__art--lockup img { width: auto; height: auto; max-width: 78%; max-height: 128px; }