/* Мята: почти чёрный фон, графитовые карточки и один мятный акцент для записи.
   Onest вместо Commissioner из макета. Все правила только внутри .pack-mint.
   Тема подключена раньше social-links.css, blocks-extra.css и contact-card.css,
   поэтому для их классов селекторы начинаются с .public-page.pack-mint. */
.public-page.pack-mint {
  --mint-accent: #2ee6a6;
  --mint-accent-hover: #52ebb5;
  --mint-ink: #0b1a14;
  --mint-ink-soft: #1d4a37;
  --mint-card: #1b201e;
  --mint-card-hover: #232a27;
  --mint-line: #2a312e;
  --mint-field: #6b7772;
  --mint-body: #c9d6d0;
  --mint-tint: rgb(46 230 166 / 0.14);
  --page-bg: #101312;
  --page-text: #e9f2ee;
  --page-accent: var(--mint-accent);
  --page-soft: var(--mint-card);
  --page-muted: #9fb3aa;
  --page-line: var(--mint-line);
  --page-input: #101312;
  --pack-radius: 20px;
  color-scheme: dark;
  font-family: "Pack Onest", Manrope, system-ui, sans-serif;
}

/* Шапка: аватар-квадрат и имя в одну строку, ниже описание и адрес. */
.pack-mint .pack-hero {
  display: grid;
  gap: 14px;
  padding: 0 4px;
}
.pack-mint .pack-mint-id {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2cqi, 20px);
  min-width: 0;
}
.pack-mint .pack-mint-id .pack-avatar {
  width: clamp(56px, 9cqi, 84px);
  height: clamp(56px, 9cqi, 84px);
  border-radius: clamp(16px, 2.4cqi, 24px);
}
.pack-mint .pack-initials {
  background: var(--mint-accent);
  color: var(--mint-ink);
  font-size: clamp(20px, 3cqi, 28px);
  font-weight: 800;
  letter-spacing: 0;
}
.pack-mint .pack-mint-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.pack-mint .pack-hero :is(h1, :where(.preview-name)) {
  margin: 0;
  font-size: clamp(22px, 6.6cqi, 46px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  hyphens: auto;
  text-wrap: balance;
}
.pack-mint .pack-hero .tagline {
  margin: 0;
  font-size: clamp(13px, 1.8cqi, 16px);
  line-height: 1.4;
  color: var(--page-muted);
}
.pack-mint .pack-hero .profile-about {
  max-width: 60ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--mint-body);
}
.pack-mint .pack-hero .location {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--page-text);
}
.pack-mint .pack-mint-pin {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--mint-tint);
  color: var(--mint-accent);
}

