/* ============================================================
   fortepiano.ru — production additions on top of the design kit.
   Only things the UI kit didn't ship: 3-col comparison table,
   FAQ, TL;DR callout, source list, "coming soon" cards.
   Everything reuses design tokens from foundations.css.
   ============================================================ */

/* buttons rendered as <a>: .fp-scope a{color:felt} otherwise wins by specificity
   and makes button text the wrong colour. Restore per-variant text colour. */
.fp-scope a.btn-primary{color:var(--fg-onfelt)}
.fp-scope a.btn-dark{color:#fff}
.fp-scope a.btn-secondary{color:var(--ink-800)}
.fp-scope a.btn-ghost{color:var(--ink-700)}
.fp-scope a.btn{text-decoration:none}

/* placeholder: center the note-mark + label as one vertical group inside the
   photo block. keys/blacks stay pinned to the bottom (they are absolutely
   positioned, so flex layout ignores them). Fixes the mark+label sitting too
   high in tall blocks like the article hero. */
.photo{display:flex;flex-direction:column;align-items:center;justify-content:center}
.photo .ph-mark{position:static;transform:none;margin:0 0 8px}
.photo .ph-label{position:static;transform:none;text-align:center;max-width:84%}

/* logo larger in header (wordmark was too small at 26px) */
.hdr-logo{height:38px}
.ftr-logo{height:34px}

/* TL;DR / «Коротко» callout */
.tldr{max-width:var(--maxw-prose);margin:0 auto 30px;background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--felt);border-radius:var(--r-md);padding:20px 24px}
.tldr h2{font-family:var(--font-sans);font-weight:800;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--felt);margin:0 0 12px}
.tldr ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px}
.tldr li{position:relative;padding-left:24px;font-family:var(--font-serif);font-size:16.5px;line-height:1.55;color:var(--ink-800)}
.tldr li::before{content:"";position:absolute;left:0;top:10px;width:11px;height:2px;border-radius:2px;background:var(--felt)}
.tldr li b{color:var(--ink-900);font-weight:700}

/* full-width comparison table (3 columns), styled like .spec */
.cmp3{max-width:var(--maxw-prose);margin:30px auto;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.cmp3 table{width:100%;border-collapse:collapse}
.cmp3 th,.cmp3 td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line);font-family:var(--font-sans);font-size:14.5px;vertical-align:top}
.cmp3 thead th{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink-900);background:var(--paper-2);letter-spacing:-.01em}
.cmp3 tbody tr:last-child td{border-bottom:none}
.cmp3 td:first-child{color:var(--ink-500);font-weight:500;width:34%}
.cmp3 td{color:var(--ink-900);font-weight:600}
.cmp3 tbody tr:nth-child(even) td{background:var(--surface-2)}

/* FAQ */
.faq{max-width:var(--maxw-prose);margin:36px auto}
.faq-item{border-bottom:1px solid var(--line);padding:20px 0}
.faq-item:first-of-type{border-top:2px solid var(--ink-900)}
.faq-q{font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.3;letter-spacing:-.01em;color:var(--ink-900);margin:0 0 8px}
.faq-a{font-family:var(--font-serif);font-size:17px;line-height:1.6;color:var(--ink-700);margin:0}

/* sources / «Основано на» */
.sources{max-width:var(--maxw-prose);margin:40px auto 0;padding-top:22px;border-top:1px solid var(--line)}
.sources h2{font-family:var(--font-sans);font-weight:800;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-500);margin:0 0 14px}
.sources ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.sources li{font-family:var(--font-sans);font-size:13.5px;line-height:1.5;color:var(--ink-600)}
.sources a{color:var(--link)}
.sources .note{margin-top:16px;font-size:13px;color:var(--ink-500);font-style:italic}

/* note / disclaimer inside prose */
.note-box{background:var(--info-tint);border-radius:var(--r-md);padding:14px 18px;margin:24px 0;font-family:var(--font-sans);font-size:14.5px;line-height:1.55;color:var(--ink-800)}

/* "coming soon" card state on homepage */
.card.soon{opacity:.72;pointer-events:none}
.card.soon .card-eye{color:var(--ink-400)}
.badge-soon{background:var(--paper-2);color:var(--ink-500);border:1px solid var(--line-strong)}

/* prose lists + tables for the article body */
.prose ul,.prose ol{margin:0 0 22px;padding-left:24px;display:flex;flex-direction:column;gap:8px}
.prose li{line-height:1.6}
.prose h2{font-family:var(--font-display);font-weight:700;font-size:30px;line-height:1.18;letter-spacing:-.018em;color:var(--ink-900);margin:44px 0 16px;padding-bottom:10px;border-bottom:2px solid var(--ink-900)}

