/* ==========================================================================
   Санмарин — landing.css
   Стили ТОЛЬКО для новых компонентов SEO-посадочных и блога.
   Все цвета/радиусы/шрифты — на существующих переменных :root из styles.css
   (--espresso, --gold, --gold-lite, --gold-deep, --cream, --paper, --sand,
    --line, --ink, --ink-soft, --grad-gold, --grad-dark, --radius, --shadow…).
   Новых токенов не заводим.
   ========================================================================== */

/* ===== Хлебные крошки ===== */
.crumbs{background:var(--paper);border-bottom:1px solid var(--line)}
.crumbs__inner{display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding-top:12px;padding-bottom:12px;font-family:var(--font-ui);font-size:13px}
.crumbs a{color:var(--gold-deep);font-weight:600}
.crumbs a:hover{color:var(--gold)}
.crumbs__sep{color:var(--ink-soft);opacity:.7}
.crumbs__cur{color:var(--ink-soft)}

/* ===== Hero-мини посадочной ===== */
.lp-hero{position:relative;min-height:40vh;display:flex;align-items:flex-end;
  background-color:#2C2519;background-size:cover;background-position:center;
  background-repeat:no-repeat;color:#F3E9D3;isolation:isolate}
.lp-hero__inner{padding-top:48px;padding-bottom:40px}
.lp-hero__title{font-family:var(--font-display);font-weight:700;color:#F7EFDD;
  font-size:clamp(30px,4.4vw,50px);line-height:1.1;max-width:900px;
  text-shadow:0 2px 18px rgba(0,0,0,.35)}
.lp-hero__badge{display:inline-block;margin-top:18px;background:var(--grad-gold);
  color:var(--espresso);font-family:var(--font-ui);font-weight:700;font-size:15px;
  padding:9px 18px;border-radius:999px;box-shadow:var(--glow-gold)}
.lp-hero__badge b{font-size:17px}

/* ===== Читаемая колонка контента / .prose ===== */
.lp-article{max-width:820px;margin-inline:auto}
.lp-introwrap{padding-bottom:40px}
.prose{max-width:820px;margin-inline:auto;color:var(--ink);font-size:17px;line-height:1.72}
.prose>*:first-child{margin-top:0}
.prose h2{font-family:var(--font-display);font-weight:700;color:var(--espresso);
  font-size:clamp(24px,3vw,33px);line-height:1.18;margin:1.6em 0 .5em}
.prose h2::after{content:"";display:block;width:52px;height:3px;margin-top:14px;
  background:var(--grad-gold);border-radius:3px}
.prose h3{font-family:var(--font-display);font-weight:700;color:var(--espresso);
  font-size:clamp(20px,2.3vw,25px);line-height:1.2;margin:1.4em 0 .4em}
.prose p{margin:0 0 1.05em}
.prose a{color:var(--gold-deep);font-weight:600;text-decoration:underline;
  text-decoration-color:rgba(184,148,47,.4);text-underline-offset:2px}
.prose a:hover{color:var(--gold);text-decoration-color:var(--gold)}
.prose strong{color:var(--ink);font-weight:700}
.prose ul,.prose ol{margin:0 0 1.1em;padding-left:0;list-style:none;display:grid;gap:10px}
.prose ol{counter-reset:li}
.prose li{position:relative;padding-left:32px;color:var(--ink-soft)}
.prose ul li::before{content:"✓";position:absolute;left:0;top:1px;color:var(--espresso);
  background:var(--grad-gold);width:21px;height:21px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:700}
.prose ol li{counter-increment:li}
.prose ol li::before{content:counter(li);position:absolute;left:0;top:1px;color:var(--espresso);
  background:var(--grad-gold);width:21px;height:21px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:700;font-family:var(--font-ui)}
.prose blockquote{margin:1.3em 0;padding:16px 22px;border-left:4px solid var(--gold);
  background:var(--cream);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-family:var(--font-display);font-style:italic;font-size:19px;color:var(--ink)}
.prose blockquote p{margin:0}
.prose img{border-radius:var(--radius);margin:1.2em 0;box-shadow:var(--shadow-sm);width:100%;height:auto}
.prose table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:15.5px}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.prose th{background:var(--cream);font-family:var(--font-ui);color:var(--espresso)}

