/* ═══════════════════════════════
   Etusivu — Minun Suomeni
   ═══════════════════════════════ */

/* ── Hero ── */
.hero {
  min-height: calc(100vh - 60px);
  position: relative; display: flex; flex-direction: column;
  justify-content: center;
  background: #002055; overflow: hidden;
  margin-top: 60px;
  padding: 4rem 0 6rem;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 65% 25%, rgba(26,95,175,.4) 0%, transparent 70%),
    radial-gradient(ellipse 45% 70% at 15% 65%, rgba(0,47,108,.6) 0%, transparent 60%),
    linear-gradient(170deg, #001a45 0%, #002f6c 45%, #001830 100%);
}
.hero-aurora {
  position: absolute; top: 5%; left: -10%; right: -10%; height: 42%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0,180,120,.07) 30%,
    rgba(0,120,200,.09) 55%,
    rgba(100,60,180,.05) 75%,
    transparent 100%
  );
  animation: auroraPulse 9s ease-in-out infinite;
}
@keyframes auroraPulse { 0%,100%{opacity:.55;transform:scaleY(1)} 50%{opacity:1;transform:scaleY(1.12)} }
.hero-trees {
  position: absolute; bottom: 0; left: 0; right: 0; height: 200px;
  pointer-events: none;
}
.hero-content {
  position: relative; z-index: 2;
  padding: 0 2rem;
  max-width: 520px;
}
.hero-eyebrow {
  font-size: .72rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: #f0c060;
  margin-bottom: 1.1rem; display: flex; align-items: center; gap: .8rem;
  animation: fadeUp .65s ease .15s both;
}
.hero-eyebrow::before { content: ''; display: block; width: 28px; height: 1px; background: #c9943a; }
.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 900;
  line-height: 1.03; color: #fff; margin-bottom: 1.3rem;
  animation: fadeUp .65s ease .3s both;
}
.hero-title em { font-style: italic; color: #f0c060; }
.hero-sub {
  font-size: 1.05rem; font-weight: 300; line-height: 1.75;
  color: rgba(255,255,255,.7); max-width: 480px; margin-bottom: 2.2rem;
  animation: fadeUp .65s ease .45s both;
}
.hero-ctas { display: flex; gap: .8rem; flex-wrap: wrap; animation: fadeUp .65s ease .58s both; }
.hero-scroll {
  position: absolute; bottom: 2rem; right: 2rem; z-index: 2;
  writing-mode: vertical-rl; font-size: .65rem; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(255,255,255,.35);
  display: flex; align-items: center; gap: .6rem;
}
.hero-scroll::after {
  content: ''; display: block; width: 1px; height: 36px;
  background: linear-gradient(to bottom, rgba(255,255,255,.35), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100%{opacity:.35} 50%{opacity:.85} }
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* ── Hero sisältö: 2-sarakeinen grid desktop, pino mobiilissa ── */
.hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1200px;
  margin: 0 auto;
  padding: 0 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

/* ── Postikorttikuvat ── */
.hero-postcards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
  width: 100%;
}

.postcard {
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
  padding: 7px 7px 24px;
  box-shadow: 0 8px 28px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
}

.postcard img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Talvikuva — vasen sarake, ylärivi */
.postcard--talvi {
  grid-column: 1;
  grid-row: 1;
  transform: rotate(-2deg);
}
.postcard--talvi img { aspect-ratio: 4/3; }

/* Revontulet — oikea sarake, ylärivi */
.postcard--revontulet {
  grid-column: 2;
  grid-row: 1;
  transform: rotate(2.5deg);
  align-self: end;
}
.postcard--revontulet img { aspect-ratio: 4/3; }

/* Kesäkuva — koko leveys, alarivi, isompi */
.postcard--kesa {
  grid-column: 1 / -1;
  grid-row: 2;
  transform: rotate(-1deg);
  box-shadow: 0 14px 44px rgba(0,0,0,.7), 0 4px 12px rgba(0,0,0,.5);
}
.postcard--kesa img { aspect-ratio: 16/8; }

.postcard--talvi      { animation: fadeUp .7s ease .5s  both; }
.postcard--revontulet { animation: fadeUp .7s ease .65s both; }
.postcard--kesa       { animation: fadeUp .7s ease .8s  both; }

/* ── Mobiili: pino ── */
@media (max-width: 860px) {
  .hero {
    padding: 3rem 0 5rem;
    justify-content: flex-start;
  }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0 1.4rem;
  }
  .hero-postcards {
    grid-template-columns: 1fr 1fr;
  }
  .postcard--kesa {
    grid-column: 1 / -1;
  }
  .hero-content {
    max-width: 100%;
    padding: 0;
  }
}

