/* Komponentit — uudelleenkäytettävät UI-osat */

/* ---------- Napit ---------- */

/*
  Seurantalo-suunta: napit ovat painettuja lappuja, eivät pehmeitä pintoja.
  Reuna on paksu, pyöristys nolla, ja hover kääntää värit ympäri sen sijaan
  että se vaalentaisi pintaa hivenen.
*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* Kosketuskohde vähintään 44 px myös pienimmällä tekstikoolla. */
  box-sizing: border-box;
  min-height: 44px;
  padding: 0.7em 1.5em;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  border: var(--rule-medium) solid transparent;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.btn--gold {
  background: var(--color-gold-bright);
  border-color: var(--color-gold-bright);
  color: var(--color-forest-900);
}
.btn--gold:hover {
  background: var(--color-gold-hover);
  border-color: var(--color-gold-hover);
}

.btn--outline-cream {
  border-color: var(--color-cream);
  color: var(--color-cream);
}
.btn--outline-cream:hover {
  background: var(--color-cream);
  color: var(--color-forest-900);
}

.btn--outline-ink {
  border-color: var(--color-forest-900);
  color: var(--color-forest-900);
}
.btn--outline-ink:hover {
  background: var(--color-forest-900);
  color: var(--color-cream);
}

/* Napin sisällä oleva lisätieto: tiedostotyyppi ja koko latauslinkeissä.
   Sama tarve on /metsastys-ja-alueet/-sivulla (.map-action__meta); tämä on
   jaettu versio, jotta uusia sivukohtaisia kopioita ei tarvita. */
.btn__meta {
  font-weight: 400;
  opacity: 0.72;
  font-size: 0.92em;
}

.btn--text {
  padding: 0;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
}

/* ---------- Päänavigaatio (desktop) ---------- */

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--step--1);
  font-weight: 500;
}

.primary-nav a {
  position: relative;
  padding-block: var(--space-1);
}

.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transition: right var(--duration-med) var(--ease-out);
  opacity: 0.7;
}

.primary-nav a:hover::after { right: 0; }

/* Nykyinen sivu: kultainen viiva jää näkyviin. aria-current tulostui jo
   ennestään, mutta sille ei ollut tyyliä — sivulla ei siis näkynyt lainkaan
   missä käyttäjä on. */
.primary-nav a[aria-current="page"] {
  font-weight: 600;
}

.primary-nav a[aria-current="page"]::after {
  right: 0;
  opacity: 1;
  height: 2px;
  background: var(--color-gold-bright);
}

/* Aktiivisen sivun merkintä: okra alleviivaus vaalealla palkilla. */
.primary-nav a[aria-current="page"]::after {
  background: var(--color-gold);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Headerin oikean reunan nostolinkki. Ennen tässä oli "Ota yhteyttä", joka vei
   samaan paikkaan kuin navigaation Yhteystiedot; kaksoiskappale poistettiin ja
   Yhteystiedot nostettiin tähän. Painike on samalla kielellä kuin sivuston muut
   napit (.btn), mutta kevyempi, koska se istuu navigaation vieressä. */
.header-cta {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 40px;
  padding: 0.5rem 1.1rem;
  font-size: var(--step--1);
  font-weight: 600;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

/* Header on aina vaalea (Seurantalo-suunta), joten .is-scrolled-ehtoja ei enää
   tarvita. Aiemmin nämä olivat kahdessa versiossa: kermanvaalea reuna tumman heron
   päällä ja tumma reuna vieritetyllä palkilla. Nyt pätee vain jälkimmäinen. */
.header-cta {
  border-color: var(--color-forest-900);
  border-width: var(--rule-medium);
}

.header-cta:hover,
.header-cta:focus-visible {
  background: var(--color-forest-900);
  color: var(--color-cream);
}

/* ---------- Hampurilaispainike ---------- */

/* Kosketuskohde 44x44 px ja hillitty kehys, jotta painike näyttää
   painikkeelta eikä irralliselta kuvamerkiltä. */
.nav-toggle {
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.nav-toggle { border-color: var(--color-forest-900); }

.nav-toggle:hover,
.nav-toggle:focus-visible {
  background: var(--color-forest-800);
  border-color: var(--color-forest-800);
}

.nav-toggle:hover span,
.nav-toggle:focus-visible span { background: var(--color-cream); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex: none;
}

/* Alle 860px: päänavigaatio piiloon, hampurilaisvalikko näkyviin. */
@media (max-width: 860px) {
  .primary-nav { display: none; }
  .header-cta { display: none; }
  .nav-toggle { display: flex; }
}

@media (min-width: 861px) {
  .mobile-nav { display: none; }
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform var(--duration-med) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Mobiilivalikko (overlay) ---------- */

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--color-forest-900);
  color: var(--color-cream);
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--container-pad) var(--space-7);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-med) var(--ease-out),
              transform var(--duration-med) var(--ease-out),
              visibility 0s linear var(--duration-med);
}

