/* Sub-page skin, shared by secto-rally.html and opas.html.
 *
 * Same locked dark theme and same single accent as s1, the usva gold, so a
 * sub-page never feels like a different website. Radius is zero everywhere,
 * as on the parent.
 */

/* The subpages take Usva's palette, in the shared roles, so the switcher on
   the front page and the switcher here are moving the same thing.
   See assets/css/teema.css for what each role is. */
:root {
  --pohja: #131712;      --pohja-rgb: 19 23 18;
  --pinta: #181d16;      --pinta-rgb: 24 29 22;
  --syva: #232a20;
  --viiva: #2c3329;
  --otsikko: #f4f5f1;
  --teksti: #e8eae4;
  --teksti-2: #b6bfad;
  --teksti-3: #9ba595;
  --korostus: #d7c1a2;
  --korostus-ink: #131712;
  --jalka-pohja: #11150f;  --jalka-rgb: 17 21 15;
  --jalka-otsikko: #f4f5f1;
  --jalka-teksti: #e8eae4;
  --jalka-teksti-2: #b6bfad;
  --jalka-teksti-3: #9ba595;
  --jalka-korostus: #d7c1a2;
  --usva-a: 215 193 162;  --usva-b: 189 166 137;
  --usva-c: 156 136 109;  --usva-d: 139 118 94;
  --usva-voima: 1;
}

/* Two legacy names kept pointing at their role tokens, for the rules further
   down that still ask for them.
   This block used to carry five more lines of the form --teksti: var(--teksti).
   A custom property that refers to itself is invalid at computed-value time,
   so rather than being harmless no-ops those lines destroyed --pohja, --viiva,
   --teksti, --teksti-2 and --teksti-3 for every page loading this stylesheet.
   The visible result was a white page with black body text and headings in
   near-white on near-white: opas and secto-rally were both affected. The
   values they were meant to preserve are already set in the block above, so
   the repair is simply not to overwrite them. */
:root {
  --pohja-2: var(--pinta);
  --kulta: var(--korostus);
}

body.sivu {
  /* Read by the swatch in the palette switcher. */
  --oma-pohja: #131712;
  --oma-korostus: #d7c1a2;

  background: var(--pohja);
  color: var(--teksti);
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.62;
}

::selection { background: var(--kulta); color: var(--pohja); }

h1, h2, .kicker, .iso-teksti {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 200;
  letter-spacing: -0.022em;
}

/* --- top bar -------------------------------------------------------------- */

.ylin {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem 2rem;
  min-height: 72px;
  padding: 0 var(--sivu);
  z-index: 5;
}
.ylin::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 260%;
  background: linear-gradient(to bottom,
    rgba(12, 15, 11, 0.88) 0%, rgba(12, 15, 11, 0.56) 46%, rgba(12, 15, 11, 0) 100%);
  pointer-events: none; z-index: -1;
}
.tunnus { margin-right: auto; }
.tunnus-alanimi { color: var(--kulta); opacity: 1; }
.valikko ul { list-style: none; display: flex; gap: 1.6rem; }
.valikko a {
  font-size: 0.875rem; font-weight: 600; text-decoration: none;
  padding: 0.35rem 0; border-bottom: 2px solid transparent;
}
.valikko a:hover, .valikko [aria-current] { border-bottom-color: var(--kulta); }
.ylin-puh { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ylin-puh a { text-decoration: none; border-bottom: 2px solid var(--kulta); }

/* --- breadcrumb ----------------------------------------------------------- */

.murut {
  position: relative;
  padding: 0.9rem var(--sivu) 0;
  font-size: 0.8125rem;
  color: var(--teksti-3);
}
.murut ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.murut li:not(:last-child)::after { content: "/"; margin-left: 0.5rem; color: var(--viiva); }
.murut a { color: var(--teksti); text-underline-offset: 3px; }
.murut::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1rem; bottom: -1.4rem;
  background: linear-gradient(to bottom, rgba(12, 15, 11, 0.5), rgba(12, 15, 11, 0));
  pointer-events: none; z-index: -1;
}
.murut li { color: var(--teksti-2); }

