/* /artikkeli + /artikkelit hubs — live layout MEASURED 2026-07-19
 * @1440 (scratch recon w2c-r3): beige-2 section, 1350 container,
 * sidebar quarter (serif Aihealueet over 1px underline, bold 18.2px
 * green links), main 3/4 with ivory one-per-row cards (image half |
 * details half padded 42x56), flat right-aligned Edellinen/Seuraava.
 * Mobile: live collapses the sidebar into a dropdown -> details/
 * summary no-JS equivalent. */

.section-artikkeli main, .section-artikkelit main {
  max-width: none; padding: 0; }
/* beige is scoped to the LISTING wrapper — article detail pages share
   the section but keep their own layout (round-3 task 4) */
.listing-bleed { background: var(--ll-beige); }

/* r4 verify: live ivory panel (cat-bav-wrapper) runs from the section
   TOP to its BOTTOM and bleeds past the viewport's left edge; main
   column starts x=383 (sidebar col ~318 + 20 gap) */
.listing-layout { display: grid;
  /* r6 census: live sidebar col 318 @1440 -> rows start x=383 (ours
     sat 18px right of live with the 21rem pin) */
  grid-template-columns: 19.875rem 1fr; gap: 1.25rem;
  max-width: var(--ll-shell); margin: 0 auto;
  padding: 0; }  /* round 3: main col 993 (sidebar 336 + 20 gap) */
.listing-main { padding: 4.125rem 0 0; }  /* live: ~66 top, ~0 below
  the Seuraava row (pagination carries its own padding) */
.listing-main h1 { font-size: var(--ll-fs-h2); margin: 0 0 1rem; }
/* W5.3 owner catch 2026-07-24: live's ivory panel bleeds AT MOST 5vw
   past the container — beyond ~1600px viewports a beige gutter shows
   left of it (live x=64 @1920, 352 @2560); the uncapped bleed painted
   ivory to the screen edge. Caps change nothing below ~1600. */
.aihealueet { background: var(--ll-bg);
  margin-left: max(-5vw,
    min(0rem, calc((var(--ll-shell) - 100vw) / 2 - 1.7rem)));
  padding: 4.5rem 1.5rem 1.5rem
    min(calc(5vw + 1px),
      max(1.7rem, calc((100vw - var(--ll-shell)) / 2 + 1.7rem))); }

.aihealueet-head { font-family: var(--ll-font-heading);
  color: var(--ll-green); font-size: 1.625rem; font-weight: 400;
  margin: 0.5rem 0; }
.aihealueet-underline { height: 1px; background: var(--ll-green);
  width: 90%; margin: 0.45rem 0 2.2rem; }
.aihealueet-list { list-style: none; margin: 0; padding: 0; }
.aihealueet-list a { display: block; color: var(--ll-green);
  font-size: 1.1375rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; margin: 0 0 1.42rem; }
.aihealueet-mobile { display: none; }

.article-rows { list-style: none; margin: 0; padding: 0; }
.article-row { display: grid; grid-template-columns: 1fr 1fr;
  background: var(--ll-bg); margin-bottom: 0.625rem; }
.article-row-img img, .article-row-img picture { display: block;
  width: 100%; height: 100%; }
.article-row-img { position: relative; }  /* r4: live rows are
  content-driven 279-335, no fixed floor */
.article-row-img img { position: absolute; inset: 0; height: 100%;
  object-fit: cover; }
.article-row-details { padding: 2.625rem 3.5rem; display: flex;
  flex-direction: column; align-items: flex-start; }
.article-row-title { text-decoration: none; }
/* D4 (2026-07-24): live hub listing titles scale (blog-list-page-title
   measured 14.4/18.6/20.3/20.3/23.2/23.2) — 1.45vw < 1440, then fixed
   steps; the 1.27rem pin was the 1440-regime value alone. */
.article-row-title h3 { font-size: calc(1.45 * var(--ll-r));
  font-weight: 400;
  line-height: 1.05; margin: 0; }  /* D5: one 1.45R law at every
  width incl. mobile 17.4 (@390 measured) — replaces the D4 steps */