.mobile-nav.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: opacity var(--duration-med) var(--ease-out),
              transform var(--duration-med) var(--ease-out),
              visibility 0s;
}

.mobile-nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-nav__close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cream);
}
.mobile-nav__close span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.mobile-nav__close span::before,
.mobile-nav__close span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
}
.mobile-nav__close span::before { transform: rotate(45deg); }
.mobile-nav__close span::after { transform: rotate(-45deg); }

.mobile-nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.mobile-nav a {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 500;
}

.mobile-nav__footer {
  margin-top: auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line-on-forest);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--step--1);
  color: var(--color-cream-soft);
}

body.nav-open { overflow: hidden; }

/* ---------- Osiopohjat (jaettu kaikilla sivuilla) ---------- */

.section {
  padding-block: var(--space-9);
}

.section--tight { padding-block: var(--space-8); }

.section--forest {
  background: var(--color-forest-900);
  color: var(--color-cream);
}

.section--raised {
  background: var(--color-paper-raised);
  border-block: 1px solid var(--line-on-paper);
}

.section-cta {
  margin-top: var(--space-7);
}

.text-balance { text-wrap: balance; }

.identity__text {
  max-width: 66ch;
  font-size: var(--step-1);
  color: var(--color-ink-soft);
}

.identity__text strong { color: var(--color-ink); }

/* ---------- Alasivun oma hero (Seura & historia, Metsästys & alueet, ...) ---------- */

.page-hero {
  background: var(--color-forest-900);
  color: var(--color-cream);
  padding-top: var(--space-10);
  padding-bottom: var(--space-8);
}

.page-hero h1 {
  margin-top: var(--space-4);
  font-size: var(--step-4);
  letter-spacing: -0.01em;
  max-width: 20ch;
}

.page-hero__since {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-cream-soft);
}

.page-hero__lede {
  margin-top: var(--space-5);
  font-size: var(--step-1);
  color: var(--color-cream-soft);
  max-width: 56ch;
  line-height: var(--leading-normal);
}

/* ---------- Faktarivi (dl): tiivis tapa näyttää muutama avainluku ---------- */

.fact-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-8);
  margin: var(--space-7) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line-on-paper);
}

.fact-row dt {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 var(--space-2);
}

.fact-row dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--color-forest-800);
}

/* ---------- Alasivun loppu / jatkolinkit ---------- */

.closing {
  text-align: center;
}

.closing p:not(.eyebrow) {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--color-forest-800);
  margin-bottom: var(--space-4);
}

.closing__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-8);
}

@media (max-width: 560px) {
  .fact-row { gap: var(--space-5) var(--space-6); }
}

/* ---------- Osion otsikointi ---------- */

