/* ==========================================================================
   blocks.css — flexible content -blokkien lisätyylit
   Ladataan main.css:n jälkeen. Yksi osio per blokki.
   ========================================================================== */

/* --- Header heron päällä (oli jokaisen sivun <head>issa) ----------------- */
body.has-hero .site-header {
  position: relative; z-index: 50; margin-bottom: -132px;
  background: transparent; box-shadow: none;
}
body.has-hero .hero,
body.has-hero .page-hero {
  flex-direction: column; justify-content: flex-end;
  height: 90vh; min-height: 90vh;
}
body.has-hero .hero__inner,
body.has-hero .page-hero > .wrap {
  position: relative; z-index: 2;
  margin-top: auto; margin-bottom: 0;
  padding-top: 0; padding-bottom: clamp(2.5rem, 6vh, 5rem);
}
@media (min-width: 861px) {
  .site-header .nav__submenu { pointer-events: none; transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease; }
  .site-header .nav__item--has-menu:hover > .nav__submenu,
  .site-header .nav__item--has-menu:focus-within > .nav__submenu {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
  }
}
@media (max-width: 860px) {
  body.has-hero .site-header { height: 104px; margin-bottom: -104px; }
  body.has-hero .site-header__inner { height: 104px; padding-top: 14px; }
}