/* Блоки: плотная стопка; на широком экране ссылки парами, запись на всю ширину. */
.pack-mint .public-blocks {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
  margin-top: 22px;
}
.pack-mint .public-blocks > * {
  flex: 1 1 100%;
  min-width: 0;
}
.pack-mint .public-blocks > .section-link {
  display: grid;
}
.pack-mint .public-blocks :is(h2, :where(.preview-heading)) {
  margin: 0 0 10px;
  font-size: clamp(17px, 2.4cqi, 22px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
/* :where не повышает вес; ошибка формы сохраняет свои цвета из globals.css. */
.pack-mint .public-blocks p:where(:not(.error)) {
  font-size: 15px;
  line-height: 1.55;
  color: var(--mint-body);
}

/* Ссылки: графитовые строки, значок в мятной плашке, мятная стрелка. */
.pack-mint .link-block {
  min-height: 64px;
  padding: 12px 18px;
  border: 0;
  border-radius: var(--pack-radius);
  background: var(--mint-card);
  color: var(--page-text);
}
.pack-mint .link-block strong {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}
.pack-mint .link-block small {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--page-muted);
}
.public-page.pack-mint .social-link-copy {
  gap: 14px;
}
.pack-mint .social-link-copy > svg {
  width: 44px;
  height: 44px;
  padding: 12px;
  border-radius: 14px;
  background: var(--mint-tint);
  color: var(--mint-accent);
}
.pack-mint .link-block > svg:last-child {
  color: var(--mint-accent);
}
/* Глобус у обычной ссылки только шумит; плашка со значком остаётся у соцсетей,
   почты и телефона. */
.pack-mint
  .section-link
  .social-link-copy:is([data-platform="website"], [data-platform="custom"])
  > svg {
  display: none;
}
@media (hover: hover) {
  .pack-mint .link-block:hover {
    background: var(--mint-card-hover);
  }
}

/* Первая ссылка - мятная карточка записи, как в макете. */
.pack-mint .section-link:nth-child(1 of .section-link) .link-block {
  min-height: 84px;
  padding: 18px;
  border-radius: 26px;
  background: var(--mint-accent);
  color: var(--mint-ink);
}
.pack-mint .section-link:nth-child(1 of .section-link) .link-block strong {
  font-size: clamp(17px, 2.4cqi, 20px);
  font-weight: 700;
}
.pack-mint .section-link:nth-child(1 of .section-link) .link-block small {
  font-size: 14px;
  color: var(--mint-ink-soft);
}
.pack-mint .section-link:nth-child(1 of .section-link) .social-link-copy > svg,
.pack-mint
  .section-link:nth-child(1 of .section-link)
  .link-block
  > svg:last-child {
  width: 44px;
  height: 44px;
  padding: 12px;
  border-radius: 14px;
  background: var(--mint-ink);
  color: var(--mint-accent);
}
@media (hover: hover) {
  .pack-mint .section-link:nth-child(1 of .section-link) .link-block:hover {
    background: var(--mint-accent-hover);
  }
}

.public-page.pack-mint .contact-action {
  margin: 18px 0 0;
}
.public-page.pack-mint .contact-save {
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid var(--mint-accent);
  border-radius: 16px;
  background: transparent;
  color: var(--mint-accent);
}

/* Соцсети: графитовые плитки одинаковой ширины; широкая плитка получает подпись. */
.public-page.pack-mint .social-icons-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: 8px;
  padding: 0;
}
.public-page.pack-mint .social-icon-section {
  container-type: inline-size;
  border-radius: 14px;
}
.public-page.pack-mint .social-icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  padding: 0 12px;
  border: 0;
  border-radius: 14px;
  background: var(--mint-card);
  color: var(--page-text);
  box-shadow: none;
  font-size: 14px;
  font-weight: 500;
}
.public-page.pack-mint .social-icon-link > svg {
  width: 20px;
  height: 20px;
}
@container (min-width: 132px) {
  .public-page.pack-mint .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-mint .social-icon-link[href]:hover {
    background: var(--mint-card-hover);
    color: var(--mint-accent);
    transform: none;
  }
}

/* Текст и отзыв: карточки с тонкой рамкой. */
.pack-mint :is(.text-block, blockquote) {
  padding: clamp(18px, 3cqi, 28px);
  border: 1px solid var(--mint-line);
  border-radius: var(--pack-radius);
  background: transparent;
}
.pack-mint .text-block p {
  max-width: 68ch;
}
.pack-mint blockquote svg {
  color: var(--mint-accent);
  opacity: 1;
}
.pack-mint .public-blocks blockquote p {
  margin: 10px 0 8px;
  font-size: clamp(15px, 2.2cqi, 19px);
  line-height: 1.45;
  color: var(--page-text);
}
.pack-mint cite {
  font-size: 13px;
  color: var(--page-muted);
}

/* Услуги: строки с мятной ценой справа, как прайс в макете. */
.pack-mint .services-list > div {
  border-top-color: var(--mint-line);
}
.pack-mint .variant-grid .services-list {
  gap: 8px;
}
.pack-mint .variant-grid .services-list > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 0;
  border-radius: var(--pack-radius);
  background: var(--mint-card);
}
.pack-mint .services-list strong {
  font-size: 16px;
  font-weight: 600;
}
.pack-mint .services-list b,
.pack-mint .variant-grid .services-list b {
  flex-shrink: 0;
  max-width: 50%;
  font-size: 18px;
  font-weight: 800;
  text-align: right;
  color: var(--mint-accent);
}
.pack-mint .public-blocks .services-list p {
  margin-top: 2px;
  font-size: 13px;
  color: var(--page-muted);
}

/* Вопросы: графитовые строки. */
.pack-mint .faq-block details {
  border-radius: 16px;
  background: var(--mint-card);
}
.pack-mint .faq-block summary {
  align-items: center;
  min-height: 52px;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 600;
}
.pack-mint .faq-block summary::after {
  color: var(--mint-accent);
  opacity: 1;
}
.pack-mint .faq-block details p {
  padding: 0 18px 16px;
  font-size: 14px;
  opacity: 1;
}