/*
  Seurantalo-suunta: pikkuotsikko on painettu lappu, ei viivalla varustettu teksti.
  Aiempi versio oli kultainen teksti ja 26 px hiusviiva sen edessä; tässä ilmeessä
  sama rooli hoituu umpivihreällä laatalla — litteä väripinta, ei viivaa.
*/
.eyebrow {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  background: var(--color-forest-900);
  color: var(--color-cream);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

/* Tummalla pohjalla laatta kääntyy ympäri: okra pohja, tumma teksti. */
.eyebrow--on-forest {
  background: var(--color-gold-bright);
  color: var(--color-forest-900);
}

.section-head {
  max-width: 62ch;
  margin-bottom: var(--space-7);
}

.section-head__lede {
  margin-top: var(--space-4);
  font-size: var(--step-1);
  color: var(--color-ink-soft);
  max-width: 52ch;
}

.section-head--on-forest .section-head__lede { color: var(--color-cream-soft); }

/* ---------- Tunnuslukurivi (identiteetti) ---------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-on-paper);
}

.stat {
  padding-block: var(--space-6);
  padding-right: var(--space-5);
  border-right: 1px solid var(--line-on-paper);
}

.stat:last-child { border-right: none; }

.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-4);
  color: var(--color-forest-800);
  line-height: 1;
}

.stat__label {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--step--1);
  color: var(--color-ink-soft);
  max-width: 22ch;
}

@media (max-width: 720px) {
  .stat-row { grid-template-columns: 1fr; }
  .stat {
    border-right: none;
    border-bottom: 1px solid var(--line-on-paper);
    padding-right: 0;
  }
  .stat:last-child { border-bottom: none; }
}

/* ---------- Toiminta-lista (editoriaalinen, ei ikonikortteja) ---------- */

.activity-list {
  border-top: 1px solid var(--line-on-paper);
}

.activity-row {
  display: grid;
  grid-template-columns: 90px 1fr 1.4fr;
  align-items: baseline;
  gap: var(--space-6);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--line-on-paper);
  transition: padding-left var(--duration-med) var(--ease-out);
}

.activity-row:hover { padding-left: var(--space-3); }

.activity-row__num {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--color-gold);
}

.activity-row__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--color-forest-800);
}

.activity-row__text {
  font-size: var(--step-0);
  color: var(--color-ink-soft);
  max-width: 46ch;
}

@media (max-width: 760px) {
  .activity-row {
    grid-template-columns: 48px 1fr;
    grid-template-areas: "num title" ". text";
    /* Kapeimmalla puhelimella 32 px:n väli + 48 px:n numero + otsikon
       min-content (191,9 px sanalle "Hirvenmetsästys") ei mahtunut 260 px:n
       riville, ja sivu vuoti 1 px yli. Pienempi väli riittää eikä koske
       typografiaan. */
    column-gap: var(--space-4);
  }
  .activity-row__num { grid-area: num; }
  .activity-row__title { grid-area: title; }
  .activity-row__text { grid-area: text; margin-top: var(--space-2); }
}

/* ---------- Ajankohtaista ---------- */

.news-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-7);
  align-items: start;
}

.news-feature {
  padding: var(--space-6);
  background: var(--color-paper-raised);
  /* Seurantalo: nostettu tiedote on kehystetty juliste, ei kortti jolla on
     ohut kultaviiva yläreunassa. */
  border: var(--rule-medium) solid var(--color-forest-900);
}

.news-feature__date {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--color-gold);
  letter-spacing: 0.02em;
}

.news-feature h3 {
  margin-top: var(--space-3);
  font-size: var(--step-2);
  color: var(--color-forest-800);
}

.news-feature p {
  margin-top: var(--space-4);
  color: var(--color-ink-soft);
  max-width: 48ch;
}

.news-list {
  display: flex;
  flex-direction: column;
}

.news-item {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--line-on-paper);
}
.news-item:first-child { padding-top: 0; }

.news-item__date {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  letter-spacing: 0.02em;
}

.news-item h4 {
  margin-top: var(--space-2);
  font-size: var(--step-0);
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--color-ink);
}