.article-row-excerpt { font-size: var(--ll-fs-base); line-height: 1.44;
  margin: 2.5rem 0 1.25rem; }
.article-row-more { color: var(--ll-green); font-size: 0.875rem; }

/* live 1920 (s9-hub2): rows col 1180 (sidebar+gap 420), thumbs 590,
   dominant row height 332 */
@media (min-width: 120rem) {
  /* r6: live rows start x=560 at 1920/2560 -> sidebar+gap 400.
     D8: gap 2.5rem -> main col 1180, thumbs 590 == live (the 1.25rem
     gap left them 600) */
  .listing-layout { grid-template-columns: 23.75rem 1fr;
    gap: 2.5rem; }
  .article-row { min-height: 20.75rem; }
}

.pagination-next { display: flex; justify-content: flex-end;
  gap: 0.625rem; padding: 1.25rem 0; }
.page-btn { background: var(--ll-bg); color: var(--ll-text);
  font-size: 0.875rem; padding: 0.5625rem 2.1875rem;
  border-radius: 2px; }

@media (max-width: 991px) {
  /* D5 (live probed @390): the category bar sits right under the
     header (live cat-bav-wrapper: x=20 w=351 h=85 top=60, Ivory bg,
     serif 24 label CENTERED, chevron AFTER the text), h1 follows 28px
     below at x=20 — our old paddings stacked ~170px of empty band. */
  .listing-layout { grid-template-columns: 1fr; padding-top: 0;
    gap: 0; }
  .listing-main { padding: 0 20px; }
  .listing-main h1 { margin-top: 1.75rem; }
  .aihealueet { padding: 0; }
  .aihealueet-desk { display: none; }
  .aihealueet-mobile { display: block; margin: 0 20px; }
  .aihealueet-mobile summary { cursor: pointer; list-style: none;
    text-align: center; padding: 1.75rem 0; background: var(--ll-bg); }
  .aihealueet-mobile summary .aihealueet-head { font-size: 24px;
    line-height: 1.2; margin: 0; display: inline; }
  .aihealueet-mobile summary::after { content: " ▾";
    color: var(--ll-green); }
  .aihealueet-mobile[open] summary::after { content: " ▴"; }
  .aihealueet-mobile summary::before { content: none; }
  .aihealueet-mobile .aihealueet-list { margin: 0;
    padding: 0 1.25rem 1.25rem; background: var(--ll-bg); }
}
@media (max-width: 991px) {
  /* r6: live stacks the listing rows for the WHOLE <=991 band
     (tablet 768 showed full-width images over text, ours kept the
     desktop 2-col rows); rows inset 5vw with 16:9 thumbs (351x197
     @390) — ours ran full-bleed 390x224 */
  .article-row { grid-template-columns: 1fr; margin: 0 0 0.625rem; }
  /* D5: live mobile card titles are centered (computed) */
  .article-row-details h2, .article-row-details h3 {
    text-align: center; }
  .article-row-img { min-height: 0; aspect-ratio: 16 / 9; }
  .article-row-img img { position: absolute; }
  .article-row-details { padding: 1.5rem 1.25rem 2rem; }
  .article-row-excerpt { margin-top: 1.25rem; }
}

/* article detail — live band/sidebar/FAQ (measured 2026-07-19 on
   /artikkeli/kaytetyn-auton-takuu; band's "bckg-green-2" class RENDERS
   beige #e1dbd4; sidebar boxes moss/moss/warm-gray radius 14 pad
   28 56 56; share 42px green rounded-7 squares; FAQ wrapper ivory
   radius 7, max 880 centered) */
.article-live { max-width: none; margin: 0; }
.article-band { background: var(--ll-beige); }
.article-band-inner { max-width: var(--ll-shell); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 28.125rem;
  align-items: stretch; }
.article-band-text { padding: 1.5rem var(--ll-sp-6) 1.5rem 7rem;
  align-self: center; }