/* --- hero ----------------------------------------------------------------- */

.kansi {
  position: relative;
  min-height: 74svh;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  isolation: isolate;
}
.kansi > .kansi-kuva,
.kansi > .kansi-varjo,
.kansi > .kansi-usva {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.kansi > .kansi-kuva { object-fit: cover; z-index: 1; }
.kansi > .kansi-varjo { z-index: 2; }
.kansi > .kansi-usva { z-index: 3; pointer-events: none; }
.kansi > .ylin, .kansi > .kansi-teksti, .kansi > .murut { position: relative; z-index: 4; }

.kansi-varjo {
  background:
    linear-gradient(to top,
      rgba(12, 15, 11, 0.92) 0%, rgba(12, 15, 11, 0.70) 26%,
      rgba(12, 15, 11, 0.26) 54%, rgba(12, 15, 11, 0.10) 72%,
      rgba(12, 15, 11, 0.46) 92%, rgba(12, 15, 11, 0.72) 100%),
    linear-gradient(to right,
      rgba(12, 15, 11, 0.56) 0%, rgba(12, 15, 11, 0.18) 46%, rgba(12, 15, 11, 0) 76%);
}

.kansi-teksti { align-self: end; padding: 0 var(--sivu) clamp(2.5rem, 7vh, 4.5rem); }
.ralli-logo {
  display: block; width: clamp(5.5rem, 4rem + 6vw, 8.5rem); height: auto;
  margin-bottom: 1.25rem; border-radius: 6px;
}
.kansi h1 {
  font-size: clamp(2.25rem, 1.3rem + 4.4vw, 4.75rem);
  line-height: 1.0; max-width: 16ch; color: var(--otsikko);
}
.alle { margin-top: 1.25rem; max-width: 46ch; font-size: 1.125rem; color: var(--teksti); }

/* --- page body ------------------------------------------------------------ */

main {
  position: relative;
  z-index: 1;
  background: var(--pohja);
}
main::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -6rem; height: 6rem;
  background: linear-gradient(to bottom, rgba(19, 23, 18, 0) 0%, rgba(19, 23, 18, 0.7) 58%, var(--pohja) 100%);
  pointer-events: none;
}
.taustausva {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0; pointer-events: none;
}
main > * { position: relative; z-index: 1; }

.lohko { padding: clamp(3rem, 8vh, 5.5rem) var(--sivu); }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem); line-height: 1.06; color: var(--otsikko); }
.lohko p { margin-top: 1.15rem; max-width: 62ch; color: var(--teksti-2); }
.iso-teksti {
  margin-top: 1.4rem; font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
  line-height: 1.32; color: var(--teksti); max-width: 36ch;
}

.korostus {
  margin-top: 2rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--kulta);
  color: var(--teksti);
  max-width: 54ch;
}

.varaa-rivi { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 1.75rem; }
.varaa-numero {
  font-size: clamp(1.625rem, 1.3rem + 1.7vw, 2.375rem);
  font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.015em;
}
.varaa-numero a { text-decoration: none; border-bottom: 3px solid var(--kulta); }
.varaa-posti a { color: var(--teksti-2); text-underline-offset: 3px; }

/* --- pictures ------------------------------------------------------------- */

.kehys { margin: 0; }
.kehys-levy {
  position: relative;
  padding: clamp(0.5rem, 1vw, 0.85rem);
  background: linear-gradient(180deg, var(--syva) 0%, var(--syva) 100%);
  box-shadow:
    inset 0 1px 0 rgba(224, 232, 214, 0.10),
    0 2px 4px rgba(8, 11, 7, 0.55),
    0 22px 48px -18px rgba(8, 11, 7, 0.85);
}
.kehys-levy img { display: block; width: 100%; }
.kehys-levy::after {
  content: "";
  position: absolute; inset: clamp(0.5rem, 1vw, 0.85rem);
  border: 1px solid rgba(12, 16, 10, 0.55);
  box-shadow: inset 0 0 0 1px rgba(224, 232, 214, 0.07);
  pointer-events: none;
}

