/* Палитра: стопка ярких карточек, крупные цифры, Unbounded + Onest.
   Все правила только внутри .pack-palette. Порядок подключения: эта тема идёт
   раньше social-links.css, blocks-extra.css и contact-card.css, поэтому для их
   классов селекторы начинаются с .public-page.pack-palette (на класс сильнее). */
.public-page.pack-palette {
  --pal-ink: #141414;
  --pal-cream: #f4f1ec;
  --pal-yellow: #f5e663;
  --pal-mint: #9fe3b4;
  --pal-pink: #f6a8c8;
  --pal-orange: #ffb37a;
  --pal-lilac: #c9b6ff;
  --pal-ink-soft: #3a3833;
  --pal-display: "Pack Unbounded", "Arial Black", system-ui, sans-serif;
  --pal-gap: clamp(10px, 1.6cqi, 16px);
  --page-bg: var(--pal-cream);
  --page-text: var(--pal-ink);
  --page-accent: var(--pal-ink);
  --page-soft: #ffffff;
  --page-muted: #5c5a55;
  --page-line: #c9c4ba;
  --page-input: #ffffff;
  --pack-radius: 26px;
  --pack-space: var(--pal-gap);
  font-family: "Pack Onest", Manrope, system-ui, sans-serif;
}

/* Шапка: жёлтая карточка-визитка. */
.pack-palette .pack-hero {
  display: grid;
  gap: 14px;
  padding: clamp(22px, 4cqi, 40px) clamp(20px, 4.4cqi, 44px);
  border-radius: 30px;
  background: var(--pal-yellow);
  color: var(--pal-ink);
}
.pack-palette .pack-palette-meta {
  order: -1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.pack-palette .pack-palette-meta .pack-avatar {
  width: clamp(60px, 8.6cqi, 80px);
  height: clamp(60px, 8.6cqi, 80px);
}
.pack-palette .pack-initials {
  background: var(--pal-ink);
  color: var(--pal-yellow);
  font-family: var(--pal-display);
  font-weight: 700;
  font-size: clamp(18px, 2.6cqi, 24px);
  letter-spacing: 0;
}
.pack-palette .pack-palette-meta-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.pack-palette .pack-hero :is(.tagline, .location) {
  display: block;
  margin: 0;
  font-size: clamp(13px, 1.7cqi, 15px);
  line-height: 1.35;
  color: var(--pal-ink);
}
.pack-palette .pack-hero .tagline {
  font-weight: 600;
}
.pack-palette .pack-hero .location {
  color: var(--pal-ink-soft);
}
.pack-palette .pack-hero :is(h1, :where(.preview-name)) {
  margin: 0;
  font-family: var(--pal-display);
  font-weight: 700;
  font-size: clamp(30px, 10.5cqi, 66px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  hyphens: auto;
  text-wrap: balance;
}
.pack-palette .pack-hero .profile-about {
  max-width: 46ch;
  margin: 0;
  font-size: clamp(16px, 2.1cqi, 19px);
  line-height: 1.42;
  color: var(--pal-ink);
}

/* Блоки: ряд с переносом. Ссылки-плитки встают по две (на широком экране по
   три), последняя нечётная растягивается на всю строку, как в макете. */
.pack-palette .public-blocks {
  display: flex;
  flex-flow: row wrap;
  gap: var(--pal-gap);
  margin-top: var(--pal-gap);
  counter-reset: pal-link;
}
.pack-palette .public-blocks > * {
  flex: 1 1 100%;
  min-width: 0;
}
.pack-palette .public-blocks > .section-link {
  display: grid;
  flex-basis: calc(50% - var(--pal-gap));
}
.pack-palette .public-blocks :is(h2, :where(.preview-heading)) {
  margin: 0 0 10px;
  font-family: var(--pal-display);
  font-weight: 600;
  font-size: clamp(16px, 2.4cqi, 22px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  hyphens: auto;
}
.pack-palette .public-blocks p {
  font-size: 15px;
  line-height: 1.55;
}

/* Ссылка-плитка: номер или значок соцсети сверху, стрелка в чёрном круге,
   название снизу. Цвета идут по кругу. */
.pack-palette .section-link .link-block {
  --tile: var(--pal-mint);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  gap: 16px 12px;
  min-height: clamp(140px, 20cqi, 190px);
  padding: clamp(16px, 2.6cqi, 24px);
  border: 0;
  border-radius: var(--pack-radius);
  background: var(--tile);
  color: var(--pal-ink);
}
.pack-palette .section-link:nth-child(5n + 2 of .section-link) .link-block {
  --tile: var(--pal-pink);
}
.pack-palette .section-link:nth-child(5n + 3 of .section-link) .link-block {
  --tile: var(--pal-orange);
}
.pack-palette .section-link:nth-child(5n + 4 of .section-link) .link-block {
  --tile: var(--pal-lilac);
}
.pack-palette .section-link:nth-child(5n + 5 of .section-link) .link-block {
  --tile: var(--pal-yellow);
}
/* Обёртка значка и текста раскладывается прямо в сетку плитки. */
.public-page.pack-palette .section-link .social-link-copy {
  display: contents;
}
.pack-palette .section-link .social-link-copy > svg {
  grid-area: 1 / 1;
  width: 30px;
  height: 30px;
}
/* Для обычных ссылок вместо значка сайта - крупный порядковый номер. */
.pack-palette
  .section-link
  .social-link-copy:is([data-platform="website"], [data-platform="custom"])
  > svg {
  display: none;
}
.pack-palette
  .section-link
  .social-link-copy:is(
    [data-platform="website"],
    [data-platform="custom"]
  )::before {
  content: counter(pal-link, decimal-leading-zero);
  counter-increment: pal-link;
  grid-area: 1 / 1;
  font-family: var(--pal-display);
  font-weight: 700;
  font-size: clamp(34px, 9cqi, 52px);
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.public-page.pack-palette .section-link .social-link-copy > span {
  grid-area: 2 / 1 / 3 / 3;
  align-self: end;
  display: grid;
  gap: 4px;
}
.pack-palette .section-link .link-block strong {
  font-size: clamp(16px, 2cqi, 19px);
  font-weight: 600;
  line-height: 1.25;
  hyphens: auto;
}
.pack-palette .section-link .link-block small {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--pal-ink-soft);
}
.pack-palette .section-link .link-block > svg:last-child {
  grid-area: 1 / 2;
  width: 44px;
  height: 44px;
  padding: 12px;
  border-radius: 50%;
  background: var(--pal-ink);
  color: var(--tile);
}

/* Остальные ссылки страницы: «Сохранить контакт» и «Открыть на карте». */
.public-page.pack-palette .contact-action {
  margin: var(--pal-gap) 0 0;
}
.public-page.pack-palette :is(.contact-save, .map-block .link-block) {
  min-height: 56px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--pal-ink);
  color: var(--pal-cream);
}
.public-page.pack-palette :is(.contact-save, .map-block .link-block) strong {
  font-weight: 600;
}
.public-page.pack-palette :is(.contact-save, .map-block .link-block) > svg {
  color: var(--pal-yellow);
}
/* Общее кольцо фокуса у кнопки контакта - currentColor, а он здесь кремовый. */
.public-page.pack-palette .contact-save:focus-visible {
  outline: 3px solid var(--pal-ink);
  outline-offset: 4px;
}

/* Текст: белая карточка между яркими. */
.pack-palette .text-block {
  padding: clamp(20px, 3.4cqi, 32px);
  border-radius: var(--pack-radius);
  background: #ffffff;
}
.pack-palette .text-block p {
  max-width: 68ch;
}

/* Соцсети: белые пилюли одинаковой ширины. Когда пилюля достаточно широкая
   (мало значков или компьютер), рядом со значком появляется подпись. */
.public-page.pack-palette .social-icons-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: 8px;
  padding: 0;
}
.public-page.pack-palette .social-icon-section {
  container-type: inline-size;
  border-radius: 999px;
}
.public-page.pack-palette .social-icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: var(--pal-ink);
  box-shadow: none;
  font-size: 14px;
  font-weight: 500;
}
.public-page.pack-palette .social-icon-link > svg {
  width: 20px;
  height: 20px;
}
@container (min-width: 132px) {
  .public-page.pack-palette .social-icon-link::after {
    content: attr(aria-label);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
@media (hover: hover) {
  .public-page.pack-palette .social-icon-link[href]:hover {
    background: var(--pal-ink);
    color: var(--pal-cream);
    transform: none;
  }
}

/* Вопросы: сиреневая карточка с линейками. */
.pack-palette .faq-block {
  padding: 18px 20px 6px;
  border-radius: var(--pack-radius);
  background: var(--pal-lilac);
}
.pack-palette .faq-block :is(h2, :where(.preview-heading)) {
  margin-bottom: 6px;
}
.pack-palette .faq-list {
  gap: 0;
}
.pack-palette .faq-block details {
  border-top: 1px solid rgb(20 20 20 / 0.25);
  border-radius: 0;
  background: transparent;
}
.pack-palette .faq-block summary {
  align-items: center;
  min-height: 48px;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 500;
}
.pack-palette .faq-block summary::after {
  opacity: 1;
  font-family: var(--pal-display);
}
.pack-palette .faq-block details p {
  padding: 0 0 14px;
  font-size: 14px;
  line-height: 1.45;
  opacity: 1;
}

/* Отзыв: розовая карточка. */
.pack-palette blockquote {
  padding: clamp(20px, 3.4cqi, 32px);
  border-radius: var(--pack-radius);
  background: var(--pal-pink);
}
.pack-palette blockquote svg {
  opacity: 1;
}
.pack-palette .public-blocks blockquote p {
  margin: 12px 0 16px;
  font-size: clamp(18px, 2.6cqi, 24px);
  font-weight: 500;
  line-height: 1.4;
}
.pack-palette cite {
  font-size: 14px;
  font-weight: 600;
  color: var(--pal-ink);
}

/* Услуги: белые карточки, цена крупной цифрой сверху. */
.pack-palette .variant-grid .services-list {
  gap: var(--pal-gap);
}
.pack-palette .services-list > div {
  border-top-color: var(--page-line);
}
.pack-palette .variant-grid .services-list > div {
  gap: 10px;
  padding: 20px;
  border: 0;
  border-radius: var(--pack-radius);
  background: #ffffff;
}
.pack-palette .variant-grid .services-list b {
  order: -1;
  font-family: var(--pal-display);
  font-size: clamp(20px, 3.4cqi, 28px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.pack-palette .services-list p {
  color: var(--page-muted);
}

/* Галерея, видео и пустая галерея: те же скругления, что у карточек. */
.pack-palette .gallery img,
.pack-palette .video-frame iframe,
.pack-palette .video-poster {
  border-radius: 22px;
}
.pack-palette .video-poster {
  background: #ffffff;
}
.pack-palette .empty-gallery {
  border-radius: var(--pack-radius);
  border-color: var(--page-muted);
}

/* Карта: белая карточка с чёрной кнопкой. */
.pack-palette .map-block {
  padding: clamp(20px, 3.4cqi, 32px);
  border-radius: var(--pack-radius);
  background: #ffffff;
}
.pack-palette .map-block .map-address {
  font-size: 15px;
  line-height: 1.5;
}

/* Обратный отсчёт: чёрные плитки с жёлтыми цифрами. */
.pack-palette .countdown-grid > div {
  padding: 14px 4px;
  border-radius: 20px;
  background: var(--pal-ink);
  color: var(--pal-yellow);
}
.pack-palette .countdown-grid b {
  font-family: var(--pal-display);
  font-size: clamp(22px, 6cqi, 40px);
  font-weight: 700;
}
.pack-palette .countdown-grid small {
  color: var(--pal-cream);
  opacity: 1;
}

.pack-palette .divider-block {
  font-family: var(--pal-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Форма: чёрная карточка, светлые поля, жёлтая кнопка-пилюля. Переменные
   переопределены внутри карточки, чтобы фокус и поля читались на тёмном. */
.pack-palette .inquiry-block {
  --page-text: var(--pal-cream);
  --page-muted: #b8b4ac;
  --page-accent: var(--pal-yellow);
  --page-soft: #2a2a2a;
  --page-input: #2a2a2a;
  --page-line: #8a867d;
  color-scheme: dark;
  padding: clamp(20px, 3.4cqi, 32px);
  border-radius: 30px;
  background: var(--pal-ink);
  color: var(--page-text);
}
.pack-palette .inquiry-block > p {
  font-size: 15px;
  line-height: 1.5;
}
.pack-palette .lead-form label:not(.consent) {
  align-items: stretch;
  gap: 6px;
  font-weight: 500;
  text-align: left;
}
.pack-palette .lead-form :is(input, textarea, select) {
  min-height: 48px;
  border: 1px solid var(--page-line);
  border-radius: 16px;
}
.pack-palette .lead-form .consent span {
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
}
.pack-palette .lead-form .consent input {
  accent-color: var(--pal-yellow);
}
.pack-palette .public-button {
  min-height: 52px;
  border-radius: 999px;
  background: var(--pal-yellow);
  color: var(--pal-ink);
  font-weight: 600;
}
@container (max-width: 420px) {
  .pack-palette .inquiry-block .field-pair {
    grid-template-columns: 1fr;
  }
}

/* Видимый фокус: чёрное кольцо на кремовом фоне, жёлтое внутри формы. */
.pack-palette :is(summary, select):focus-visible {
  outline: 3px solid var(--page-accent);
  outline-offset: 3px;
}

.pack-palette .page-brand {
  margin-top: 28px;
}

/* Широкий экран: плитки по три, имя и описание в шапке рядом. */
@container (min-width: 600px) {
  .pack-palette .variant-grid .services-list > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@container (min-width: 620px) {
  .pack-palette .public-blocks > .section-link {
    flex-basis: calc(33.333% - var(--pal-gap));
  }
}
@container (min-width: 720px) {
  .pack-palette .pack-hero:has(.profile-about) {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    column-gap: 40px;
    align-items: end;
  }
  .pack-palette .pack-hero:has(.profile-about) .pack-palette-meta {
    grid-column: 1 / -1;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pack-palette .section-link .link-block > svg:last-child {
    transition: transform 180ms ease;
  }
  .pack-palette .section-link .link-block[href]:hover > svg:last-child {
    transform: rotate(45deg);
  }
}

/* Секция «Соцсети» (блок social): только значки, подписи в узких кнопках обрезались. */
.public-page.pack-palette .social-block .social-icon-link::after {
  content: none;
}

/* Иконка ссылки занимает место номера плитки. */
.public-page.pack-palette .section-link .link-thumb {
  grid-area: 1 / 1;
}
.public-page.pack-palette
  .section-link
  .social-link-copy:has(> .link-thumb)::before {
  content: none;
}

/* Свой фон, на котором текст дизайна не читается (класс ink-auto и --auto-ink ставит
   design-style.ts):
   текст и линии прямо на фоне страницы берут цвет под фон. Карточки дизайна
   возвращают свои цвета; правило без веса, поэтому цвета самого дизайна и цветной секции главнее. */
.public-page.pack-palette.ink-auto {
  --page-bg: var(--pack-background-color);
  --page-text: var(--auto-ink);
  --page-muted: var(--auto-muted);
  --page-accent: var(--auto-ink);
  --page-line: color-mix(in srgb, var(--auto-ink) 24%, transparent);
  --page-input: color-mix(in srgb, var(--auto-ink) 8%, var(--page-bg));
  color: var(--auto-ink);
}
:where(.public-page.pack-palette.ink-auto)
  :where(
    .faq-block,
    .map-block,
    .map-poster,
    .section-services div,
    .section-testimonial blockquote,
    .text-block,
    .video-poster
  ):where(:not(.section-colored, .section-colored *)) {
  --page-bg: var(--pal-cream);
  --page-text: var(--pal-ink);
  --page-muted: #5c5a55;
  --page-accent: var(--pal-ink);
  --page-line: #c9c4ba;
  --page-input: #ffffff;
  color: var(--page-text);
  color-scheme: light;
}