/* ============================================================
   CERTIFICATES — certificates.html. Matches Figma nodes 2360:1337
   "gift-certificates-page" (desktop) and 2361:1402
   "gift-certificates-mobile" (mobile). Desktop values are fluid
   clamp(min, vw, max) derived from the 1920px frame (vw% = px/19.2);
   the max-width:767px block below re-states every value as a flat
   px pulled straight off the 390px mobile frame, so mobile isn't
   just a scaled-down desktop — it matches its own frame exactly.

   The Figma desktop canvas actually contained two FAQ sections back
   to back (node 2360:1392, a plain old-style accordion, immediately
   followed by 2359:5037, a redesigned card-with-shadow accordion) —
   a leftover duplicate from an in-place redesign, not two intended
   sections. The mobile frame only has the card style, confirming
   which one is current. Only the card style (2359:5037) is
   implemented here.
   ============================================================ */
/* This page's hero sits flush at the top of the flow (no photo box for the
   title to sit near the bottom of), so it needs a real offset to clear the
   fixed header — clamp(80px mobile, 100px desktop), measured directly off
   the rendered header rather than var(--header-h) (84px desktop), since
   Figma's spacing includes a deliberate ~16px gap beyond bare header
   clearance. */
/* .cert-hero also carries the shared .wrap class, whose own rule
   (.wrap { margin: 0 auto; padding: 0 var(--gutter) }) is specificity
   (0,0,1,0) — equal to ".cert-hero.wrap" (0,0,2,0) would normally beat it,
   but !important is kept here for parity with the other !important
   overrides below that DO need it. */
/* две колонки: слева текст, справа стопка макетов — страница без
   визуала выглядела пустой */
.cert-hero.wrap { display: flex; flex-direction: row; align-items: center; gap: clamp(32px, 5vw, 96px); margin-top: clamp(80px, 5.21vw, 100px) !important; padding-top: clamp(48px, 4.17vw, 80px) !important; padding-bottom: clamp(28px, 2.08vw, 40px) !important; }
.cert-hero__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 1.25vw, 24px); }
.cert-hero__title { font-size: clamp(34px, 3.33vw, 64px); font-weight: 400; color: var(--c-text); letter-spacing: -0.04em; line-height: 1; margin: 0; font-style: normal; max-width: 800px; }
.cert-hero__subtitle { font-size: clamp(18px, 1.25vw, 22px); font-weight: 300; color: var(--c-muted); line-height: 1.5; letter-spacing: -0.02em; margin: 0; max-width: 800px; font-style: normal; }

/* ── CERTIFICATE CARDS ── */
/* every padding-top/bottom below needs !important so the mobile media
   query's own padding overrides (further down this file) can still win —
   specificity always outranks a later @media block otherwise. */
