/* ЁЛКИ 71 — внутренние страницы (виды деревьев, доставка, уход, для бизнеса). Токены из styles.css */

/* ---------- breadcrumbs ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 var(--sp-3); font-size: 13px; line-height: 1.4; color: var(--color-on-dark-55); }
.crumbs a { padding-block: 13px; color: var(--color-on-dark-70); transition: color 320ms var(--ease); }
.crumbs a:hover { color: var(--color-on-dark); }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--color-on-dark-55); }

/* ---------- text hero (no photo) ---------- */
.pg-hero {
  padding: calc(var(--header-h) + var(--sp-5)) var(--side) var(--sp-6);
  background: var(--color-ink);
  color: var(--color-on-dark);
}
.pg-hero h1 { color: var(--color-on-dark); margin-bottom: var(--sp-3); }
.pg-hero__sub { max-width: 48ch; color: var(--color-on-dark-70); margin-bottom: var(--sp-4); }
.pg-hero .reassurance { color: var(--color-on-dark-55); }
.pg-hero a:focus-visible { outline-color: var(--color-accent-on-dark); }
.js .pg-hero .rise { animation: riseFailsafe 1ms linear 2600ms forwards; }

/* photo hero on inner pages: breadcrumbs sit above the heading */
.hero .crumbs { margin-bottom: var(--sp-2); }
.hero__media--top img { object-position: center 20%; }

/* ---------- key facts ---------- */
.pg-facts { padding-block: var(--sp-6); border-bottom: 1px solid var(--color-line); }
.pg-facts__list { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--color-line); }
.pg-facts__item { padding: var(--sp-3) 0; border-bottom: 1px solid var(--color-line); }
.pg-facts dt { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-ink-55); margin-bottom: 6px; }
.pg-facts dd { margin: 0; font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.2; text-wrap: balance; }
@media (min-width: 760px) {
  .pg-facts__list { grid-template-columns: repeat(4, 1fr); column-gap: var(--sp-4); border-top: 0; }
  .pg-facts__item { border-top: 1px solid var(--color-line); border-bottom: 0; padding-bottom: 0; }
}

/* ---------- numbered rows ---------- */
.pg-alt { background: var(--color-bg-alt); }
.pg-rows { border-top: 1px solid var(--color-line); }
.pg-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: var(--sp-2);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--color-line);
}
.pg-row__num { grid-row: span 2; font-family: var(--font-display); font-size: 14px; color: var(--color-accent); padding-top: 4px; }
.pg-row h3 { margin-bottom: 8px; }
.pg-row p { max-width: var(--measure); color: var(--color-ink-70); }
@media (min-width: 860px) {
  .pg-row { grid-template-columns: 56px minmax(200px, 320px) 1fr; column-gap: var(--sp-3); align-items: baseline; }
  .pg-row__num { grid-row: auto; }
  .pg-row h3 { margin: 0; }
}

/* ---------- price block ---------- */
.pg-price__single { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); max-width: 720px; }
.pg-price__num { font-family: var(--font-display); font-size: clamp(40px, 6vw, 72px); line-height: 1; letter-spacing: -0.02em; color: var(--color-accent); white-space: nowrap; }
.pg-price__note { color: var(--color-ink-70); max-width: 34ch; }
.pg-note { margin-top: var(--sp-4); font-size: 14px; color: var(--color-ink-55); max-width: 62ch; }
.pg-more { margin-top: var(--sp-4); max-width: var(--measure); color: var(--color-ink-70); }

/* ---------- species comparison ---------- */
.spec-wrap { overflow-x: auto; margin-inline: calc(var(--side) * -1); padding-inline: var(--side); }
.spec-table { width: 100%; min-width: 520px; max-width: 960px; border-collapse: collapse; }
.spec-table th, .spec-table td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: baseline; font-size: 15px; line-height: 1.35; }
.spec-table thead th { font-family: var(--font-display); font-size: 20px; font-weight: 400; text-transform: uppercase; border-top: 1px solid var(--color-line); }
.spec-table thead th:first-child { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; color: var(--color-ink-55); }
.spec-table tbody th { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-ink-55); white-space: nowrap; }
.spec-table .is-current { color: var(--color-accent); }
.spec-table thead a { padding-block: 12px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-underline-offset 320ms var(--ease); }
.spec-table thead a:hover { text-underline-offset: 7px; }

/* ---------- product figure (cut-out on a toned surface) ---------- */
.pg-look { display: grid; gap: var(--sp-4); align-items: end; }
.pg-look__media { background: var(--color-bg-alt); aspect-ratio: 4 / 5; max-height: 560px; display: flex; align-items: flex-end; justify-content: center; padding-top: var(--sp-3); overflow: hidden; }
.pg-look__media img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; mix-blend-mode: multiply; }
.pg-alt .pg-look__media { background: var(--color-bg); }
@media (min-width: 860px) {
  .pg-look { grid-template-columns: minmax(260px, 380px) 1fr; gap: var(--sp-6); }
}

/* ---------- links on dark surfaces ---------- */
.info .text-link, .pg-hero .text-link { color: var(--color-accent-on-dark); }
.price-table--narrow { max-width: 720px; }
.pg-row h3 .text-link { color: inherit; }
.info__link { margin-top: var(--sp-3); }

/* ---------- short answer (article lead) ---------- */
.pg-lead { max-width: 62ch; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; }
.pg-updated { margin-top: var(--sp-3); font-size: 13px; color: var(--color-ink-55); }

/* rows next to the product photo: the column is narrow, keep the two-column row layout */
@media (min-width: 860px) {
  .pg-look .pg-row { grid-template-columns: 40px 1fr; align-items: start; }
  .pg-look .pg-row__num { grid-row: span 2; }
  .pg-look .pg-row h3 { margin-bottom: 8px; }
}

/* phones: the comparison fits the screen without sideways scrolling */
@media (max-width: 560px) {
  .spec-wrap { overflow: visible; margin-inline: 0; padding-inline: 0; }
  .spec-table { min-width: 0; table-layout: fixed; }
  .spec-table th, .spec-table td { font-size: 13px; padding-right: 8px; }
  .spec-table thead th { font-size: 17px; }
  .spec-table thead th:first-child, .spec-table tbody th { width: 27%; font-size: 10px; letter-spacing: 0.08em; white-space: normal; }
}