/* --- booking skeleton -------------------------------------------------------- */

.varaa-lomake {
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 46rem;
}
.varaa-kentta { display: flex; flex-direction: column; gap: 0.4rem; }
.varaa-kentta-leveä { grid-column: span 2; }
.varaa-lomake label { font-size: 0.8125rem; color: var(--teksti-2); }
.varaa-lomake input, .varaa-lomake select, .varaa-lomake textarea {
  padding: 0.6rem 0.7rem;
  background: var(--pinta);
  border: 1px solid var(--viiva);
  color: var(--teksti);
  font: inherit;
  font-size: 0.9375rem;
}
.varaa-toiminto {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 0.5rem;
  padding: 0.7rem 1.3rem;
  background: none;
  border: 1px solid var(--kulta);
  color: var(--kulta);
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
}
.varaa-toiminto:hover { background: var(--kulta); color: var(--pohja); }
.varaa-laheta { border-color: var(--kulta); background: var(--kulta); color: var(--pohja); }
.varaa-laheta:hover { opacity: 0.88; }
.varaa-tulos { grid-column: 1 / -1; margin-top: -0.5rem; color: var(--teksti); max-width: 52ch; }
.varaa-tulos:empty { display: none; }
.varaa-huom { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--teksti-3); }

@media (max-width: 46rem) {
  .varaa-lomake { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .varaa-kentta-leveä { grid-column: span 2; }
}

/* --- photo gallery ---------------------------------------------------------- */

.galleria {
  list-style: none;
  margin-top: clamp(2rem, 5vh, 3rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}
/* A little rhythm, not a uniform grid of identical squares: every fourth
   tile runs wide. Picked by position, not by hand, so adding a photo to
   the list never needs a matching layout decision. */
.galleria-kohta:nth-child(4n+1) .galleria-kuva { grid-column: span 2; }
.galleria-kohta:nth-child(4n+1) .kehys-levy { aspect-ratio: 16 / 9; }

.galleria-kuva {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: zoom-in;
}
.galleria-kuva .kehys-levy { aspect-ratio: 4 / 3; overflow: hidden; }
.galleria-kuva .kehys-levy img { width: 100%; height: 100%; object-fit: cover; }
.galleria-kuva:hover .kehys-levy::after { border-color: rgba(215, 193, 162, 0.55); }

/* --- lightbox ---------------------------------------------------------------- */

.valokaappi {
  padding: 0;
  border: 0;
  max-width: min(94vw, 68rem);
  max-height: 90vh;
  background: var(--syva);
  color: var(--teksti);
}
.valokaappi::backdrop { background: rgba(8, 11, 7, 0.88); }
.valokaappi[open] { display: flex; flex-direction: column; }

.valokaappi-sulje {
  align-self: flex-end;
  margin: 0.75rem 0.75rem 0;
  width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid rgba(244, 245, 241, 0.28);
  color: var(--teksti);
  cursor: pointer;
}
.valokaappi-sulje svg { width: 1.1rem; height: 1.1rem; }
.valokaappi-sulje:hover { border-color: var(--kulta); color: var(--kulta); }

.valokaappi-runko {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0.5rem clamp(1rem, 4vw, 3rem) clamp(1rem, 3vh, 2rem);
}
.valokaappi-kuva { max-width: 100%; max-height: 68vh; display: block; }
.valokaappi-teksti {
  margin: 0 clamp(1rem, 4vw, 3rem) clamp(1rem, 3vh, 1.5rem);
  text-align: center;
  font-size: 0.9375rem;
  color: var(--teksti-2);
}
.valokaappi-nuoli {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem; height: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: rgba(12, 15, 11, 0.55);
  border: 1px solid rgba(244, 245, 241, 0.28);
  color: var(--otsikko);
  cursor: pointer;
}
.valokaappi-nuoli svg { width: 1.25rem; height: 1.25rem; }
.valokaappi-nuoli:hover { border-color: var(--kulta); color: var(--kulta); }
.valokaappi-nuoli:active { transform: translateY(-50%) translateY(1px); }
.valokaappi-edellinen { left: clamp(0.25rem, 1.5vw, 1rem); }
.valokaappi-seuraava { right: clamp(0.25rem, 1.5vw, 1rem); }

@media (max-width: 46rem) {
  .galleria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .valokaappi-kuva { max-height: 56vh; }
}
@media (max-width: 30rem) {
  .galleria { grid-template-columns: minmax(0, 1fr); }
  .galleria-kohta:nth-child(4n+1) .galleria-kuva { grid-column: span 1; }
  .galleria-kohta:nth-child(4n+1) .kehys-levy { aspect-ratio: 4 / 3; }
}

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

@media (prefers-reduced-motion: no-preference) {
  .paljastus-kaynnissa [data-paljasta] {
    opacity: 0; transform: translateY(18px);
    transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .paljastus-kaynnissa [data-paljasta].nakyy { opacity: 1; transform: none; }
}

/* --- footer --------------------------------------------------------------- */

.jalka { padding: clamp(3.5rem, 9vh, 6rem) var(--sivu) clamp(4.5rem, 12vh, 8rem); }
.jalka h2 {
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--teksti-3);
}
.nimet { margin-top: 1.25rem; font-family: "Newsreader", Georgia, serif; font-weight: 200; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); color: var(--otsikko); }
.jalka p { margin-top: 0.4rem; color: var(--teksti-2); }
.jalka .numero { margin-top: 1.6rem; font-size: clamp(1.625rem, 1.3rem + 1.8vw, 2.5rem); font-weight: 700; font-variant-numeric: tabular-nums; }
.jalka .numero a { text-decoration: none; border-bottom: 3px solid var(--kulta); }
.paluu { margin-top: 2rem; font-size: 0.9375rem; }
.paluu a { color: var(--teksti-2); text-underline-offset: 3px; }

@media (max-width: 46rem) {
  .ylin { flex-wrap: wrap; padding-top: 0.9rem; padding-bottom: 0.9rem; min-height: 0; }
  .tunnus { margin-right: 0; }
  .ylin-puh { margin-left: auto; }
  .valikko { order: 3; width: 100%; }
  .valikko ul { flex-wrap: wrap; gap: 0.4rem 1.1rem; }
}

/* --- countdown, secto-rally ------------------------------------------------ */

.laskuri {
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 3.5rem;
}
.laskuri dt {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 200;
  font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
  line-height: 0.88;
  color: var(--kulta);
  font-variant-numeric: tabular-nums;
}
.laskuri dd { margin: 0.6rem 0 0; font-size: 0.875rem; color: var(--teksti-2); }
.laskuri-ohi { margin-top: 1.5rem; font-size: 1.125rem; color: var(--teksti); }

/* --- rally weekend, a real sequence so numbering is earned ----------------- */

.ohjelma { list-style: none; margin-top: clamp(2rem, 5vh, 3rem); counter-reset: paiva; max-width: 54rem; }
.ohjelma li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0 1.5rem;
  padding: 1.1rem 0;
}
.ohjelma li + li { border-top: 1px solid var(--viiva); }
.ohjelma li::before {
  counter-increment: paiva;
  content: counter(paiva);
  font-variant-numeric: tabular-nums;
  color: var(--kulta);
  font-weight: 700;
  font-size: 0.9375rem;
  padding-top: 0.2rem;
}
.paiva { font-weight: 700; color: var(--otsikko); }
.kuvaus { margin-top: 0.35rem !important; color: var(--teksti-2); max-width: 52ch; }
/* The number takes the first column of both rows; day and description share the second. */
.ohjelma li::before { grid-row: span 2; }
.ohjelma .paiva, .ohjelma .kuvaus { grid-column: 2; }