.article-band-text h1 { font-size: var(--ll-fs-h2); margin: 1rem 0;
  max-width: 41rem; }  /* live h1 col 655 @1440, 764 @1920 */
/* r4 verify: live band DOM is 421 but its top 118 sits under the
   fixed nav — VISIBLE band is ~303; our header is in-flow, so the
   band itself must be 303 */
.article-band-img { position: relative; min-height: 18.9rem; }
/* r4: live band image is 518 wide and bleeds past the viewport edge */
.article-band-img img { position: absolute; inset: 0;
  width: calc(100% + 4.25rem); max-width: none;
  height: 100%; object-fit: cover; }
.article-band { overflow: hidden; }
/* muted gray fails 4.5:1 on the beige band (axe) — green passes */
.article-band .byline, .article-band .breadcrumb,
.article-band .breadcrumb [aria-current],
.article-band .breadcrumb li + li::before { color: var(--ll-green); }
.share-label { color: var(--ll-green); font-size: var(--ll-fs-base);
  font-weight: 500; margin: 1rem 0 0.875rem; }
.share-row { display: flex; gap: 0.875rem; }
.share-btn { display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 7px;
  background: var(--ll-green); color: var(--ll-bg); }

.article-layout { max-width: var(--ll-shell); margin: 0 auto; display: grid;
  grid-template-columns: minmax(0, 1fr) 28.125rem; gap: 2rem;
  padding: 4.5rem var(--ll-sp-6) 3rem 7rem; }
.article-main { max-width: 41rem; }
/* live 1920: text col widens 655 -> 780, content indent 112 -> 133
   (s9-art probe 2026-07-22) */
@media (min-width: 120rem) {
  .article-layout { padding-left: 8.3125rem; }
  .article-main { max-width: 48.75rem; }
  .article-band-text { padding-left: 8.3125rem; }
  .article-band-text h1 { max-width: 47.75rem; }
  /* r6: live band image col grows to 40vw (768 @1920, img x=1227),
     visible band 359; at >=2400 the photo's 16:9 height takes over
     (22.5vw incl. the 118px slice live hides under its fixed nav) */
  .article-band-inner { grid-template-columns: 1fr 33.3125rem; }
  .article-band-img { min-height: 22.4375rem; }
  .article-band-img img { width: calc(100% + 14.6875rem); }
}
@media (min-width: 150rem) {
  .article-band-img { min-height: calc(22.5vw - 118px); }
}
.article-main h2, .article-main h3 { font-size: var(--ll-fs-h2); }  /* live 36.75 */
.article-main p { margin: 0 0 0.625rem; }  /* r4: live p margin 0 0 10 */
.article-side { display: flex; flex-direction: column; gap: 1.25rem;
  align-items: flex-start;
  padding-left: 1.5rem; }  /* r4: live boxes left-align at x=945 */
.side-box { border-radius: 14px; padding: 1.75rem 3.5rem 3.5rem;
  width: 26.9rem; }  /* r4 "430 wide" = the 1440 value; D4 regime below */
/* D4 (2026-07-24): live side boxes = article row / 3 - 20px col pads,
   row = shell regime (90vw | 1350 @1440 | 1600 @1920): measured
   278/364/430/430/513/513 at the 6-width matrix. */
@media (min-width: 62rem) { .side-box { width: calc(30vw - 20px); } }
@media (min-width: 90rem) { .side-box { width: 26.875rem; } }
@media (min-width: 120rem) { .side-box { width: 32.0625rem; } }
.side-author, .side-contact { background: var(--ll-moss); }
.side-latest { background: var(--ll-gray); }
/* D4p2 (live probed on two authors at 6 widths): the author box
   SHRINKS TO FIT the name line (Minna 263/342/374/374/424/424; longer
   names cap at the sidebar column and wrap) — the 23.4rem pin was
   Minna's 1440 value. Pads 2R top / 4R sides+bottom, left-aligned
   content, avatar 15R (149/192/210/210/240/240 — the r6 "240" was the
   >=1920 value). */