/* ===== FAQ (details/summary со стрелкой) ===== */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:12px}
.faq__item{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden}
.faq__item summary{list-style:none;cursor:pointer;position:relative;
  padding:18px 52px 18px 20px;font-family:var(--font-ui);font-weight:700;font-size:16px;
  color:var(--espresso);transition:color .15s}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"";position:absolute;right:20px;top:50%;
  width:10px;height:10px;border-right:2.5px solid var(--gold-deep);
  border-bottom:2.5px solid var(--gold-deep);transform:translateY(-70%) rotate(45deg);
  transition:transform .2s ease}
.faq__item[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq__item summary:hover{color:var(--gold-deep)}
.faq__a{padding:0 20px 18px;color:var(--ink-soft);font-size:15.5px;line-height:1.65}

/* ===== Перелинковка «Куда ещё летим» ===== */
.lp-links{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lp-linkcard{position:relative;border-radius:var(--radius);overflow:hidden;min-height:132px;
  display:flex;align-items:flex-end;color:#fff;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease}
.lp-linkcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.lp-linkcard__bg{position:absolute;inset:0;z-index:0;background-size:cover;
  background-position:center;background-repeat:no-repeat;transition:transform .4s ease}
.lp-linkcard:hover .lp-linkcard__bg{transform:scale(1.06)}
.lp-linkcard::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(23,17,11,0) 34%,rgba(23,17,11,.85) 100%)}
.lp-linkcard__name{position:relative;z-index:2;padding:16px;font-family:var(--font-display);
  font-weight:700;font-size:20px}

/* ===== CTA-блок на тёмном фоне ===== */
.lp-cta{background:var(--grad-dark);color:#F3E9D3;padding:56px 0}
.lp-cta__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.lp-cta__text{margin:0;max-width:640px;font-family:var(--font-display);
  font-size:clamp(20px,2.6vw,27px);line-height:1.35;color:#F7EFDD}
.lp-cta__btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* ===== Блог: статья ===== */
.blogpost__inner{max-width:820px;margin-inline:auto}
.blogpost__date{font-family:var(--font-ui);font-size:13px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 12px}
.blogpost__title{font-family:var(--font-display);font-weight:700;color:var(--espresso);
  font-size:clamp(28px,4vw,44px);line-height:1.14;margin:0 0 26px}

/* ===== Блог: сетка карточек ===== */
.bloggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.blogcard{display:flex;flex-direction:column;gap:8px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);padding:22px;
  box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease}
.blogcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.blogcard__date{font-family:var(--font-ui);font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep)}
.blogcard__title{font-family:var(--font-display);font-weight:700;font-size:21px;
  line-height:1.22;color:var(--espresso)}
.blogcard__desc{color:var(--ink-soft);font-size:15px;line-height:1.55}
.blogcard__more{margin-top:auto;font-family:var(--font-ui);font-weight:700;font-size:14px;
  color:var(--gold-deep)}
.blogcard:hover .blogcard__more{color:var(--gold)}
.blog-empty{color:var(--ink-soft);font-size:16px}

/* ===== Responsive ===== */
@media (max-width:900px){
  .lp-links{grid-template-columns:repeat(2,1fr)}
  .bloggrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .lp-hero{min-height:32vh}
  .lp-hero__inner{padding-top:32px;padding-bottom:28px}
  .prose,.faq,.lp-article,.blogpost__inner{max-width:none}
  .prose{font-size:16px}
  .lp-links{grid-template-columns:1fr 1fr}
  .bloggrid{grid-template-columns:1fr}
  .lp-cta{padding:40px 0}
  .lp-cta__btns{width:100%}
  .lp-cta__btns .btn{flex:1 1 auto}
  .faq__item summary{font-size:15px;padding:16px 46px 16px 16px}
}