/* --- what is on offer, three unequal blocks ------------------------------- */

.majoitus {
  margin-top: clamp(2rem, 5vh, 3rem);
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
}
.majoitus h3 {
  font-size: 1.0625rem; font-weight: 700; color: var(--otsikko);
  padding-bottom: 0.65rem; border-bottom: 1px solid var(--viiva);
}
.majoitus p { margin-top: 0.9rem; color: var(--teksti-2); font-size: 0.9375rem; }

/* --- guide layout ---------------------------------------------------------- */

.opas-runko {
  position: relative;
  z-index: 1;
  background: var(--pohja);
  display: grid;
  grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
  gap: 0 clamp(2rem, 5vw, 4.5rem);
  padding: 0 var(--sivu);
}
.opas-runko::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -6rem; height: 6rem;
  background: linear-gradient(to bottom, rgba(19, 23, 18, 0) 0%, rgba(19, 23, 18, 0.7) 58%, var(--pohja) 100%);
  pointer-events: none;
}
.opas .taustausva { z-index: 0; }
.opas main { background: none; }
.opas main::before { content: none; }
.opas main > * { position: relative; z-index: 1; }

.hakemisto {
  position: sticky; top: 0; align-self: start;
  padding: clamp(2.5rem, 7vh, 4rem) clamp(1rem, 2vw, 1.75rem) 2rem 0;
  border-right: 1px solid var(--viiva);
  z-index: 2;
}
.hakemisto h2 {
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--teksti-3);
}
.hakemisto ol { list-style: none; margin-top: 0.9rem; counter-reset: kohta; }
.hakemisto a {
  display: block; padding: 0.4rem 0 0.4rem 0.8rem;
  font-size: 0.9375rem; text-decoration: none; color: var(--teksti-2);
  border-left: 3px solid transparent;
}
.hakemisto a:hover { color: var(--teksti); border-left-color: var(--kulta); }