/* ── Parks grid ── */
.parks-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr;
  grid-template-rows: 300px 200px;
  gap: 10px;
}
.park-card {
  position: relative; overflow: hidden; border-radius: 5px;
  display: block; text-decoration: none;
  transition: transform .3s;
}
.park-card:hover { transform: scale(1.015); }
.park-card.park-tall { grid-row: span 2; }
.park-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .4s;
}
.park-card:hover .park-img { transform: scale(1.06); }
.park-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,20,60,.9) 0%, rgba(0,20,60,.12) 55%, transparent 100%);
}
.park-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.3rem; z-index: 2; }
.park-content .badge { margin-bottom: .45rem; display: block; width: fit-content; }
.park-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: .28rem;
}
.park-card:not(.park-tall) .park-name { font-size: 1.05rem; }
.park-meta { font-size: .74rem; color: rgba(255,255,255,.62); display: flex; align-items: center; gap: .4rem; }
.park-meta svg { flex-shrink: 0; }
/* Park placeholder gradients */
.park-img-a { background: linear-gradient(135deg,#001a30,#003366,#0055a0); }
.park-img-b { background: linear-gradient(135deg,#001428,#002a50,#1a5080); }
.park-img-c { background: linear-gradient(135deg,#0a1f0a,#1a4a1a,#2d7a3a); }
.park-img-d { background: linear-gradient(135deg,#001520,#003040,#005060); }
.park-img-e { background: linear-gradient(135deg,#0a0a20,#1a1a50,#2a3080); }

/* ── Highlights section (dark blue bg) ── */
.hl-section { background: var(--blue); padding: 4rem 0; }
.hl-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.hl-grid .card { text-decoration: none; }

/* ── Category strip ── */
.cat-section { background: var(--gold-pale); padding: 3.5rem 0; border-top: 3px solid var(--gold); }
.cat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .9rem; margin-top: 1.6rem; }
.cat-item {
  text-align: center; padding: 1.4rem 1rem; background: #fff;
  border: 1px solid rgba(0,47,108,.08); border-radius: 5px; text-decoration: none;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.cat-item:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,47,108,.1); border-color: rgba(0,47,108,.2); }
.cat-icon { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto .7rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.cat-name { font-size: .82rem; font-weight: 700; color: var(--text-dark); margin-bottom: .2rem; }
.cat-sub { font-size: .7rem; color: var(--text-muted); }

/* ── Blog grid ── */
.blog-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 1.3rem; }
.blog-grid .card { text-decoration: none; display: flex; flex-direction: column; }
.blog-grid .card-body { flex: 1; display: flex; flex-direction: column; }
.blog-grid .card-desc { flex: 1; }
.blog-card-main .card-img { height: 240px; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .hero { padding-bottom: 3.5rem; }
  .hero-scroll { display: none; }
  .hero-content { padding: 0 1.4rem; }
  .parks-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 160px 160px;
  }
  .park-card.park-tall { grid-row: span 1; grid-column: span 2; }
  .hl-grid { grid-template-columns: 1fr 1fr; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card-main .card-img { height: 200px; }
}
@media (max-width: 540px) {
  .hero-title { font-size: 2.4rem; }
  .parks-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .park-card.park-tall { grid-column: span 1; }
  .park-card { height: 220px; }
  .hl-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .hero-ctas { flex-direction: column; align-items: flex-start; }
  .btn { text-align: center; }
}