/* css/kategoria2.css (11.10.2026) — kategoria- ja kategoria×kunta-sivut v2 (body.fm-c2, ?uusi=1).
   Arvio: org/finland-map/kategoriasivu-critique-2026-10-11. DESIGN.md. Kartan toiminta ja mainospaikat ennallaan. */

/* Desktop: kartta valui 167 px seuraavan osion päälle (ruudukon rivi venyi sivupalkin 44 rivin mittaiseksi).
   Rivi pysyy näytön korkuisena, sivupalkki vierii sisällä. */
.fm-c2 .map-page-layout { grid-template-rows: minmax(0, 1fr); }
.fm-c2 #map-sidebar { min-height: 0; }

/* Mobiili: kartan esikuva matalaksi nauhaksi (oikea luku + nappi). Napautus avaa saman kartan samaan kohtaan. */
@media (max-width: 640px) {
  .fm-c2 .map-page-layout:has(.fm-map-facade--cat) { height: auto !important; min-height: 0 !important; }
  .fm-c2 #map:has(.fm-map-facade--cat), .fm-c2 .map-page-layout:has(.fm-map-facade--cat) > div { height: 210px !important; min-height: 0 !important; }
  .fm-c2 #map .fm-map-facade--cat { display: flex !important; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; height: 100% !important; min-height: 0 !important; padding: 18px 20px !important; text-align: left; }
  .fm-c2 #map .fm-cat-facade-map, .fm-c2 #map .fm-cat-facade-pts { display: none !important; }
  .fm-c2 #map .fm-cat-facade-count { font-size: 1.8rem !important; align-self: flex-start !important; }
  .fm-c2 #map .fm-cat-facade-sub { font-size: .95rem; }
  .fm-c2 #map .fm-map-facade--cat .fm-map-facade-cta { margin-top: 10px !important; padding: 0 20px !important; min-height: 44px; }
  .fm-c2 #map .fm-cat-facade-tagline { display: none; }
}

/* Mobiilin suodatinnappi: näkyvä teksti, ei pelkkä ikoni */
.fm-c2 #mobile-filters-fab { width: auto; min-width: 52px; padding: 0 18px 0 15px; gap: 8px; border-radius: 999px; font: inherit; font-weight: 600; font-size: .95rem; }
.fm-c2 #mobile-filters-fab::after { content: attr(aria-label); }
.fm-c2 #mobile-filters-fab svg { width: 18px; height: 18px; }