/* Tumma varatausta heroille, jos kuva puuttuu tai latautuu hitaasti */
.hero__media,
.page-hero__media {
  background:
    radial-gradient(120% 80% at 20% 20%, #4a3f30 0%, transparent 60%),
    linear-gradient(135deg, #2b2419 0%, #1a140f 100%);
}

/* --- Yhteiset osat -------------------------------------------------------- */
/* Osion otsikko (partial: section-head) */
.section-head { margin-bottom: 3.5rem; }
.section-head > :last-child { margin-bottom: 0; }

/* Linkkirivi (partial: link) */
.block__link { margin: 1.5rem 0 0; }
.cta-band .block__link { margin-top: 1.5rem; }

/* Tummalla taustalla linkki ja eyebrow aina vaaleina — ei erillistä modifieria PHP:ssä */
.section--deep .link-arrow { color: var(--on-dark); border-color: rgba(242,237,228,0.5); }
.section--deep .link-arrow:hover { color: #fff; border-color: var(--gold-bright); }
.section--deep .eyebrow { color: var(--gold-bright); }
.section--deep .eyebrow::before,
.section--deep .eyebrow::after { background: var(--gold-bright); }
.cta-band .eyebrow { justify-content: center; }
.cta-band .link-arrow { margin-top: 0; }

/* Peräkkäiset samantaustaiset blokit: ei tuplapaddingia */
[data-bg="default"] + [data-bg="default"],
[data-bg="alt"] + [data-bg="alt"],
[data-bg="deep"] + [data-bg="deep"] { padding-top: 0; }

/* Peräkkäiset galleriat (esim. tehosteseinien tekniikat): tiiviimpi väli */
.block--gallery:has(+ .block--gallery[data-bg="default"])[data-bg="default"],
.block--gallery:has(+ .block--gallery[data-bg="alt"])[data-bg="alt"],
.block--gallery:has(+ .block--gallery[data-bg="deep"])[data-bg="deep"] {
  padding-bottom: clamp(3rem, 5vw, 5rem);
}

/* --- Rikas teksti (wp_editor-kentän output) ------------------------------- */
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h3 { margin-top: 2.5rem; }
.prose ul { list-style: none; padding: 0; margin: 1.5rem 0; }
.prose ul li {
  position: relative; padding-left: 2rem; margin-bottom: 0.9rem;
  color: var(--ink-soft); max-width: 60ch;
}
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.75rem; height: 0.4rem;
  border-left: 1.5px solid var(--line-gold);
  border-bottom: 1.5px solid var(--line-gold);
  transform: rotate(-45deg);
}
.section--deep .prose ul li { color: var(--on-dark-soft); }
.prose ol { padding-left: 1.3rem; margin: 1.5rem 0; }
.prose a:not(.link-arrow) { color: var(--line-gold); text-decoration: underline; text-underline-offset: 0.2em; }

/* --- Tekstiosio ----------------------------------------------------------- */
.block-text__note {
  margin-top: 1.5rem;
  color: var(--line-gold);
  font-style: italic;
}

/* Ilman kuvaa: kapea palsta keskellä.
   Kuvan kanssa: kaksi palstaa, kuva keskitetty pystysuunnassa tekstiin nähden. */
.block-text { width: min(100% - 3rem, var(--wrap-slim)); }
.block-text__body > :last-child { margin-bottom: 0; }
.block-text--has-image {
  width: min(100% - 3rem, var(--wrap));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.block-text--image-left .block-text__media { order: -1; }
.block-text__media {
  aspect-ratio: 4 / 5;
  background: var(--bg-alt);
  overflow: hidden;
}
.section--alt .block-text__media { background: var(--bg); }
.block-text__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .block-text--has-image { grid-template-columns: 1fr; }
  .block-text__media { order: -1; aspect-ratio: 4 / 3; }
}

/* --- Galleria ------------------------------------------------------------- */
.block-gallery__head { max-width: var(--wrap-slim); margin-bottom: 2.5rem; }
.block-gallery__head > :last-child { margin-bottom: 0; }

/* --- Kumppanit ------------------------------------------------------------ */
.block-partners__outro { margin-top: 2.5rem; }
.block-partners__outro > :last-child { margin-bottom: 0; }

/* --- Yhteystiedot --------------------------------------------------------- */
.contact-grid:first-child { margin-top: 0; }
.contact-card p { margin-bottom: 0; }
.contact__actions { margin-top: 3.5rem; }
.contact__social { display: flex; gap: 1.5rem; margin-top: 2rem; }
.contact__social a { color: var(--line-gold); }
.contact__social a:hover { text-decoration: underline; }

/* ==========================================================================
   Mobiili- ja saavutettavuuskorjaukset
   ========================================================================== */

/* Hero: min-height eikä kiinteää korkeutta → sisältö ei leikkaudu vaakatasossa.
   svh = mobiiliselaimen osoiterivi huomioitu, ei hyppimistä vierittäessä. */
body.has-hero .hero,
body.has-hero .page-hero {
  height: auto;
  min-height: 90vh;
  min-height: 90svh;
}

/* Sivun heron eyebrow peri `.page-hero p` -koon (step-1) → liian iso ja ylivuoto 320px:llä */
.page-hero .eyebrow { font-size: var(--step--1); }
/* Eyebrow on <p>, joten se peri p:n max-width: 62ch → pitkät yläotsikot rivittyivät turhaan (esim. CTA) */
.eyebrow { max-width: none; }

/* Ilman JS:ää sisältö näkyy (reveal piilotti kaiken, jos skripti ei latautunut) */
html:not(.js) .reveal { opacity: 1; transform: none; }

/* Karuselli näppäimistöllä: track saa fokuksen, nuolinäppäimet vierittävät */
.carousel__track:focus-visible { outline-offset: 4px; }

/* Mobiilivalikon yhteystiedot (desktopilla headerin oikeassa yläkulmassa) */
.nav__contact { display: none; }

@media (max-width: 860px) {
  .nav__contact {
    display: flex; flex-direction: column; gap: 0.25rem;
    padding: 1.25rem 1.75rem; border-bottom: 0;
  }
  .nav__contact a {
    display: block; padding: 0.6rem 0;
    color: var(--line-gold); font-size: 1rem; letter-spacing: 0.02em;
  }
}

@media (max-width: 560px) {
  /* Eyebrow: kapeampi harvennus, ettei rivity/vuoda yli */
  .eyebrow { letter-spacing: 0.24em; gap: 0.75rem; }
  .eyebrow::before,
  .eyebrow::after { width: 1.25rem; flex: 0 0 auto; }

  /* Footerin logoteksti vuoti yli 320px:llä */
  .footer__brand .brand__name { letter-spacing: 0.2em; }

  /* Hero: CTA-rivi tiiviimmäksi */
  .hero__title { margin-bottom: 1.75rem; }
}

/* Footerin linkit: kosketusalue ≥ 24px (WCAG 2.2) */
.site-footer li { margin-bottom: 0.3rem; }
.site-footer li a,
.footer-social a,
.contact-card a { display: inline-block; padding-block: 0.3rem; }

/* Taustahimmennys headerin (z 50) alle, muuten se peittää avatun valikon */
@media (max-width: 860px) { .nav-backdrop { z-index: 40; } }