/* Карта: карточка адреса со значком и тёмной кнопкой маршрута. */
.pack-mint .map-block {
  padding: 18px;
  border-radius: var(--pack-radius);
  background: var(--mint-card);
}
.pack-mint .map-block .map-address {
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--page-text);
}
.pack-mint .map-block .map-address svg {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 12px;
  background: var(--mint-tint);
  color: var(--mint-accent);
}
.pack-mint :is(.map-block, .inquiry-block) .link-block {
  min-height: 52px;
  padding: 0 16px;
  border-radius: 16px;
  background: var(--page-bg);
  color: var(--mint-accent);
}

/* Галерея, видео, отсчёт, разделитель. */
.pack-mint .gallery img,
.pack-mint .video-frame iframe,
.pack-mint .video-poster {
  border-radius: 16px;
}
.pack-mint .video-poster {
  background: var(--mint-card);
}
.pack-mint .empty-gallery {
  border-color: var(--mint-field);
  border-radius: var(--pack-radius);
}
.pack-mint .countdown-grid > div {
  padding: 14px 4px;
  border-radius: 16px;
  background: var(--mint-card);
}
.pack-mint .countdown-grid b {
  font-size: clamp(24px, 6cqi, 40px);
  font-weight: 800;
  color: var(--mint-accent);
}
.pack-mint .countdown-grid small {
  color: var(--page-muted);
  opacity: 1;
}
.pack-mint .divider-block {
  color: var(--page-muted);
  opacity: 1;
}
.pack-mint .divider-block::before,
.pack-mint .divider-block::after {
  background: #3d4743;
}

/* Форма: графитовая карточка, тёмные поля с различимой рамкой, мятная кнопка. */
.pack-mint .inquiry-block {
  padding: clamp(18px, 3cqi, 28px);
  border-radius: 24px;
  background: var(--mint-card);
}
.pack-mint .lead-form label:not(.consent) {
  align-items: stretch;
  gap: 6px;
  font-weight: 500;
  text-align: left;
}
.pack-mint .lead-form :is(input, textarea, select) {
  min-height: 48px;
  border: 1px solid var(--mint-field);
  border-radius: 14px;
  background: var(--page-bg);
}
.pack-mint .lead-form .consent span {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--mint-body);
}
.pack-mint .lead-form .consent input {
  accent-color: var(--mint-accent);
}
.pack-mint .public-button {
  min-height: 54px;
  border-radius: 16px;
  background: var(--mint-accent);
  color: var(--mint-ink);
  font-size: 16px;
  font-weight: 700;
}
@container (max-width: 420px) {
  .pack-mint .inquiry-block .field-pair {
    grid-template-columns: 1fr;
  }
}

.pack-mint :is(summary, select):focus-visible {
  outline: 3px solid var(--page-accent);
  outline-offset: 3px;
}

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

@container (min-width: 620px) {
  .pack-mint .pack-hero {
    gap: 18px;
  }
  .pack-mint .public-blocks > .section-link {
    flex-basis: calc(50% - 10px);
  }
  .pack-mint .public-blocks > .section-link:nth-child(1 of .section-link) {
    flex-basis: 100%;
  }
}

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

/* Свой фон, на котором текст дизайна не читается (класс ink-auto и --auto-ink ставит
   design-style.ts):
   текст и линии прямо на фоне страницы берут цвет под фон. Карточки дизайна
   возвращают свои цвета; правило без веса, поэтому цвета самого дизайна и цветной секции главнее. */
.public-page.pack-mint.ink-auto {
  --page-bg: var(--pack-background-color);
  --page-text: var(--auto-ink);
  --page-muted: var(--auto-muted);
  --page-line: color-mix(in srgb, var(--auto-ink) 24%, transparent);
  --mint-body: var(--auto-muted);
  --page-input: color-mix(in srgb, var(--auto-ink) 8%, var(--page-bg));
  color: var(--auto-ink);
}
:where(.public-page.pack-mint.ink-auto)
  :where(
    .inquiry-block,
    .link-block,
    .map-block,
    .map-poster,
    .section-countdown div,
    .section-faq details,
    .section-services div,
    .video-poster,
    .social-icon-link,
    .hero-cta .link-block,
    .sticky-cta .link-block,
    .section-accent .link-block,
    .section-accent .lead-form button
  ):where(:not(.section-colored, .section-colored *)) {
  --page-bg: #101312;
  --page-text: #e9f2ee;
  --page-muted: #9fb3aa;
  --page-line: var(--mint-line);
  --mint-body: #c9d6d0;
  --page-input: #101312;
  color: var(--page-text);
  color-scheme: dark;
}