/* ═══════════════════════════════════════════════════════════════════
   portal-compact.css — общий «слой» компактной типографики и плотных
   карточек. Подключается ПОСЛЕ wardrobe-pages.css / color-guide-pages.css /
   wardrobe-lesson-pages.css / color-section-pages.css, чтобы переопределять
   их «грубые» дефолты.

   Эталон визуальной системы: chernyi-vek.html, lichnyy-stil.html, cvet.html.

   Применяется к: товарные (zhaket-posadka, belaya-rubashka, dzhinsy, yubki,
   platya, bryuki, trikotazh, futbolka-i-top, bluzy, palto, obuv, sumki,
   aksessuary), тканевые (8 шт.), цветовые (13 cvet-*.html), сочетания
   (monohrom, baza-i-akcent, kontrastnye-sochetaniya, tri-cveta-v-obraze,
   sochetaniya-cvetov, sezonnye-cveta, cvetovye-pary, cvet-obuvi-i-sumki,
   kakie-cveta-idut, palitra-garderoba), хабы (bazovye-veshchi,
   faktury-i-tkani, kapsuly), макияж — частично.

   Дата: 2026-05-13.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero h1,
.hero .h1,
section.hero h1{
  font-size:clamp(34px,3.8vw,50px) !important;
  line-height:1.04 !important;
  max-width:760px;
}
.hero{
  min-height:auto !important;
  padding:48px 0 32px !important;
}
.hero .lead,
section.hero .lead,
.color-section-hero .lead{
  font-size:clamp(15.5px,1.4vw,17.5px) !important;
  line-height:1.6 !important;
  max-width:560px;
  margin-top:18px !important;
}
.hero-note{margin-top:22px !important;}
.tag{
  font-size:11.5px !important;
  padding:5px 11px !important;
  font-weight:680;
  letter-spacing:.02em;
}
.editorial-photo{
  min-height:auto !important;
  box-shadow:0 18px 46px rgba(17,17,17,.12);
}
.editorial-photo img{
  height:auto !important;
  aspect-ratio:4/5;
  object-fit:cover;
}

/* ── Section typography ───────────────────────────────────────────── */
.section{
  padding:60px 0 !important;
}
.section-head{
  margin-bottom:24px !important;
}
.section-head h2,
.section h2{
  font-size:clamp(26px,3vw,38px) !important;
  line-height:1.08 !important;
  max-width:760px;
}
.section-head p,
.section-intro{
  font-size:15.5px !important;
  line-height:1.6 !important;
  margin-top:14px !important;
  max-width:760px;
}

/* ── History / timeline ───────────────────────────────────────────── */
.timeline{margin-bottom:24px !important;gap:0 !important;}
.moment{
  grid-template-columns:80px minmax(0,1fr) !important;
  padding:14px 0 !important;
  gap:16px !important;
}
.moment .year,
.year{
  font-size:22px !important;
  line-height:1.1 !important;
}
.moment p{font-size:14.5px !important;line-height:1.6 !important;}
.history-grid{
  grid-template-columns:.86fr 1.14fr !important;
  gap:28px !important;
  margin-top:24px !important;
  align-items:start !important;
}
.museum-frame img{
  height:auto !important;
  max-height:520px;
  aspect-ratio:4/5;
  object-fit:contain;
}

/* ── Useful cards (3-column analysis) ─────────────────────────────── */
.useful-grid{gap:16px !important;}
.useful-card{
  box-shadow:0 8px 24px rgba(17,17,17,.07) !important;
  background:#fff !important;
}
.useful-card figure{
  min-height:auto !important;
  aspect-ratio:4/3 !important;
  background:#fffaf0 !important;
}
.useful-card figure img{
  height:100% !important;
  object-fit:contain !important;
}
.useful-card .useful-copy{
  padding:18px 20px !important;
  gap:10px !important;
}
.useful-card .useful-copy h3{
  font-size:21px !important;
  line-height:1.1 !important;
  font-weight:520 !important;
}
.useful-card .useful-copy p{
  font-size:14px !important;
  line-height:1.6 !important;
}

