/* =============================================================
   PAGE-CONTENT KIT (2026-10-13)
   Shared by the SEO content pages built on the landing design system: /artikkelit, the article template,
   /tyokalut, /montako-palovaroitinta, /palovaroittimien-kunnossapitosuunnitelma, /palovaroitinrekisteri and
   /asukastiedote. Markup helpers: views/landing/tools/_kit.php. Prefix pc-. Tokens only (landing.css 1).
   ============================================================= */

/* ---------- page head ---------- */
.pc-h1 { -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; }
.pc-h1__sub { display: block; margin-top: .42em; font: 600 clamp(21px, 1.9vw, 30px)/1.2 var(--lp-display); letter-spacing: -.02em; color: var(--muted); text-wrap: balance; }
/* article titles run to 60-75 characters: a size between --mid and --long */
.pc-h1--art { font-size: clamp(36px, 4.3vw, 68px); line-height: 1.03; letter-spacing: -.037em; }
.pc-head__meta { margin: 16px 0 0; font: 500 15px/1.45 var(--lp-body); color: var(--muted); }
.pc-head .lp-crumbs + .lp-head__grid .lp-eyebrow, .pc-head .lp-crumbs + .lp-head__copy .lp-eyebrow { margin-bottom: 22px; }

/* ---------- buttons: the system's pills, as <button> too, with other icons ---------- */
button.lp-btn { cursor: pointer; }
.lp-btn[hidden], .lp-ulink[hidden] { display: none; }
.pc-btn--download:hover svg, .pc-btn--download:focus-visible svg { transform: translateY(2px); }
.pc-btn--print:hover svg, .pc-btn--print:focus-visible svg, .pc-btn--copy:hover svg, .pc-btn--copy:focus-visible svg { transform: none; }

/* ---------- "Lyhyesti": the short answer as a Kuusi card ---------- */
.pc-brief { position: relative; padding: clamp(26px, 2.7vw, 42px); border-radius: 28px; background: var(--kuusi); color: var(--kaura); box-shadow: 0 46px 70px -48px rgba(20,35,31,.65); }
.pc-brief__label { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 600 16px/1.3 var(--lp-body); color: var(--on-kuusi-2); }
.pc-brief__label .lp-ic { width: 19px; height: 19px; color: var(--kaura); }
.pc-brief__text { font: 500 clamp(18px, 1.38vw, 20.5px)/1.58 var(--lp-body); color: var(--kaura); text-wrap: pretty; }
.pc-brief__text p { margin: 0; }
.pc-brief__text p + p, .pc-brief__text p + ul, .pc-brief__text ul + p { margin-top: .7em; }
.pc-brief__text ul { margin: 0; padding-left: 1.2em; list-style: disc; }
.pc-brief__text li + li { margin-top: .3em; }
.pc-brief__text strong { color: var(--kaura); font-weight: 700; }
.pc-brief a { color: var(--kaura); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: rgba(241,243,242,.5); }
.pc-brief a:hover { text-decoration-color: currentColor; }
.pc-brief :focus-visible { outline-color: var(--kaura); }

/* ---------- the template pack's first sheet, as a replica ---------- */
/* Every text in it is 15 px or more (2026-10-31). The sheet sizes itself by its own width (a size container), not
   the screen's: below 600 px the m² column goes; below 410 px the head row gives way to one stacked row per
   apartment (apartment and status on top, "Nyt 1 · Vähintään 2" under it), so nothing is cut at 320 px. */