/* figures: infographics + photos */
.fig{max-width:var(--maxw-prose);margin:34px auto}
.fig img,.fig svg{width:100%;height:auto;display:block;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface)}
.fig figcaption{margin-top:10px;font-family:var(--font-sans);font-size:13px;color:var(--ink-500);text-align:center}
.fig.photo-fig img{box-shadow:var(--shadow-sm)}
.fig.product img{max-height:440px;object-fit:contain;padding:22px;background:var(--surface)}
.infographic{max-width:var(--maxw-prose);margin:34px auto}
.infographic svg{width:100%;height:auto;display:block}

/* skip-to-content + small a11y niceties */
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:100;background:var(--ink-900);color:#fff;padding:10px 16px;border-radius:var(--r-md)}

/* always allow wide comparison tables to scroll horizontally instead of
   crushing/overflowing on narrow screens */
.cmp3{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp3 table{min-width:520px}

/* ============================================================
   MOBILE ADAPTATION
   The kit shipped only one breakpoint (980px: hero→1col, grid→2col,
   nav hidden). Below we (1) turn the dead hamburger into a working
   dropdown menu, and (2) properly reflow hero, grids, article body,
   tables, newsletter and footer for tablets and phones.
   ============================================================ */

/* ---- tablet & down: working dropdown nav from the menu button ---- */
@media (max-width:980px){
  .hdr-nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;
    align-items:stretch;gap:2px;margin:0;padding:8px;
    background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--shadow-md)}
  .hdr.nav-open .hdr-nav{display:flex}
  .hdr-nav a{padding:12px 14px;border-radius:var(--r-sm);font-size:16px}
  .wrap{padding:0 22px}
  .hero{padding:32px 0 16px}
  .hero-body{padding:30px 26px}
  .ftr-top{grid-template-columns:1fr 1fr;gap:28px}
  .proscons,.cmp-head,.cmp-row,.grid-2{grid-template-columns:1fr}
}

/* hide desktop hamburger when the full nav is visible (>980) */
@media (min-width:981px){ .hdr-right .hdr-icon{display:none} }

/* ---- phones ---- */
@media (max-width:720px){
  .hdr-search{display:none}            /* free up the header bar */
  .hdr-in{gap:14px;height:62px}
}

@media (max-width:640px){
  .wrap{padding:0 16px}

  /* hero */
  .hero{padding:22px 0 8px}
  .hero-photo{min-height:200px}
  .hero-body{padding:24px 20px;gap:14px}
  .hero-dek{font-size:17px}
  .hero-meta{flex-wrap:wrap;gap:8px}

  /* section rhythm */
  .section{padding:26px 0}
  .sec-head{margin-bottom:20px}
  .sec-head h2{font-size:23px}

  /* cards: single column */
  .grid-3{grid-template-columns:1fr;gap:18px}
  .card .photo{height:200px}

  /* article header + hero image */
  .article{padding:22px 0 40px}
  .art-lead{font-size:18px}
  .art-hero{height:230px;margin:20px auto}
  .byline{gap:10px}
  .byline .acts{gap:6px}

  /* prose: smaller measure-friendly type */
  .prose{font-size:17px;line-height:1.68}
  .prose p{margin:0 0 18px}
  .prose .pull{font-size:20px;padding-left:16px;margin:24px 0}
  .prose h2{font-size:23px;margin:34px 0 14px}
  .prose h3{font-size:21px;margin:30px 0 12px}
  .prose ul,.prose ol{padding-left:20px}

  /* callouts / blocks */
  .tldr{padding:18px 18px;margin-bottom:24px}
  .tldr li{font-size:16px;padding-left:20px}
  .note-box{padding:14px 16px;font-size:14px}
  .figure,.fig,.infographic{margin:24px auto}

  /* comparison table: tighter cells (still scrolls if needed) */
  .cmp3 th,.cmp3 td{padding:11px 13px;font-size:13.5px}
  .cmp3 thead th{font-size:14px}

  /* FAQ */
  .faq{margin:28px auto}
  .faq-q{font-size:17.5px}
  .faq-a{font-size:16px}

  /* newsletter stacks */
  .news{padding:34px 22px;border-radius:var(--r-xl)}
  .news p{font-size:16px}
  .news-form{flex-direction:column;gap:10px}
  .news-form .btn{width:100%;justify-content:center}

  /* footer stacks */
  .ftr{padding:40px 0 28px}
  .ftr-top{grid-template-columns:1fr 1fr;gap:24px 20px}
  .ftr-bottom{flex-direction:column;align-items:flex-start;gap:8px}
}

/* very small phones: footer to a single column */
@media (max-width:400px){
  .ftr-top{grid-template-columns:1fr}
}