/* ── Lesson cards (dark cards "Как носить" / "Виды") ───────────────── */
.lesson-grid{gap:16px !important;}
.lesson-card{
  min-height:auto !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(189,139,46,.14), transparent 34%),
    linear-gradient(145deg, rgba(67,52,42,.88), rgba(35,29,25,.86)),
    rgba(43,37,33,.84) !important;
  border:1px solid rgba(189,139,46,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 18px 44px rgba(43,32,24,.13) !important;
}
.lesson-card .lesson-media{
  height:auto !important;
  aspect-ratio:5/3 !important;
  background:#fffaf0 !important;
}
.lesson-card .lesson-media img{
  height:100% !important;
  object-fit:contain !important;
}
.lesson-card .lesson-media.illustrated{
  height:auto !important;
  aspect-ratio:5/3 !important;
}
.lesson-card .lesson-copy{
  padding:18px 22px !important;
}
.lesson-card h3,
.lesson-card .lesson-copy h3{
  font-size:21px !important;
  line-height:1.1 !important;
  font-weight:520 !important;
  margin-bottom:8px !important;
}
.lesson-card p,
.lesson-card .lesson-copy p{
  font-size:14px !important;
  line-height:1.6 !important;
  color:rgba(250,246,238,.76) !important;
}

/* ── Formula cards ────────────────────────────────────────────────── */
.formula-grid{gap:18px !important;}
.formula{
  box-shadow:0 14px 36px rgba(17,17,17,.09) !important;
}
.formula img{
  height:auto !important;
  aspect-ratio:4/5 !important;
  object-fit:cover !important;
}
.formula.illustrated img{
  height:auto !important;
  aspect-ratio:1/1 !important;
  object-fit:contain !important;
  background:#fffaf0 !important;
}
.formula .formula-copy{
  padding:18px 22px !important;
}
.formula h3,
.formula .formula-copy h3{
  font-size:20px !important;
  line-height:1.1 !important;
  font-weight:520 !important;
  margin-bottom:8px !important;
}
.formula p,
.formula .formula-copy p{
  font-size:13.5px !important;
  line-height:1.55 !important;
  margin-bottom:0 !important;
}
.formula ul{
  margin-top:12px !important;
  gap:5px !important;
  font-size:13px !important;
}
.formula li{font-size:13px !important;}

/* ── Principle / directory / scenario cards ───────────────────────── */
.principle-card{
  padding:20px 22px !important;
  border-radius:8px;
  background:#fff !important;
  box-shadow:0 5px 16px rgba(17,17,17,.06) !important;
  border-top:3px solid #bd8b2e;
}
.principle-card h3{
  font-size:17px !important;
  line-height:1.15 !important;
  font-weight:520 !important;
  margin-bottom:10px !important;
}
.principle-card p{
  font-size:13.5px !important;
  line-height:1.6 !important;
}

.directory-card{
  box-shadow:0 10px 28px rgba(17,17,17,.08) !important;
}
.directory-card figure{
  height:auto !important;
  aspect-ratio:4/5 !important;
}
.directory-card figure img{
  height:100% !important;
  object-fit:cover !important;
  object-position:var(--pos,50% 38%);
}
.directory-card .directory-copy{
  padding:18px 22px !important;
}
.directory-card .directory-copy h3{
  font-size:19px !important;
  line-height:1.1 !important;
  font-weight:520 !important;
  margin-bottom:8px !important;
}
.directory-card .directory-copy p{
  font-size:13.5px !important;
  line-height:1.6 !important;
}
.directory-card .directory-copy ul{
  margin-top:10px !important;
  font-size:13px !important;
}
.directory-card .directory-copy li{font-size:13px !important;}

.scenario-card{
  padding:22px 24px !important;
  border-radius:8px;
}
.scenario-card h3,
.scenario-card h4{
  font-size:17px !important;
  line-height:1.15 !important;
  font-weight:520 !important;
  margin-bottom:10px !important;
}
.scenario-card p{
  font-size:13.5px !important;
  line-height:1.6 !important;
}

.checklist-item{
  padding:18px 20px !important;
}
.checklist-item h3{
  font-size:15.5px !important;
  line-height:1.15 !important;
  font-weight:520 !important;
  margin-bottom:8px !important;
}
.checklist-item p{
  font-size:13px !important;
  line-height:1.55 !important;
}

/* ── Dark sections ─────────────────────────────────────────────────── */
.dark-section{padding:60px 0 !important;}
.dark-section .section-head p{font-size:15.5px !important;}

