/* =========================================================
   H. VÄHÄMAA – Selkeä mobile-first perus-CSS (vaalea teema)
   ========================================================= */

/* 0) Reset + muuttujat */
*, *::before, *::after { box-sizing: border-box; }

:root{
  --maxw: 1000px;
  --pad: 16px;

  --bg: #f4f4f4;
  --fg: #525252;
  --muted: #555a60;
  --line: #e5e7eb;
  --testi:#ded6c6;
  --head:#ffffff;
  --logo:#000000;

  --brand: #0f172a;  /* linkkien väri yms. */
  --shadow: 0 8px 24px rgba(0,0,0,.06);
}

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Rubik", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  line-height: 1.6;
}

/* Yleiset elementit */
img { max-width: 100%; height: auto; display: block; }
a  { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }  /* sisältölinkit alleviivaa hoverissa */

h1 { font-size: clamp(1.6rem, 2.5vw, 2.2rem); margin: 1rem 0 .5rem; }
h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin: 1rem 0 .5rem; }
p  { margin: 0 0 .9rem; color: var(--muted); }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

/* 1) HEADER – brändi keskellä, hamburger oikealla */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--head);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}
.topbar { padding-block: .85rem; }
.topbar-centered {
  display: grid;
  grid-template-columns: 1fr auto auto; /* spacer | brand | nav */
  align-items: center;
  gap: 12px;
}
/* HEADER – brändi vasemmalle, hamburger/nav oikealle */
.topbar-centered {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: .85rem;
}

/* Poistetaan spacer, sitä ei enää tarvita */
.topbar-centered .spacer-left { display: none; }

/* Brändi vasemmalle */
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--logo);
}
.brand-text {
  font-family: "Birthstone", cursive;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem); /* oli 1.6 → 2  |  2.2 → 3 */
  letter-spacing: 0.03em;
}


/* NAV pysyy oikealla */
.site-nav {
  display: flex;
  align-items: center;
  gap: .75rem;
  justify-content: flex-end;
}


/* NAV */
.site-nav { justify-self: end; display: flex; align-items: center; gap: .75rem; }

/* Hamburger = details/summary */
.nav { position: relative; display: inline-block; }
.nav > summary {
  list-style: none; cursor: pointer;
  border: 1px solid #cbd5e1; border-radius: 8px; padding: .46rem .66rem;
}
.nav > summary::marker { display: none; }

/* Kolme viivaa */
.hamb { width: 26px; height: 2px; background: var(--fg); display: inline-block; position: relative; }
.hamb::before, .hamb::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--fg);
}
.hamb::before { top: -7px; }
.hamb::after  { top: 7px; }

/* Avautuva valikko mobiilissa */
.menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: .5rem; min-width: 200px; box-shadow: var(--shadow);
}
.menu a {
  display: block; padding: .55rem .75rem; border-radius: 6px; color: var(--fg);
}
.menu a:hover { background: rgba(0,0,0,.05); text-decoration: none; }

/* Desktopin vaakavalikko piilossa mobiilissa */
.menubar { display: none; }
.menubar a { padding: .5rem .75rem; border-radius: 8px; }
.menubar a:hover { background: rgba(0,0,0,.05); text-decoration: none; }

/* Headerissa ei koskaan alleviivausta */
.site-header a,
.site-header a:hover { text-decoration: none; }

/* Desktop: näytä menubar, piilota hamburger */
@media (min-width: 768px) {
  .nav { display: none; }
  .menubar { display: flex; gap: .5rem; flex-wrap: wrap; }
}

/* Aktiivisen sivun korostus */
.menubar a[aria-current="page"],
.menu a[aria-current="page"] {
  font-weight: 600; text-decoration: underline;
}

/* 2) MAIN – intro-kortti */
main { padding-block: 1rem 2rem; }

.intro {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 1rem; box-shadow: var(--shadow);
  display: grid; gap: 1rem; /* mobiili: yksi palsta */
}
a.button {
  display: inline-block; padding: .6rem .9rem;
  border-radius: 8px; background: var(--brand); color: #fff; text-decoration: none;
}
a.button:hover { opacity: .9; text-decoration: none; }

@media (min-width: 768px) {
  .intro {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 1.25rem 1.5rem;
  }
  .intro-text { padding-right: .5rem; }
  .intro-media { padding-left: .5rem; }
}

@media (min-width: 1120px) {
  :root { --pad: 24px; }
  .intro { padding: 1.75rem 2rem; }
}

/* ------------------------------------
   GALLERIA – yksi sarake, isot kuvat
   ------------------------------------ */
.gallery {
  display: grid;
  grid-template-columns: 1fr;  /* vain yksi sarake */
  gap: 40px;                   /* reilu väli kuvien väliin */
  margin: 2rem 0 3rem;
}

.gallery figure {
  margin: 0;
  border: none;
  border-radius: 10px;
  box-shadow: var(--shadow);
  background: var(--bg);
  overflow: hidden;
  text-align: center;
}

/* Kuva täysleveänä, säilytä kuvasuhde */
.gallery img {
  width: 100%;
  height: auto;
  object-fit: contain;
  aspect-ratio: auto;
  display: block;
  border-radius: 10px;
}

/* Kuvateksti */
.gallery figcaption {
  margin-top: .5rem;
  font-size: 1rem;
  color: var(--muted);
}


/* 4) HINNASTO */
.pricing {
  background: var(--head); border: 1px solid var(--line);
  border-radius: 12px; padding: 1rem; margin: 1rem 0 2rem; box-shadow: var(--shadow);
}
.price-list { margin: .5rem 0 1rem; padding: 0; }
.price-list > div {
  display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem;
  padding: .6rem .2rem; border-bottom: 1px solid var(--line);
}
.price-list > div:last-child { border-bottom: none; }
.price-list dt { font-weight: 600; color: var(--fg); }
.price-list dd { margin: 0; font-variant-numeric: tabular-nums; }
.pricing .note { color: var(--muted); font-size: .95rem; }

/* 5) FOOTER */
.site-footer { border-top: 1px solid var(--line); background: var(--testi); }
.footer-inner { text-align: center; color: var(--muted); padding-block: 1rem 2rem; }
.footer-inner a { color: inherit; }