.jakso { padding: clamp(2.5rem, 7vh, 4rem) 0; }
.jakso + .jakso { border-top: 1px solid var(--viiva); }
.jakso p { margin-top: 1.1rem; max-width: 60ch; color: var(--teksti-2); }
.jakso .kehys { margin-top: 2rem; }

.tiedot { margin-top: 1.75rem; max-width: 40rem; }
.tiedot > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 1.5rem; padding: 0.6rem 0;
}
.tiedot > div + div { border-top: 1px solid var(--viiva); }
.tiedot dt { color: var(--teksti); }
.tiedot dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--otsikko); }

.kysymykset { margin-top: 1.75rem; max-width: 56rem; }
.kysymykset > div { padding: 1.1rem 0; }
.kysymykset > div + div { border-top: 1px solid var(--viiva); }
.kysymykset dt { font-weight: 700; color: var(--otsikko); }
.kysymykset dd { margin: 0.4rem 0 0; color: var(--teksti-2); max-width: 58ch; }

@media (max-width: 62rem) {
  .opas-runko { grid-template-columns: minmax(0, 1fr); }
  .hakemisto {
    position: static; border-right: none; border-bottom: 1px solid var(--viiva);
    padding: clamp(2rem, 5vh, 3rem) 0 1.25rem;
  }
  .hakemisto ol { display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; }
  .hakemisto a { border-left: none; border-bottom: 2px solid transparent; padding: 0.3rem 0.8rem 0.3rem 0; }
  .hakemisto a:hover { border-left-color: transparent; border-bottom-color: var(--kulta); }
  .majoitus { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 46rem) {
  .laskuri { gap: 1rem 2.25rem; }
  .ohjelma li { grid-template-columns: 2rem minmax(0, 1fr); gap: 0 1rem; }
  .tiedot > div { grid-template-columns: minmax(0, 1fr); }
  .tiedot dd { text-align: left; margin-top: 0.15rem; }
}

.vuosiluku {
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 0.9375rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--kulta);
  vertical-align: middle;
  margin-left: 0.6rem;
}