.pc-sheet { margin: 0; min-width: 0; container-type: inline-size; }
.pc-sheet__frame { overflow: hidden; border-radius: 22px; background: #FFFEFA; box-shadow: 0 50px 90px -52px rgba(0,0,0,.5), 0 0 0 1px rgba(31,77,71,.06); }
.pc-sheet__bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgba(31,77,71,.12); }
.pc-sheet__file { display: block; min-width: 0; overflow: hidden; font: 600 15px/1.2 var(--lp-body); color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.pc-sheet__file .lp-ic { display: inline-block; width: 18px; height: 18px; margin-right: 9px; vertical-align: -4px; color: var(--kuusi); }
.pc-sheet__table { width: 100%; border-collapse: collapse; font: 500 16px/1.3 var(--lp-body); color: var(--yo); font-variant-numeric: tabular-nums; }
.pc-sheet__table th, .pc-sheet__table td { padding: 13px 16px; text-align: left; white-space: nowrap; border-bottom: 1px solid rgba(31,77,71,.1); }
.pc-sheet__table thead th { border-bottom: 0; background: var(--kuusi); color: var(--kaura); font: 600 15px/1.2 var(--lp-body); }
.pc-sheet__table thead th.is-calc { background: var(--kuusi-2); }
.pc-sheet__table tbody th { font-weight: 700; }
.pc-sheet__table td.is-calc { background: rgba(227,233,227,.6); font-weight: 700; color: var(--kuusi); }
.pc-sheet__table tbody tr:last-child > * { border-bottom: 0; }
.pc-sheet__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px 0 9px; border-radius: var(--r); font: 600 15px/1 var(--lp-body); white-space: nowrap; }
.pc-sheet__chip .lp-ic { flex: none; width: 16px; height: 16px; }
.pc-sheet__chip.is-ok { background: var(--kuusi); color: var(--kaura); }
/* a missing detector is "needs action": okra with Yö ink, never red (red is only the detector light) */
.pc-sheet__chip.is-miss { background: var(--okra); color: var(--yo); }
.pc-sheet__tabs { display: flex; gap: 2px; padding: 0 10px; overflow: hidden; border-top: 1px solid rgba(31,77,71,.12); background: var(--kaura); }
.pc-sheet__tabs span { flex: none; padding: 11px 12px; font: 600 15px/1 var(--lp-body); color: var(--muted); white-space: nowrap; }
.pc-sheet__tabs .is-on { background: #FFFEFA; color: var(--kuusi); box-shadow: inset 0 2px 0 var(--kuusi); }
.pc-sheet__cap { margin-top: 16px; }
.pc-sheet--compact .pc-sheet__table th, .pc-sheet--compact .pc-sheet__table td { padding: 11px 13px; font-size: 15px; }
.pc-sheet--compact .pc-sheet__table thead th { font-size: 15px; }
@container (max-width: 599px) {
    .pc-sheet__table th:nth-child(2), .pc-sheet__table td:nth-child(2) { display: none; }
    .pc-sheet__table th, .pc-sheet__table td, .pc-sheet--compact .pc-sheet__table th, .pc-sheet--compact .pc-sheet__table td { padding: 11px 10px; }
    .pc-sheet__tabs span:nth-child(n+5) { display: none; }
}
@container (max-width: 409px) {
    .pc-sheet__frame { border-radius: 18px; }
    .pc-sheet__bar { padding: 12px 14px; }
    .pc-sheet__table, .pc-sheet__table tbody { display: block; }
    .pc-sheet__table thead { display: none; }
    .pc-sheet__table tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "a a c" "n m m"; align-items: center; gap: 2px 14px; padding: 12px 14px; border-bottom: 1px solid rgba(31,77,71,.1); }
    .pc-sheet__table tbody tr:last-child { border-bottom: 0; }
    .pc-sheet__table tbody tr > *, .pc-sheet--compact .pc-sheet__table tbody tr > * { padding: 0; border: 0; background: none; }
    .pc-sheet__table tbody td.is-calc { background: none; }
    .pc-sheet__table tbody th { grid-area: a; font-size: 17px; }
    .pc-sheet__table tbody td:nth-child(3) { grid-area: n; }
    .pc-sheet__table tbody td:nth-child(4) { grid-area: m; }
    .pc-sheet__table tbody td:nth-child(5) { grid-area: c; justify-self: end; }
    .pc-sheet__table tbody td[data-k] { font-size: 15px; font-weight: 600; color: var(--muted); }
    .pc-sheet__table tbody td[data-k]::before { content: attr(data-k) " "; font-weight: 500; }
    .pc-sheet__tabs span:nth-child(n+3) { display: none; }
}
/* ---------- typeset link rows (other tools, read next): a list, never a row of equal cards ---------- */
.pc-rows { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--kuusi); }
.pc-rows > li { border-bottom: 1px solid rgba(31,77,71,.18); }
.pc-row { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto; grid-template-areas: "t d go"; gap: 8px clamp(24px, 3vw, 56px); align-items: center; padding: clamp(22px, 2.2vw, 32px) 0; color: inherit; }
.pc-row__t { grid-area: t; display: flex; flex-direction: column; gap: 6px; }
.pc-row__k { font: 600 16px/1.3 var(--lp-body); color: var(--muted); }
.pc-row__n { font: 700 clamp(22px, 1.9vw, 30px)/1.12 var(--lp-display); letter-spacing: -.022em; color: var(--kuusi); text-wrap: balance; -webkit-hyphens: manual; hyphens: manual; }
.pc-row__d { grid-area: d; margin: 0; max-width: 36em; font: 500 16.5px/1.5 var(--lp-body); color: #3F4D49; }
.pc-row__go { grid-area: go; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(31,77,71,.35); color: var(--kuusi); transition: background-color .2s, color .2s, border-color .2s; }
.pc-row__go svg { width: 20px; height: 20px; transition: transform .25s var(--lp-ease); }
.pc-row:hover .pc-row__go, .pc-row:focus-visible .pc-row__go { background: var(--kuusi); border-color: var(--kuusi); color: var(--pinta); }
.pc-row:hover .pc-row__go svg, .pc-row:focus-visible .pc-row__go svg { transform: translateX(3px); }
.pc-row:hover .pc-row__n { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; text-decoration-color: rgba(31,77,71,.35); }
.pc-row:focus-visible { outline-offset: 4px; border-radius: 12px; }

/* ---------- sources, author line ---------- */
.pc-src__t { margin: 0 0 18px; font: 700 clamp(24px, 2vw, 30px)/1.15 var(--lp-display); letter-spacing: -.02em; color: var(--kuusi); }
.pc-src__list { margin: 0; padding: 0; list-style: none; counter-reset: pcsrc; border-top: 2px solid var(--kuusi); }
.pc-src__list li { counter-increment: pcsrc; display: grid; grid-template-columns: 2.1em minmax(0, 1fr); padding: 14px 0; border-bottom: 1px solid rgba(31,77,71,.14); font: 500 16.5px/1.5 var(--lp-body); color: var(--yo); }
.pc-src__list li::before { content: counter(pcsrc); font: 700 15px/1.65 var(--lp-display); color: var(--kuusi); }
.pc-src__list a { color: var(--kuusi); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: rgba(31,77,71,.35); overflow-wrap: anywhere; }
.pc-src__list a:hover { text-decoration-color: currentColor; }
.pc-src__date { color: var(--muted); font-size: 15px; white-space: nowrap; }
.pc-author { display: flex; gap: 16px; align-items: flex-start; margin: 26px 0 0; font: 500 16px/1.55 var(--lp-body); color: #3F4D49; max-width: 40em; }
.pc-author__mono { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--kuusi); color: var(--kaura); font: 700 16px/1 var(--lp-display); letter-spacing: -.02em; }
.pc-author a { color: var(--kuusi); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: rgba(31,77,71,.35); }

/* ---------- an editing hint above a fill-in sheet ---------- */
.pc-hint { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; max-width: 46em; font: 500 16px/1.5 var(--lp-body); color: #3F4D49; }
.pc-hint .lp-ic { width: 19px; height: 19px; margin-top: 2px; color: var(--kuusi); }

/* ---------- breakpoints ---------- */
@media (max-width: 899px) {
    .pc-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t go" "d go"; }
}
@media (max-width: 639px) {
    .pc-h1--art { font-size: clamp(31px, 8.6vw, 38px); line-height: 1.06; }
    .pc-h1__sub { font-size: 20px; }
    .pc-brief { border-radius: 22px; }
    .pc-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "d" "go"; }
    .pc-row__go { width: 44px; height: 44px; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .pc-row__go, .pc-row__go svg { transition: none; }
}

/* ---------- the free template pack as a band (/artikkelit, every article): copy left, the sheet right ---------- */
.pc-pack__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px clamp(40px, 5vw, 96px); align-items: center; }
.pc-pack__k { margin: 0 0 18px; font: 600 16px/1.3 var(--lp-body); color: var(--kuusi); }
.pc-pack__t { font-size: clamp(32px, 3.3vw, 50px); -webkit-hyphens: manual; hyphens: manual; }
.pc-pack__t strong { font-weight: inherit; color: inherit; }
.pc-pack__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: 36px; }
@media (max-width: 1023px) {
    .pc-pack__grid { grid-template-columns: minmax(0, 1fr); }
    .pc-pack .pc-sheet { max-width: 680px; }
}
@media (max-width: 639px) {
    .pc-pack__acts .lp-btn { width: 100%; }
}