.side-author { text-align: left; width: fit-content; max-width: 100%;
  padding: calc(2 * var(--ll-r)) calc(4 * var(--ll-r))
    calc(4 * var(--ll-r)); }
.side-author-img { width: calc(15 * var(--ll-r));
  height: calc(15 * var(--ll-r)); margin: 0;
  border-radius: 50%; overflow: hidden;
  background: var(--ll-gray); }
.side-author-img img { width: 100%; height: 100%; object-fit: cover;
  object-position: top; }
.side-author-name { text-decoration: none; }
.side-author-name h3 { font-size: var(--ll-fs-h2); font-weight: 400;
  margin: 1.25rem 0 0.5rem; }  /* round 3: live name ~36.75 */
.side-author-bio { display: none; }  /* r4: live author box = photo,
  name, title only — no bio text */
.side-box h4 { font-family: var(--ll-font-heading);
  color: var(--ll-green); font-size: var(--ll-fs-h3); font-weight: 400;
  margin: 0 0 0.75rem; }  /* r6: live sidebar h4 = header-m
  (26.25/30/26.4 across widths; the 1.27rem pin read 20.3) */
.side-contact p { color: var(--ll-green); font-size: var(--ll-fs-base);
  margin: 0 0 2rem; }
.side-btn { display: block; background: var(--ll-beige);
  color: var(--ll-green); font-weight: 600; font-size: var(--ll-fs-base);
  text-align: center; text-decoration: none; border-radius: 999px;
  padding: 0.74rem 1rem; margin-bottom: 1.25rem; }
.side-latest ul { list-style: none; margin: 0; padding: 0; }
/* round 3: live box is AIRY — links 14/20 fw400 with ~31px gaps,
   heading 26.25 (r6: heading = the --ll-fs-h3 token above; links =
   body default so they scale 14/16/12) */
.side-latest a { display: block; color: var(--ll-green);
  font-size: var(--ll-fs-small); font-weight: 400; line-height: 1.43;
  text-decoration: none; margin-bottom: 1.9rem; }

/* r4 measured: live FAQ = separate ivory CARDS per item (pad 28/56,
   radius 14, 14px gaps, question 22.75px), transparent wrapper */
.faq { background: var(--ll-beige); padding: 4rem var(--ll-sp-6) 5rem; }
.faq-inner { max-width: var(--ll-shell); margin: 0 auto; }
.faq h2 { text-align: center; font-size: var(--ll-fs-h2); margin: 0 0 2.5rem; }
/* W5.3 owner catch 2026-07-24: live's FAQ card column is 8/12 of the
   12-col row minus the 2x10px column pads; the row is the shell at
   >=1440 (1350/1600) and 90vw in the 992-1439 band — the old 55rem
   pin was the 1440 value only. Tablet row = 86vw; mobile cards run
   90vw. Live/island <=1px at 1920/1440/1280/1100/992/768/390. */
.faq-wrapper { max-width: calc(60vw - 20px); margin: 0 auto; }
@media (min-width: 90rem) {
  .faq-wrapper { max-width: calc(var(--ll-shell) * 2 / 3 - 20px); }
}
@media (min-width: 48rem) and (max-width: 61.9375rem) {
  /* live tablet cards sit 40px inside the wrapper (item 561 @768) */
  .faq-wrapper { max-width: calc(86vw - 20px); padding: 0 40px; }
}
@media (min-width: 30rem) and (max-width: 47.9375rem) {
  /* live 480-767: same 86vw row as tablet, no card inset (496 @600) */
  .faq-wrapper { max-width: calc(86vw - 20px); }
}
@media (max-width: 29.9375rem) {
  .faq { padding-left: 5vw; padding-right: 5vw; }
  .faq-wrapper { max-width: none; }
}
/* D7 (2026-07-24, live measured at 6 widths): the whole FAQ rhythm is
   the R law — radius 1R (9.9/12.8/14/14/16/16), gap 1R, pads 2R/4R,
   card h content-driven 94/111/118/118/131/131 (q at 1.625R, lh 1.35,
   16px margins), pitch = h + 1R (103/124/132/132/146/147). The old
   14px/118px pins were the 1440 values — they matched live ONLY at
   1440/1680, which is exactly why the sweep agents' numbers
   conflicted (they measured different widths). */
