/* ui_kits/website/protect.css
   PROTECT programme landing — extends colors_and_type.css + site.css + home.css.
   Mirrors peak.css, but the accent is the AMBER the PROTECT brain + hero label use
   (#ffbf00), and the year-round diagram is a SHIELD that envelops a brain icon
   instead of the numbered cycle ring — so the page reads as one continuous colour
   story with the locked PROTECT hero. */

:root {
  --protect-amber:      #FF9900;            /* matches the PROTECT brain + hero label */
  --protect-amber-deep: #b9820a;            /* legible amber for text/arrows on cream */
  --protect-amber-soft: rgba(255, 191, 0, 0.18);
  --protect-amber-tint: rgba(255, 191, 0, 0.07);
}

/* Hero — the locked PROTECT brain, embedded full-viewport (reuses .home-hero). */
.protect-hero {
  display: block;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  border: 0;
}

/* ============================================================
   SECTION — Що дає PROTECT (.lcard value cards)
   The link-card component itself lives in home.css; here we only retune it to the
   PROTECT colour story — the left stripe, the clickable card's arrow and hover
   border take the page's amber instead of the default gold. The arrow + hover use
   the DEEP amber so they stay legible on cream; the stripe takes the bright brand
   amber to match the hero.
   ============================================================ */
.protect-why .lcard            { --lcard-stripe: var(--protect-amber); }
.protect-why .lcard__arrow     { color: var(--protect-amber-deep); }
.protect-why a.lcard:hover     { border-color: rgba(185, 130, 10, 0.4); }
/* Картки — частина цього ж блоку, тому відступ над ними менший за відступ під
   ними: заголовок, лід і сітка читаються як одне ціле, а низ секції лишає повні
   120px .hv-section. Раніше секція віддавала свій нижній padding наступному
   блоку — після перестановки «Як це працює» ↔ «Що дає» під нею опинилась секція
   з іншим фоном, і картки впиралися просто в межу кольору. */
.protect-why .lcard-grid       { margin-top: 72px; }
/* Три картки-цінності стоять у ряд (замість 4). */
.protect-why .lcard-grid { grid-template-columns: repeat(3, 1fr); }

/* Рядок-заклик під картками + посилання на зразок звіту. */
.protect-why__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 32px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
}
.protect-why__cta-text {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-700);
  margin: 0;
  flex: 1 1 420px;
  max-width: 68ch;
}
.protect-why__sample {
  flex: 0 0 auto;
  color: var(--protect-amber-deep);
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 14px;
}

/* ============================================================
   SECTION — Перший екран (H1, підзаголовок, дії, рядок довіри)
   ============================================================ */
.protect-intro { padding-bottom: 88px; }
.protect-intro__inner { max-width: 920px; }
.protect-intro__h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(38px, 6vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 18px 0 0;
  text-wrap: balance;
  max-width: 20ch;
}
.protect-intro__sub {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-700);
  margin: 24px 0 0;
  max-width: 60ch;
}
.protect-intro__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.protect-intro__trust {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-500);
  margin: 32px 0 0;
  max-width: 74ch;
  padding-left: 18px;
  border-left: 2px solid var(--protect-amber);
}

/* ============================================================
   SECTION — План захисту (the SHIELD that envelops the brain)
   ============================================================ */
.protect-flow__lead {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 64ch;
  margin: 22px 0 0;
}

/* The centrepiece: a symmetric stage with the protective pillars flanking an
   animated shield. On desktop the three pillars sit to each side of the crest. */
.protect-shield-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  margin-top: 80px;
}

.protect-shield {
  position: relative;
  width: min(360px, 78vw);
  aspect-ratio: 100 / 120;        /* shields are taller than wide */
  margin: 0 auto;
}
.protect-shield__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* The shield outline is TWO half-paths that both START at the bottom point and run
   UP each flank to meet at the top-centre seam. They draw simultaneously when the
   section scrolls into view — so the crest is "built" from the bottom up on both
   sides at once. Lines are deliberately THICK (heraldic weight), heavier than
   PEAK's hairline ring. pathLength=100 keeps the dash maths simple; stroke-width is
   in viewBox units (no non-scaling-stroke, which would fracture the dash draw). */
.protect-shield__half {
  fill: none;
  stroke: var(--protect-amber);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.95s var(--ease-quiet);
}
.protect-shield-wrap.is-drawn .protect-shield__half { stroke-dashoffset: 0; }

/* The brain icon sits INSIDE the shield and draws itself in AFTER the crest closes
   (delay ≈ shield duration). It's the same single-path brain mark used across the
   site, stroked rather than filled so it can be drawn. stroke-width is in the
   brain's own 24-unit space, scaled up by the group transform (~×1.85). */
.protect-shield__brain {
  fill: none;
  stroke: var(--protect-amber);
  stroke-width: 0.62;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.5s var(--ease-quiet);
  transition-delay: 0.95s;
}
.protect-shield-wrap.is-drawn .protect-shield__brain { stroke-dashoffset: 0; }

/* Programme descriptor inside the crest, below the brain — fades up once the brain
   has drawn. The shield "holds" the programme, like a motto on a crest. */
