/* PERALA_ULKOLAIDAT_PAGE_STYLE_FIX_20260523
   Varmistaa, ettei Ulkolaidat-ohjesivu jää valkoiseksi irtosivuksi. */

.ulkolaidat-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(1rem, 2vw, 2rem);
}

.ulkolaidat-page section,
.ulkolaidat-page .card,
.ulkolaidat-page .notice-box {
  border-radius: 18px;
}

.ulkolaidat-page code {
  font-size: 1.05em;
  font-weight: 700;
  padding: 0.12em 0.35em;
  border-radius: 0.4em;
  white-space: nowrap;
}

.ulkolaidat-page h1,
.ulkolaidat-page h2 {
  text-wrap: balance;
}

.ulkolaidat-page p,
.ulkolaidat-page li {
  line-height: 1.65;
}

.ulkolaidat-page ul {
  padding-left: 1.35rem;
}

.ulkolaidat-page a {
  font-weight: 700;
}

/* PERALA_ULKOLAIDAT_UNIQUE_HERO_START */
.ulkolaidat-page #ulkolaidat-hero {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  padding: clamp(1.4rem, 2vw, 2.2rem);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(5,9,16,0.32) 0%, rgba(5,9,16,0.68) 100%),
    linear-gradient(90deg, rgba(7,10,16,0.88) 0%, rgba(7,10,16,0.58) 42%, rgba(7,10,16,0.48) 100%),
    url("/assets/peralan-ulkolaidat-hero-01.webp?v=20260523-hero01") center center / cover no-repeat;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  border: 1px solid rgba(180, 205, 220, 0.16);
}

.ulkolaidat-page #ulkolaidat-hero h1,
.ulkolaidat-page #ulkolaidat-hero p,
.ulkolaidat-page #ulkolaidat-hero li,
.ulkolaidat-page #ulkolaidat-hero strong,
.ulkolaidat-page #ulkolaidat-hero code {
  position: relative;
  z-index: 1;
}

.ulkolaidat-page #ulkolaidat-hero .notice-box {
  position: relative;
  z-index: 1;
  max-width: 42rem;
  background: rgba(8, 12, 20, 0.58);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255,255,255,0.10);
}

.ulkolaidat-page #ulkolaidat-hero h1 {
  max-width: 18ch;
}

.ulkolaidat-page #ulkolaidat-hero .lead {
  max-width: 62ch;
}

.ulkolaidat-page #ulkolaidat-hero code {
  background: rgba(255,255,255,0.10);
}

@media (max-width: 760px) {
  .ulkolaidat-page #ulkolaidat-hero {
    min-height: 360px;
    background-position: center center;
  }
}
/* PERALA_ULKOLAIDAT_UNIQUE_HERO_END */