.cert-grid-sec.wrap { padding-top: clamp(14px, 1.04vw, 20px) !important; padding-bottom: clamp(14px, 1.04vw, 20px) !important; }
.cert-grid { display: flex; gap: clamp(16px, 1.25vw, 24px); align-items: stretch; }
.cert-card { flex: 1 1 0; min-width: 0; background: rgba(237,237,237,0.25); border: 1px solid rgba(48,54,46,0.12); border-radius: 16px; padding: clamp(24px, 2.08vw, 40px); display: flex; flex-direction: column; justify-content: space-between; gap: clamp(28px, 2.5vw, 48px); transition: border-color 0.25s, background 0.25s; }
.cert-card:hover { border-color: rgba(141,165,133,0.35); background: rgba(141,165,133,0.06); }
.cert-card--featured { border-color: var(--c-accent); background: rgba(141,165,133,0.06); }
.cert-card--featured:hover { border-color: var(--c-accent); background: rgba(141,165,133,0.1); }
.cert-card__info { display: flex; flex-direction: column; gap: clamp(10px, 0.83vw, 16px); }
.cert-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cert-card__icon { width: clamp(38px, 2.7vw, 52px); height: clamp(38px, 2.7vw, 52px); border-radius: 50%; background: rgba(141,165,133,0.1); color: var(--c-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cert-card__icon svg { width: 52%; height: 52%; }
.cert-card__tag { font-size: clamp(11px, 0.63vw, 12px); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-accent); background: rgba(141,165,133,0.1); border-radius: 100px; padding: 6px 14px; white-space: nowrap; }
.cert-card--featured .cert-card__tag { background: var(--c-accent); color: #fff; }
.cert-card__amount { font-size: clamp(40px, 3.5vw, 64px); font-weight: 500; color: var(--c-text); letter-spacing: -0.03em; line-height: 1.1; margin: 0; font-style: normal; }
.cert-card__label { font-size: clamp(15px, 0.94vw, 18px); font-weight: 400; color: var(--c-muted); line-height: 1.3; margin: 0; font-style: normal; }
.cert-card__btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: var(--c-accent); color: #fff; border: none; border-radius: 8px; padding: clamp(10px, 0.83vw, 12px) clamp(18px, 1.25vw, 24px); font-family: var(--f); font-size: clamp(14px, 0.78vw, 15px); font-weight: 500; letter-spacing: 0.5px; cursor: pointer; transition: background 0.2s, transform 0.16s ease-out; }
@media (hover: hover) and (pointer: fine) {
  .cert-card__btn:hover { background: #6A7C64; }
  .cert-card__btn:hover span { transform: translateX(3px); }
}
.cert-card__btn:active { transform: scale(0.97); }
.cert-card__btn span { display: inline-block; transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1); }

.cert-note { display: block; padding-top: clamp(8px, 0.625vw, 12px); padding-bottom: clamp(48px, 4.17vw, 80px); margin: 0; font-size: clamp(14px, 0.78vw, 15px); font-weight: 400; color: var(--c-muted); letter-spacing: -0.03em; line-height: 1.4; font-style: normal; }

/* ── FAQ ── */
.cert-faq.wrap { display: flex; flex-direction: column; gap: clamp(28px, 3.125vw, 60px); }
.cert-faq__heading { font-size: clamp(34px, 3.33vw, 64px); font-weight: 400; color: var(--c-text); letter-spacing: -0.04em; line-height: 1; margin: 0; font-style: normal; }
.cert-faq__list { display: flex; flex-direction: column; gap: clamp(12px, 1.04vw, 20px); }
.cert-faq__card { background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(51,36,29,0.03); display: flex; align-items: stretch; overflow: hidden; }
.cert-faq__accent { flex-shrink: 0; width: 3.5px; background: var(--c-accent); }
.cert-faq__body { flex: 1 1 0; min-width: 0; padding: clamp(20px, 1.67vw, 32px); display: flex; flex-direction: column; gap: clamp(10px, 0.83vw, 16px); }
.cert-faq__q { all: unset; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; cursor: pointer; box-sizing: border-box; }
.cert-faq__q-text { font-size: clamp(17px, 1.25vw, 24px); font-weight: 500; color: var(--c-text); letter-spacing: -0.04em; line-height: 1; }
.cert-faq__toggle { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: #ededed; color: var(--c-text); display: flex; align-items: center; justify-content: center; transition: background 0.25s, color 0.25s; }
.cert-faq__q[aria-expanded="true"] .cert-faq__toggle { background: var(--c-accent); color: #fff; }
.cert-faq__icon-close, .cert-faq__icon-chevron { width: 22px; height: 22px; }
.cert-faq__icon-close { display: none; }
.cert-faq__q[aria-expanded="true"] .cert-faq__icon-close { display: block; }
.cert-faq__q[aria-expanded="true"] .cert-faq__icon-chevron { display: none; }
.cert-faq__a { margin: 0; overflow: hidden; max-height: 0; font-size: clamp(15px, 0.94vw, 18px); font-weight: 300; color: var(--c-muted); line-height: 1.6; font-style: normal; transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1); }

/* ── CTA ── */
.cert-cta.wrap { display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 1.67vw, 32px); text-align: center; padding-top: clamp(48px, 4.17vw, 80px) !important; padding-bottom: clamp(72px, 6.25vw, 120px) !important; }
.cert-cta__heading { font-size: clamp(24px, 1.875vw, 36px); font-weight: 400; color: var(--c-text); letter-spacing: -0.02em; line-height: 1.2; margin: 0; font-style: normal; }
.cert-cta__actions { display: flex; align-items: center; gap: clamp(18px, 1.67vw, 32px); flex-wrap: wrap; justify-content: center; }
/* color:#fff needs !important: base.css's global a{color:inherit} is an
   element selector, but this is still safer than relying on class
   specificity alone to win the cascade. */
.cert-cta__btn { display: inline-flex; align-items: center; justify-content: center; background: var(--c-accent); color: #fff !important; text-decoration: none; border-radius: 8px; padding: clamp(14px, 1.04vw, 20px) clamp(28px, 2.5vw, 48px); font-size: clamp(17px, 1.25vw, 24px); letter-spacing: -0.04em; transition: background 0.2s, transform 0.16s ease-out; }
@media (hover: hover) and (pointer: fine) {
  .cert-cta__btn:hover { background: #6A7C64; }
}
.cert-cta__btn:active { transform: scale(0.97); }
.cert-cta__phone { font-size: clamp(17px, 1.15vw, 22px); font-weight: 500; color: var(--c-text); text-decoration: none; letter-spacing: -0.04em; transition: opacity 0.2s; }
.cert-cta__phone:hover { opacity: 0.75; }

/* ── MOBILE (≤767px) — Figma node 2361:1402, exact 390px frame values ── */
@media (max-width: 767px) {
  .cert-hero.wrap { margin-top: 80px !important; padding: 32px 20px 24px !important; gap: 12px; }
  .cert-hero__title { font-size: 28px; letter-spacing: -0.04em; }
  .cert-hero__subtitle { font-size: 17px; font-weight: 300; line-height: 1.4; letter-spacing: -0.02em; min-height: calc(1.4em * 3); }

  .cert-grid-sec.wrap { padding: 0 20px 24px !important; }
  .cert-grid { flex-direction: column; gap: 16px; }
  .cert-card { padding: 24px; gap: 28px; }
  .cert-card__info { gap: 12px; }
  .cert-card__icon { width: 40px; height: 40px; }
  .cert-card__tag { font-size: 11px; padding: 5px 12px; }
  .cert-card__amount { font-size: 40px; }
  .cert-card__label { font-size: 15px; letter-spacing: -0.02em; }
  .cert-card__btn { width: 100%; justify-content: center; }

  .cert-note { padding: 0 24px 40px; font-size: 15px; letter-spacing: -0.04em; }

  .cert-faq.wrap { padding: 0 20px 40px !important; gap: 24px; }
  .cert-faq__heading { font-size: 28px; font-weight: 300; letter-spacing: -0.04em; }
  .cert-faq__list { gap: 16px; }
  .cert-faq__card { border-radius: 16px; border: 1px solid rgba(48,54,46,0.08); box-shadow: 0 4px 8px rgba(51,36,29,0.02); }
  .cert-faq__accent { display: none; }
  .cert-faq__body { padding: 20px; gap: 16px; }
  .cert-faq__q-text { font-size: 16px; max-width: 260px; letter-spacing: -0.04em; font-weight: 500; }
  .cert-faq__toggle { width: 32px; height: 32px; }
  .cert-faq__icon-close, .cert-faq__icon-chevron { width: 20px; height: 20px; }
  .cert-faq__a { font-size: 15px; font-weight: 400; letter-spacing: -0.04em; line-height: 1.4; }

  .cert-cta.wrap { background: rgba(237,237,237,0.25); border-top: 1px solid rgba(48,54,46,0.12); border-bottom: 1px solid rgba(48,54,46,0.12); padding: 40px 20px 56px !important; gap: 24px; }
  .cert-cta__heading { font-size: 24px; }
  .cert-cta__actions { flex-direction: column; gap: 16px; width: 100%; }
  .cert-cta__btn { width: 100%; padding: 14px 32px; font-size: 15px; font-weight: 500; letter-spacing: 0.5px; border-radius: 8px; }
  .cert-cta__phone { font-size: 24px; font-weight: 500; }

  footer.site-footer { display: none !important; }
}

/* ── Визуал сертификата ────────────────────────────────────────────
   Макеты в assets/photos/cert-mock-*.webp — заглушки под будущие
   фотографии сертификатов, размер и пропорция совпадают. */
.cert-hero__bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(8px, 0.63vw, 12px); }
.cert-hero__bullets li { position: relative; padding-left: 26px; font-size: clamp(15px, 0.94vw, 18px); font-weight: 300; color: var(--c-text); letter-spacing: -0.02em; line-height: 1.4; }
.cert-hero__bullets li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 12px; height: 1px; background: var(--c-accent); }
/* залитая зелёная, как остальные главные кнопки сайта
   (.hero__cta на услугах, .spec-hero__cta у специалистов) */
.cert-hero__cta.pill-btn {
  margin-top: clamp(6px, 0.5vw, 10px);
  padding: clamp(14px, 0.94vw, 18px) clamp(28px, 2.6vw, 50px);
  font-size: clamp(16px, 1.15vw, 22px); font-weight: 400; letter-spacing: -0.02em;
  gap: clamp(12px, 1.2vw, 20px);
  background: var(--c-accent); color: #fff; border-color: var(--c-accent); box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .cert-hero__cta.pill-btn:hover { background: var(--c-accent-hover, #6A7C64); border-color: var(--c-accent-hover, #6A7C64); }
}
.cert-hero__cta.pill-btn svg { width: clamp(20px, 1.6vw, 28px); height: clamp(20px, 1.6vw, 28px); }
@media (max-width: 560px) { .cert-hero__cta.pill-btn { width: 100%; } }

.cert-hero__stack { flex: 0 0 clamp(260px, 44%, 660px); aspect-ratio: 1448 / 1086; border-radius: clamp(12px, 1.04vw, 20px); overflow: hidden; background: #EDEFE9; }
.cert-hero__stack img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* пропорция задана явно: три макета отрисованы чуть по-разному, и без
   неё карточки номиналов вставали разной высоты */
.cert-card__mock { border-radius: 12px; overflow: hidden; background: #71756a; aspect-ratio: 2.68; }
.cert-card__mock img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cert-card { gap: clamp(20px, 1.6vw, 32px); }

.cert-sec-title { font-size: clamp(28px, 2.5vw, 48px); font-weight: 400; color: var(--c-text); letter-spacing: -0.04em; line-height: 1.1; margin: 0; font-style: normal; }

.cert-steps.wrap { display: flex; flex-direction: column; gap: clamp(28px, 2.5vw, 48px); padding-top: clamp(40px, 3.33vw, 64px) !important; padding-bottom: clamp(40px, 3.33vw, 64px) !important; }
.cert-steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.25vw, 24px); }
.cert-step { display: flex; flex-direction: column; gap: clamp(8px, 0.63vw, 12px); padding: clamp(24px, 2.08vw, 40px); border: 1px solid rgba(48,54,46,0.12); border-radius: 16px; background: rgba(237,237,237,0.25); }
.cert-step__num { font-size: clamp(13px, 0.78vw, 15px); font-weight: 600; letter-spacing: 0.06em; color: var(--c-accent); }
.cert-step__title { font-size: clamp(18px, 1.15vw, 22px); font-weight: 500; color: var(--c-text); letter-spacing: -0.03em; margin: 0; }
.cert-step__desc { font-size: clamp(14px, 0.83vw, 16px); font-weight: 300; color: var(--c-muted); line-height: 1.45; letter-spacing: -0.02em; margin: 0; }

.cert-scope.wrap { display: flex; align-items: center; gap: clamp(32px, 4vw, 80px); padding-top: clamp(40px, 3.33vw, 64px) !important; padding-bottom: clamp(48px, 4.17vw, 80px) !important; }
.cert-scope__media { flex: 0 0 clamp(240px, 42%, 620px); aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: #EDEFE9; }
.cert-scope__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cert-scope__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.04vw, 20px); }
.cert-scope__lead { font-size: clamp(15px, 0.94vw, 18px); font-weight: 300; color: var(--c-muted); line-height: 1.5; letter-spacing: -0.02em; margin: 0; }
.cert-scope__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(6px, 0.52vw, 10px) clamp(16px, 1.25vw, 24px); width: 100%; }
.cert-scope__list a { font-size: clamp(14px, 0.88vw, 17px); font-weight: 400; color: var(--c-text); letter-spacing: -0.02em; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s, color 0.2s; }
@media (hover: hover) and (pointer: fine) { .cert-scope__list a:hover { color: var(--c-accent); border-bottom-color: var(--c-accent); } }
.cert-scope__all { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(14px, 0.88vw, 17px); font-weight: 500; color: var(--c-accent); text-decoration: none; }
.cert-scope__all svg { width: clamp(16px, 1vw, 20px); height: clamp(16px, 1vw, 20px); }

@media (max-width: 1024px) {
  .cert-steps__grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  /* на узком экране колонки становятся слишком тесными */
  .cert-hero.wrap { flex-direction: column; align-items: stretch; }
  .cert-hero__stack { flex: none; width: 100%; max-width: 520px; margin: 0 auto; }
  .cert-scope.wrap { flex-direction: column; align-items: stretch; }
  .cert-scope__media { flex: none; width: 100%; }
  .cert-scope__list { grid-template-columns: 1fr; }
}