.news-item p {
  margin-top: var(--space-2);
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

.news-item p + p {
  margin-top: var(--space-3);
}

/* Joissakin tiedotteissa on eriteltävä sisältö (esim. maksut) — alkuperäistä
   tekstiä ei tiivistetä pois, joten sille tarvitaan luettavan listan muoto. */
.news-item ul {
  list-style: disc;
  padding-left: 1.15em;
  margin-top: var(--space-2);
}

.news-item li {
  font-size: var(--step--1);
  color: var(--color-ink-soft);
  margin-bottom: 2px;
}

@media (max-width: 860px) {
  .news-grid { grid-template-columns: 1fr; }
}

/* ---------- Metsästysalueet: värilegenda (ei keksittyä karttaa) ---------- */

.area-panel {
  background: var(--color-paper-raised);
  border-block: 1px solid var(--line-on-paper);
}

.area-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.legend {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line-on-paper);
}

.legend-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--line-on-paper);
}

.legend-swatch {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-on-paper-strong);
}

.legend-row__label {
  font-weight: 600;
  color: var(--color-ink);
}

.legend-row__desc {
  margin-top: 2px;
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

@media (max-width: 860px) {
  .area-grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ---------- Historia: sitaatti ---------- */

.pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-2);
  line-height: var(--leading-snug);
  color: var(--color-cream);
  border-left: 2px solid var(--color-gold-bright);
  padding-left: var(--space-5);
}

.pull-quote cite {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--color-gold-bright);
}

/* ---------- Ulkomaalaiset vieraat: nauha ---------- */

.guest-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-7);
  background: var(--color-paper-raised);
  border: 1px solid var(--line-on-paper);
}

.guest-strip__text h3 {
  font-size: var(--step-1);
  color: var(--color-forest-800);
}

.guest-strip__text p {
  margin-top: var(--space-2);
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

/* ---------- Yhteystiedot ---------- */

.contact-grid {
  display: grid;
  /* Ei oleteta kohteiden määrää: palstoja tulee niin monta kuin mahtuu.
     min() estää palstaa kasvamasta näyttöä leveämmäksi kapeimmilla puhelimilla. */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  /* Kompensoi korttien negatiiviset marginaalit, jotta ruudukon vasen ja ylä-
     reuna ovat linjassa muun sisällön kanssa. */
  padding: 1px 0 0 1px;
}

.contact-grid--single {
  grid-template-columns: 1fr;
  max-width: 420px;
}

/* Hallitus/johtokunta-tyyppinen nimilista ilman puhelinnumeroa (kun sellaista
   ei ole julkaistu) — käytössä sekä Ajankohtaista- että Yhteystiedot-sivulla. */
.board-list {
  margin-top: var(--space-5);
  color: var(--color-ink-soft);
  max-width: 60ch;
}

.board-list strong { color: var(--color-ink); }

.contact-card {
  background: var(--color-paper-raised);
  padding: var(--space-6);
  /* Reunaviivat piirretään korteista, ei ruudukon taustasta. Aiemmin ruudukolla
     oli taustaväri ja 1px gap, jolloin täyttämätön ruutu näkyi harmaana
     laatikkona. Nyt siellä missä ei ole korttia ei piirry mitään. Negatiiviset
     marginaalit sulattavat vierekkäisten korttien reunat yhdeksi hiusviivaksi. */
  border: 1px solid var(--line-on-paper);
  margin: -1px 0 0 -1px;
}

.contact-card__role {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-gold);
}

.contact-card__name {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--color-forest-800);
}

.contact-card__phone {
  display: inline-block;
  margin-top: var(--space-3);
  font-weight: 600;
}

.contact-card__phone:hover { color: var(--color-forest-800); }

/* Erillistä mobiilisääntöä ei tarvita: auto-fill pudottaa yhteen palstaan itse. */

/* ---------- Scroll-reveal ---------- */

/* Oletuksena sisältö on näkyvää: jos JS ei jostain syystä lataudu tai suoritu,
   mitään ei jää piiloon. reveal.js lisää .reveal-armed-luokan vasta juuri ennen
   tarkkailun aloittamista, ja se poistetaan .is-visible-luokan myötä. */
[data-reveal].reveal-armed {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}

[data-reveal].reveal-armed.is-visible {
  opacity: 1;
  transform: translateY(0);
}