/* Sivusta – lisätyylit uusille sivuille (aluesivut, blogi) ja etusivun uusille osioille.
   Ladataan site.min.css:n jälkeen. Ei muuta olemassa olevia sivuja. */

/* Sivun alkuosa */
.page-intro { padding-bottom: 1rem; }
.page-intro + .section { padding-top: 1.5rem; }

.breadcrumb { font-size: .875rem; margin: 0 0 1.25rem; color: #5b6474; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: .35rem; opacity: .5; }
.breadcrumb a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb a:hover { color: #2f49ff; }

.page-title {
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 700;
  margin: 0 0 1.1rem;
  max-width: 22ch;
  overflow-wrap: anywhere;
}
.page-lead { max-width: 44rem; margin: 0 0 1.5rem; }
.post-meta { color: #5b6474; font-size: .95rem; margin: 0 0 .5rem; }

/* Leipäteksti */
.prose { max-width: 46rem; }
.prose h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.2; letter-spacing: -.01em; margin: 2.6rem 0 .8rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.2rem; line-height: 1.3; margin: 1.8rem 0 .5rem; }
.prose p { line-height: 1.7; margin: 0 0 1rem; }
.prose ul { list-style: disc; margin: 0 0 1.3rem; padding-left: 1.4rem; }
.prose ol { list-style: decimal; margin: 0 0 1.3rem; padding-left: 1.5rem; }
.prose li { line-height: 1.7; margin: .4rem 0; }
.prose a { color: #2f49ff; text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { text-decoration-thickness: 2px; }
/* Etusivun ingressin linkit näyttävät tavalliselta tekstiltä, alleviivaus vain hoverilla */
.hero-lead a { color: inherit; text-decoration: none; }
.hero-lead a:hover,
.hero-lead a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.prose strong { font-weight: 650; }

/* Hintaosio aliresursseilla: pieni linkkirivi korttien alla */
.center-note { text-align: center; margin: 1.75rem 0 0; }

/* Kuntalista */
.area-list { list-style: none !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .6rem; margin: 0 0 1.3rem; padding: 0 !important; }
.area-list li { margin: 0; }
.area-list li > span,
.area-list li > a { display: block; padding: .65rem .9rem; border: 1px solid #dfe3ea; border-radius: 12px; background: #fff; color: inherit; text-decoration: none; line-height: 1.3; }
.area-list li > a { border-color: #2f49ff; color: #2f49ff; font-weight: 600; }
.area-list li > a:hover { background: #f1f3ff; }

/* Korttilinkit: blogilistaus ja etusivun aluelinkit */
.link-cards { list-style: none; display: grid; gap: 1rem; margin: 0; padding: 0; }
.link-cards li { margin: 0; }
.link-cards a { display: block; padding: 1.25rem 1.5rem; border: 1px solid #dfe3ea; border-radius: 16px; background: #fff; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.link-cards a:hover,
.link-cards a:focus-visible { border-color: #2f49ff; box-shadow: 0 6px 24px rgba(47, 73, 255, .1); }
.link-cards strong { display: block; font-size: 1.15rem; line-height: 1.3; margin-bottom: .35rem; }
.link-cards span { display: block; color: #5b6474; line-height: 1.55; }
.link-cards time { display: block; color: #5b6474; font-size: .875rem; margin-bottom: .35rem; }
@media (min-width: 820px) {
  .link-cards.two { grid-template-columns: 1fr 1fr; }
}
.section-link { margin: 1.5rem 0 0; }

/* Etusivun hero: pidempi H1 pienemmällä koolla, ettei rivejä tule liikaa */
.hero-title { font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.12; letter-spacing: -.02em; }
.hero-lead { font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.6; max-width: 34rem; }