/* ── Color guide pages (cvet-*.html) ──────────────────────────────── */
.color-card,
.catalog-card.color-card{
  min-height:auto !important;
}
.color-card strong,
.catalog-card.color-card strong{
  font-family:Georgia,"Times New Roman",serif;
  font-size:16px !important;
  line-height:1.15 !important;
  font-weight:520 !important;
}
.color-card span,
.catalog-card.color-card span{
  font-size:12.5px !important;
  line-height:1.5 !important;
  color:var(--muted);
}
.color-card small{font-size:10.5px !important;}
.swatches{margin-top:auto !important;gap:5px !important;}
.swatches span{
  min-height:24px !important;
  border:1px solid rgba(17,17,17,.08) !important;
}

/* color combos & study */
.color-info-card{padding:20px 22px !important;}
.color-info-card strong{font-size:19px !important;line-height:1.1 !important;}
.color-info-card span{font-size:13.5px !important;line-height:1.6 !important;}
.color-study-copy .essay{font-size:14.5px !important;line-height:1.7 !important;}
.color-photo-card strong{font-size:18px !important;line-height:1.1 !important;}
.color-photo-card span{font-size:13.5px !important;}
.color-wide-note{
  padding:22px 24px !important;
  font-size:15px !important;
  line-height:1.65 !important;
}
.color-mini-row strong{font-size:14.5px !important;}

/* ── Question/type/scenario cards in lichnyy-stil family ──────────── */
.question-card h3,
.type-card h3,
.scenario-card h3{
  font-size:20px !important;
  line-height:1.15 !important;
}

.analysis-card h3{
  font-size:clamp(24px,3vw,32px) !important;
  line-height:1.1 !important;
}
.analysis-card{
  min-height:auto !important;
  padding:22px !important;
}

/* ── Related / next ────────────────────────────────────────────────── */
.related{padding-bottom:80px !important;}
.related-box{
  padding:28px !important;
  gap:28px !important;
}
.related-box h2{font-size:clamp(22px,2.4vw,28px) !important;}
.related-box p{font-size:15.5px !important;line-height:1.6 !important;}
.next-item{
  padding:13px 0 !important;
  font-size:14px !important;
  font-weight:680;
}

/* ── Lesson-pages (faktury, kapsuly, etc) ──────────────────────────── */
.principle-grid .principle-card h3{font-size:17px !important;}
.principle-grid .principle-card p{font-size:13.5px !important;}
.directory-card .directory-copy h3{font-size:19px !important;}
.checklist-item h3{font-size:15.5px !important;}

/* ── Insight strip in hubs (.insight-strip, .ins, .strip) ──────────── */
.insight-strip .ins h3{font-size:18px !important;}
.insight-strip .ins p{font-size:13.5px !important;}

/* ── Quiz block (если есть) ────────────────────────────────────────── */
.quiz{padding:22px !important;}
.quiz h3{font-size:18px !important;}
.quiz p{font-size:14px !important;}

/* ── Table cells (compare-table, lesson-table) ────────────────────── */
.compare-table > div,
.lesson-table .lesson-row span{font-size:13.5px !important;}

/* ── Responsive: keep grids sensible on tablets ───────────────────── */
@media(max-width:980px){
  .hero{padding:32px 0 24px !important;}
  .editorial-photo img{aspect-ratio:5/4;}
  .history-grid{grid-template-columns:1fr !important;}
  .lesson-grid{grid-template-columns:1fr 1fr !important;}
  .formula-grid{grid-template-columns:1fr 1fr !important;}
}
@media(max-width:620px){
  .lesson-grid{grid-template-columns:1fr !important;}
  .formula-grid{grid-template-columns:1fr !important;}
  .useful-grid{grid-template-columns:1fr !important;}
}

/* ── Full-width learning text ───────────────────────────────────────
   Этот файл подключается поздно, поэтому повторяем правило здесь:
   лиды и учебные абзацы должны занимать ширину своего блока. */
.portal-content :where(
  .lead,
  .section-intro,
  .section-lead,
  .sec-lead,
  .portal-section-head > p,
  .section-head > p,
  .essay,
  .v2-essay,
  .intro-essay,
  .section-text,
  .lesson-intro,
  .care-essay,
  .quality-essay,
  .link-note,
  .ofis-essay,
  .sv-essay,
  .lifestyle-essay,
  .three-words-intro,
  .section-copy
) {
  max-width: 100% !important;
  width: 100%;
}

.portal-content :where(
  .essay,
  .v2-essay,
  .intro-essay,
  .ofis-essay,
  .sv-essay,
  .lifestyle-essay
) > p {
  max-width: 100% !important;
}