/* Ei yläotsikoita, otsikot vasemmalle (kuten etusivu ja kohdesivu) */
.fm-c2 .section-header .eyebrow { display: none; }
.fm-c2 .section-header { text-align: left; margin-left: 0; margin-right: 0; max-width: none; margin-bottom: 24px; }
.fm-c2 .section-header p { max-width: 62ch; margin-left: 0; }
.fm-c2 .sidebar-section-title { text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 700; color: var(--color-text, #1f2937); }

/* Lukuina: ei isoja lukuja (hero-metric), rauhallinen rivi */
.fm-c2 .fm-stat-n { font-size: 1.3rem !important; }

/* Ei värillistä raitaa korteissa */
.fm-c2 .cat-card::before { display: none; }

/* 44 px kosketuskohteet: hyppysirut, teemasirut, A–Ö- ja kuntalistat */
.fm-c2 .fm-jumpnav a, .fm-c2 .fm-teemanauha-list a { min-height: 44px; display: inline-flex; align-items: center; }
.fm-c2 .fm-index-acc .fm-acc-body li { padding: 0 !important; }
.fm-c2 .fm-index-acc .fm-acc-body li a { display: inline-flex; align-items: center; min-height: 44px; }

/* 12 px lattia: tunnisteet ja kuvituskuvalaput */
.fm-c2 .featured-card-tag, .fm-c2 .fm-kuvitus-merkki, .fm-c2 .poi-cat-tag { font-size: .75rem !important; }
.fm-c2 .fm-stat-l, .fm-c2 .fm-teemanauha-label { font-size: .8rem; }

@media (prefers-reduced-motion: reduce) { .fm-c2 #mobile-filters-fab { transition: none; } }

/* "Muuta lähellä" (kuntasivut): kaksi sirujonoa, ei kortteja. Mobiilissa rivi vierii vaakasuunnassa. */
.fm-c2-more { padding-block: 32px; }
.fm-c2-more h2 { margin: 0 0 12px; }
.fm-c2-more-row + .fm-c2-more-row { margin-top: 16px; }
.fm-c2-more-row h3 { margin: 0 0 8px; font-size: 1rem; font-weight: 650; color: var(--color-text-dim, #6b7280); }
.fm-c2-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.fm-c2-chips a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--color-border-strong, #d1d5db); border-radius: 999px; background: var(--color-bg, #fff); color: var(--color-text, #1f2937); font-weight: 600; font-size: .93rem; text-decoration: none; touch-action: manipulation; transition: border-color 150ms ease, transform 140ms cubic-bezier(.23, 1, .32, 1); }
.fm-c2-chips a span { font-weight: 500; font-size: .82rem; color: var(--color-text-dim, #6b7280); font-variant-numeric: tabular-nums; }
.fm-c2-chips a:active { transform: scale(.97); }
.fm-c2-chips a:focus-visible { outline: 2px solid var(--color-forest, #1d3a2a); outline-offset: 2px; }
.fm-c2-chips .fm-c2-chip-map { color: var(--color-forest, #1d3a2a); }
@media (hover: hover) { .fm-c2-chips a:hover { border-color: var(--color-forest, #1d3a2a); text-decoration: none; } }
@media (max-width: 640px) {
  .fm-c2-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  .fm-c2-chips::-webkit-scrollbar { display: none; }
  .fm-c2-chips li { flex: none; }
}

/* Desktop: kartan esikuvan tekstit yhdeksi ryhmäksi pystykeskelle (luku, laji, kunta, nappi), ei hajallaan 836 px:lle */
@media (min-width: 641px) {
  .fm-c2 #map .fm-map-facade--cat { grid-template-rows: 1fr auto auto auto auto 1fr !important; align-items: start; }
  .fm-c2 #map .fm-cat-facade-map, .fm-c2 #map .fm-cat-facade-pts { grid-row: 1 / 7 !important; }
  .fm-c2 #map .fm-cat-facade-count { grid-row: 2 !important; align-self: end !important; font-size: 2.6rem !important; }
  .fm-c2 #map .fm-cat-facade-sub { grid-row: 3 !important; margin-top: 6px; }
  .fm-c2 #map .fm-cat-facade-tagline { grid-row: 4 !important; margin-top: 2px !important; font-size: 1.04rem !important; font-weight: 600; letter-spacing: 0 !important; color: #a7c6b4 !important; }
  .fm-c2 #map .fm-map-facade--cat .fm-map-facade-cta { grid-row: 5 !important; margin-top: 20px !important; }
}

/* Tietoa + Kysyttyä: Tietoa koko leveydeltä, kysymykset alle kahteen sarakkeeseen (ei yhtä pitkää palstaa tyhjän vieressä) */
@media (min-width: 900px) {
  .fm-c2 .fm-knowledge-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
  .fm-c2 .fm-knowledge-col, .fm-c2 .fm-knowledge-col p, .fm-c2 .fm-knowledge-col > * { max-width: none !important; }   /* Jere 11.10.: Tietoa koko leveydelle, ei tyhjää tilaa */
  .fm-c2 .fm-faq-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: start; }
  .fm-c2 .fm-faq-list > * { margin: 0 !important; }
}

/* Kartan alla olevat lohkot yhtenäisiksi (Jere 11.10.): yksi otsikkokoko, yksi vasen reuna (container 24 px),
   tasainen 40 px rytmi. Ennen: otsikot 34 / 22 px, reunat 0 / 24 / 44 / 47 px, välit 6–64 px. */
.fm-c2 #suositut .section-header h2, .fm-c2 .fm-ad-swap h2, .fm-c2 [data-fm-ad] h2, .fm-c2 .fm-cat-summary h2,
.fm-c2 .fm-c2-more h2, .fm-c2 .fm-index-acc summary h2, .fm-c2 .fm-knowledge h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.6rem) !important; font-weight: 700 !important; line-height: 1.25 !important; margin-top: 0 !important;
}
.fm-c2 .fm-cat-summary { margin: 0 auto !important; max-width: 1440px; padding: 40px 24px 0 !important; border: 0 !important; background: none !important; }
.fm-c2 .fm-statgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 190px)) !important; gap: 12px 32px !important; }
.fm-c2 .fm-c2-more { padding: 40px 0 0 !important; }
.fm-c2 #kaikki { padding: 40px 0 0 !important; }
.fm-c2 #kunnat { padding: 12px 0 0 !important; }
.fm-c2 .fm-knowledge { padding: 56px 0 !important; }
@media (max-width: 640px) { .fm-c2 .fm-cat-summary { padding: 32px 16px 0 !important; } .fm-c2 .fm-c2-more, .fm-c2 #kaikki { padding-top: 32px !important; } }

/* ---- Kuntasivut v2 (body.fm-c2.fm-ku2, kartta.html?kaupunki=) 11.10.2026 ---- */
.fm-ku2 .fm-map-bar { background: var(--color-forest, #1d3a2a) !important; }
.fm-ku2-cats { padding: 16px 0 0; }   /* container antaa jo 24 px */
@media (max-width: 640px) { .fm-ku2-cats { padding: 14px 0 0; } }
.fm-ku2 .fm-city-index > h2, .fm-ku2 #majoitus > h2, .fm-ku2 .fm-gyg-widget > h2, .fm-ku2 .fm-ad-swap h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.6rem) !important; font-weight: 700 !important; line-height: 1.25; text-align: left; margin-top: 0;
}
.fm-ku2 #majoitus, .fm-ku2 .fm-city-index { padding-top: 40px !important; }
.fm-ku2 .fm-city-index-sub, .fm-ku2 .fm-city-index-km { font-size: .8rem !important; }

/* Kuntasivu: #kaikki on täällä itse lohko (kategoriasivulla ulompi section) -> sama 48 px linja kuin muilla lohkoilla */
.fm-ku2 #kaikki { padding: 40px 24px 0 !important; }
@media (max-width: 640px) { .fm-ku2 #kaikki { padding: 32px 12px 0 !important; } .fm-ku2 #majoitus { padding-left: 12px !important; padding-right: 12px !important; } }   /* container antaa 12 px -> kaikki 24 px linjalle */
/* Lähikunnat siruiksi (kuten "Muuta lähellä"), koko siru klikattava */
.fm-ku2 #lahikunnat { margin-top: 24px !important; }
.fm-ku2 #lahikunnat h3 { margin: 0 0 8px !important; font-size: 1rem !important; font-weight: 650; color: var(--color-text-dim, #6b7280); }
.fm-ku2 #lahikunnat ul { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
.fm-ku2 #lahikunnat li { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--color-border-strong, #d1d5db); border-radius: 999px; background: var(--color-bg, #fff); transition: border-color 150ms ease; }
.fm-ku2 #lahikunnat li a { color: var(--color-text, #1f2937); font-weight: 600; font-size: .93rem; text-decoration: none; }
.fm-ku2 #lahikunnat li a::before { content: ""; position: absolute; inset: 0; border-radius: 999px; }
.fm-ku2 #lahikunnat li .fm-city-index-sub { font-size: .82rem !important; color: var(--color-text-dim, #6b7280) !important; }
@media (hover: hover) { .fm-ku2 #lahikunnat li:hover { border-color: var(--color-forest, #1d3a2a); } }
@media (max-width: 640px) {
  .fm-ku2 #lahikunnat ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
  .fm-ku2 #lahikunnat ul::-webkit-scrollbar { display: none; }
  .fm-ku2 #lahikunnat li { flex: none; white-space: nowrap; }
}
@media (max-width: 640px) { .fm-ku2 .fm-ku2-cats .fm-c2-chips { margin: 0 -12px; padding: 2px 24px; } }   /* sirut samalle 24 px linjalle, rivi vierii reunasta reunaan */

/* UKK: h3-otsikolliset kysymykset (fm-art-item) olivat 9 px korkeampia kuin span-otsikolliset (Jere 11.10.) */
.fm-c2 .fm-faq-item > summary > h3 { margin: 0 !important; }