.faq-item { background: var(--ll-bg);
  border-radius: calc(1 * var(--ll-r));
  margin-bottom: calc(1 * var(--ll-r)); }
.faq-item summary { display: flex; align-items: flex-start;
  justify-content: space-between; cursor: pointer; list-style: none;
  padding: calc(2 * var(--ll-r)) calc(4 * var(--ll-r)); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: var(--ll-fs-pl); font-weight: 400;
  line-height: 1.35; margin: 1rem 0; }
.faq-arrow { align-self: center; }
.faq-arrow { color: var(--ll-green); font-size: 1.75rem; line-height: 1;
  transition: transform .15s; }
.faq-item[open] .faq-arrow { transform: rotate(90deg); }
.faq-answer { padding: 0 calc(4 * var(--ll-r)) calc(2 * var(--ll-r));
  font-size: var(--ll-fs-small); }  /* r6: live answers = body
  default (14/16/12), not the 15.75 text-block size */

@media (max-width: 991px) {
  .article-band-inner { grid-template-columns: 1fr; }
  /* r6: live mobile band image is inset 5vw each side (351 wide
     @390), not full-bleed */
  .article-band-img { order: -1; min-height: 12.3rem;
    margin: 0 5vw; }  /* live 197 */
  .article-band-text { padding: 2rem 1.5rem; }
  /* minmax(0,1fr): plain 1fr = minmax(auto,1fr) and wide content
     (Lue myös cards) blew the column to 454px on a 390 screen */
  .article-layout { grid-template-columns: minmax(0, 1fr);
    padding: 2.5rem 1.5rem; }
  /* fixed desktop widths (430/374) exceed a 390 viewport — the page
     rendered 478 wide (s9 r5) */
  .side-box, .side-author { width: auto; max-width: 100%;
    align-self: stretch; }
  .side-box { padding: 1.75rem 1.5rem 2rem; }
  .article-band-img img { width: 100%; }
}

/* r5 mobile type scale re-pinned to live @390 (s9-mob4: body
   h2/h3 + band h1 26.4, author name 22.5, FAQ questions 19.5) */
@media (max-width: 47.9rem) {
  .article-main h2, .article-main h3,
  .article-band-text h1 { font-size: 1.65rem; }
  .faq h2 { font-size: 1.406rem; }  /* r6: live FAQ h2 22.5 @390 */
  .listing-main h1 { font-size: 1.65rem; }  /* r6: the fs-h2 pin beat
     main.css's mobile block (file order) and rendered 36.75 @390 */
  .side-author-name h3 { font-size: 1.406rem; }
  .aihealueet-head { font-size: 1.53rem; }
  .side-box h4 { font-size: 1.65rem; }  /* r6: live 26.4 @390 */
  .side-author-img { width: 9.75rem; height: 9.75rem; }  /* live 156 */
  .faq-item summary { min-height: 0; padding: 1.25rem 1.5rem; }
  .faq-answer { padding: 0 1.5rem 1.25rem; }
}

/* D6 (2026-07-24): live blockquote = Webflow default (measured on the
   frozen site: border-left 5px #e2e2e2, 10/20 padding, 18px) — 4
   articles carry quotes; styling was lost at rebuild. */
.article-body blockquote { border-left: 5px solid #e2e2e2;
  padding: 10px 20px; margin: 0 0 10px; font-size: 1.125rem; }

/* D6: body figure images — live renders Webflow's centered rich-text
   figure at max-width 60% of the column (osamaksu Kuva1 468/780;
   corpus scan: 3 such images, all align-center). */
.article-body img { display: block; max-width: 60%; height: auto;
  margin: 0 auto; }

/* D4 hub-title steps folded into the 1.45R law above (D5) */