.protect-shield__label {
  position: absolute;
  left: 50%;
  top: 63%;
  transform: translate(-50%, -50%);
  width: 74%;
  text-align: center;
  opacity: 0;
  transition: opacity 0.6s var(--ease-quiet);
  transition-delay: 2.1s;
}
.protect-shield-wrap.is-drawn .protect-shield__label { opacity: 1; }
.protect-shield__label-k {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(15px, 1.9vw, 19px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--protect-amber-deep);
}
.protect-shield__label-s {
  display: block;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* The protective pillars — three to the left (text flush right, toward the crest),
   three to the right (flush left). They fade up in sequence as the shield draws. */
.protect-pillars {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 44px);
}
.protect-pillars--left  { text-align: right; }
.protect-pillars--right { text-align: left; }
.protect-pillar {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s var(--ease-quiet), transform 0.6s var(--ease-quiet);
  transition-delay: calc(var(--i, 0) * 0.16s + 0.5s);
}
.protect-shield-wrap.is-drawn .protect-pillar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .protect-pillar { opacity: 1; transform: none; }
  .protect-shield__half,
  .protect-shield__brain { transition: none; stroke-dashoffset: 0; }
  .protect-shield__label { transition: none; opacity: 1; }
}
/* A short amber tick above each pillar title, hugging the side that faces the crest. */
.protect-pillar::before {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  background: var(--protect-amber);
  margin: 0 0 12px;
}
.protect-pillars--left  .protect-pillar::before { margin-left: auto; }   /* tick on the right */
.protect-pillars--right .protect-pillar::before { margin-right: auto; }  /* tick on the left */
.protect-pillar__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--ink-900);
  margin: 0;
}
.protect-pillar__desc {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-500);
  margin: 6px 0 0;
}

/* ============================================================
   SECTION — Якими процедурами працюємо (amber-framed cards)
   ============================================================ */
.protect-proc__lead {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 60ch;
  margin: 22px 0 56px;
}
.protect-proc__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.protect-proc__card { display: flex; flex-direction: column; }
.protect-proc__card .ph { aspect-ratio: 4 / 3; }
/* amber frame — same overlay-line technique as .ph--framed, PROTECT colour. */
.ph--protect.ph--framed::after { border-color: var(--protect-amber); }
.protect-proc__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink-900);
  margin: 22px 0 8px;
}
.protect-proc__desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-700);
  margin: 0;
}

/* ============================================================
   SECTION — Форма запису (PROTECT accent on hover)
   Both form buttons take the page's amber on hover. Amber is a LIGHT accent, so
   the text goes dark (ink-900) rather than white — keeping it legible, unlike
   PEAK's dark-green-on-white. protect.css only loads here, so other pages keep
   the gold behaviour.
   ============================================================ */
.hv-booking__ctas .hv-btn--primary:hover,
.hv-booking__ctas .hv-btn--anon:hover {
  background: var(--protect-amber);
  border-color: var(--protect-amber);
  color: var(--ink-900);
}
/* anonymous-contact modal — amber accent on the PROTECT track */
.hv-anon__tag { color: var(--protect-amber-deep); }
.hv-anon__close:hover { color: var(--protect-amber-deep); border-color: var(--protect-amber-deep); }
.hv-anon__opt:hover {
  border-color: rgba(255, 153, 0, 0.5);
  background: var(--protect-amber-tint);
  transform: translateX(3px);
}
.hv-anon__opt:hover .hv-anon__ic { color: var(--protect-amber-deep); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  /* Match the shared layout's single tablet breakpoint (960px) so the shield,
     proc grid, headings and form all collapse together — no in-between state. */
  .protect-proc__grid { grid-template-columns: repeat(2, 1fr); }
  /* Breathing steps down with .hv-section (120 → 84). */
  .protect-why .lcard-grid { margin-top: 56px; grid-template-columns: repeat(2, 1fr); }
  /* Drop the flanking geometry: shield on top, pillars unroll into one stacked
     list with an amber spine (mirrors PEAK's cycle→timeline collapse). */
  .protect-shield-wrap {
    grid-template-columns: 1fr;
    gap: 44px;
    margin-top: 48px;
  }
  /* Smaller crest on phones so it (and its animated draw) never touches the side
     margins; the label box widens + shrinks so "ЗАХИСТ ЦІЛИЙ РІК" fits inside the
     shield instead of spilling over its edges. */
  .protect-shield { order: -1; width: min(240px, 64vw); }
  .protect-shield__label { width: 92%; }
  .protect-shield__label-s { font-size: 9px; letter-spacing: 0.1em; }
  /* Жодної вертикальної лінії збоку — як на PEAK, орієнтиром лишається
     коротка бурштинова риска над заголовком кожного пункту. */
  .protect-pillars {
    text-align: left;
    gap: 24px;
  }
  .protect-pillars--left  { text-align: left; }
  .protect-pillars--right { text-align: left; }
  .protect-pillar::before,
  .protect-pillars--left  .protect-pillar::before,
  .protect-pillars--right .protect-pillar::before { margin: 0 0 12px; }
}
@media (max-width: 560px) {
  .protect-proc__grid { grid-template-columns: 1fr; }
  .protect-why .lcard-grid { margin-top: 44px; grid-template-columns: 1fr; }
}

/* ============================================================
   Експрес-тест на цій сторінці. Кнопки поводяться як у формах: фірмове
   золото у спокої → колір треку на ховері. Цей файл підключається
   останнім, тому перекриває золото з site.css.
   ============================================================ */
.bt-invite .hv-btn--primary:hover,
.bt-sheet .hv-btn--primary:hover {
  background: var(--protect-amber-deep);
  border-color: var(--protect-amber-deep);
  color: var(--cream-50);
}
.bt-prog span { background: var(--protect-amber-deep); }
.bt-opt:hover { border-color: var(--protect-amber-deep); }
.bt-gate__input:focus { border-color: var(--protect-amber-deep); }
.bt-close:hover { color: var(--protect-amber-deep); border-color: var(--protect-amber-deep); }
/* точка на континуумі стоїть там, де стоїть сама програма */
.bt-mini__dot { border-color: var(--protect-amber-deep); left: 50%; }