/* =========================================================
   Rauhala — tyylit
   Luonnonläheinen ilme: Punkaharjun harjumaisema, metsä ja Saimaa
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Work+Sans:wght@400;500;600&display=swap');

:root{
  /* Metsä & harju -paletti */
  --navy-900:#15311f;   /* syvä kuusimetsä */
  --navy-800:#1f4a2e;   /* männynvihreä */
  --navy-700:#2f6b45;   /* sammaleen vihreä */
  --gold:#c99a3f;       /* syksyinen ruska / hiekkaharju */
  --gold-soft:#f0cf82;
  --lake:#2f6f72;       /* Saimaan syvä sininen */
  --bark:#5c4128;       /* petäjän runko */
  --text-dark:#2b2a22;
  --text-muted:#6e6555;
  --bg-light:#fffdf7;
  --bg-section:#f3efe1;
  --border-soft:#e3dbc4;
  --sidebar-w:280px;

  --font-head:'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text-dark);
  background:
    radial-gradient(circle at 8% 4%, rgba(47,107,69,.06), transparent 32%),
    radial-gradient(circle at 96% 22%, rgba(201,154,63,.07), transparent 30%),
    radial-gradient(circle at 85% 92%, rgba(47,111,114,.05), transparent 35%),
    var(--bg-light);
  line-height:1.65;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--font-head); font-weight:600; margin:0 0 .6em; color:var(--navy-900); text-wrap:balance; }
p{ margin:0 0 1.1em; }
.container{ max-width:880px; margin:0 auto; padding:0 32px; }

*:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---------- Layout: sidebar + content ---------- */
.layout{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.05), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(240,207,130,.06), transparent 45%),
    linear-gradient(160deg, var(--navy-800), var(--navy-900) 70%);
  color:#e9edf3;
  padding:36px 30px;
  position:fixed;
  top:0; left:0; bottom:0;
  overflow-y:auto;
  overflow-x:hidden;
}
.sidebar::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.07;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='120' viewBox='0 0 140 120'%3E%3Cpath d='M0 120 L18 70 L30 92 L46 40 L60 88 L74 54 L88 96 L104 30 L118 90 L140 120 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:140px 120px;
}
.sidebar > *{ position:relative; z-index:1; }

.brand{ display:block; text-decoration:none; margin-bottom:8px; }
.brand-name{
  font-family:var(--font-head);
  font-size:1.9rem;
  font-weight:700;
  color:var(--gold-soft);
  letter-spacing:.03em;
  line-height:1;
}
.brand-tagline{
  margin-top:10px;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#c9d3c2;
  font-weight:600;
}

/* ---------- Language switch (flags) ---------- */
.lang-switch{
  display:flex;
  gap:8px;
  margin-top:22px;
}
.lang-switch a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:6px;
  text-decoration:none;
  font-size:.82rem;
  font-weight:600;
  color:#cfd7c8;
  border:1px solid rgba(255,255,255,.16);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.lang-switch a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.lang-switch a.active{
  color:var(--gold-soft);
  border-color:rgba(201,154,63,.5);
  background:rgba(201,154,63,.14);
}
.lang-switch .flag{ font-size:1.05rem; line-height:1; }
.lang-switch.compact a{ padding:6px 9px; }
.lang-switch.compact span{ display:none; }

.topbar-right{ display:flex; align-items:center; gap:10px; }

.sidebar nav{ margin-top:44px; }
.sidebar nav ul{ list-style:none; margin:0; padding:0; }
.sidebar nav li + li{ margin-top:6px; }
.sidebar nav a{
  display:block;
  text-decoration:none;
  color:#d3dacb;
  font-size:.98rem;
  font-weight:500;
  padding:10px 14px;
  border-radius:6px;
  transition:background .15s ease, color .15s ease;
}
.sidebar nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar nav a.active{ color:var(--gold-soft); background:rgba(201,154,63,.13); font-weight:600; }

.sidebar-footer{
  margin-top:52px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.82rem;
  color:#a9b3a0;
}
.sidebar-footer::before{ content:"📍 "; }
.sidebar-footer a{ color:var(--gold-soft); text-decoration:none; }
.sidebar-footer a:hover{ text-decoration:underline; }

.content{
  margin-left:var(--sidebar-w);
  flex:1;
  min-width:0;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  height:320px;
  overflow:hidden;
  background:var(--navy-900);
}
.hero img{
  width:100%; height:100%; object-fit:cover;
}
.hero.with-title::after{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(19,38,25,.74), rgba(19,38,25,.55) 55%, rgba(19,38,25,.38));
}
.hero.with-title img{ opacity:.85; }
.hero-title{
  position:absolute; left:0; right:0; bottom:0;
  padding:36px 48px;
  color:#fff;
  font-size:2.4rem;
  z-index:3;
  text-shadow:0 2px 14px rgba(10,20,12,.4);
}

/* Harjuviiva: aaltoileva harjunselänteen siluetti kuvan alla (vain otsikoton hero, esim. etusivu) */
.hero:not(.with-title)::before{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:52px;
  z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='48' viewBox='0 0 100 48' preserveAspectRatio='none'%3E%3Cpath d='M0,48 L0,26 L8,34 L16,14 L24,30 L33,8 L42,26 L50,18 L58,32 L67,12 L75,28 L83,20 L91,34 L100,22 L100,48 Z' fill='%23fffdf7'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-size:200px 52px;
}

/* ---------- Sections ---------- */
.section{ padding:56px 48px 64px; }
.lede{ font-size:1.1rem; color:var(--text-dark); }
.section h1{ font-size:2.15rem; position:relative; padding-bottom:16px; margin-bottom:.7em; }
.section h1::after{
  content:"";
  position:absolute; left:0; bottom:0; width:68px; height:8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='8' viewBox='0 0 64 8'%3E%3Cpath d='M0 4 Q8 0 16 4 T32 4 T48 4 T64 4' stroke='%23c99a3f' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
}

.cta-card{
  margin-top:36px;
  padding:28px 32px;
  background:
    linear-gradient(155deg, rgba(255,255,255,.5), rgba(255,255,255,0) 40%),
    var(--bg-section);
  border:1px solid var(--border-soft);
  border-radius:20px 8px 20px 8px;
  position:relative;
  box-shadow:0 10px 28px rgba(21,49,31,.06);
}
.cta-card::before{
  content:"";
  position:absolute; top:-1px; right:22px; width:34px; height:14px;
  background:var(--gold);
  border-radius:0 0 6px 6px;
  opacity:.85;
}
.cta-card h2{ font-size:1.32rem; margin-bottom:.5em; position:relative; padding-bottom:12px; }
.cta-card h2::after{
  content:"";
  position:absolute; left:0; bottom:0; width:56px; height:7px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='8' viewBox='0 0 64 8'%3E%3Cpath d='M0 4 Q8 0 16 4 T32 4 T48 4 T64 4' stroke='%23c99a3f' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
}
.cta-card a.email{
  display:inline-block;
  margin-top:6px;
  font-weight:600;
  color:var(--navy-800);
  text-decoration:none;
  border-bottom:2px solid var(--gold);
  transition:color .15s ease, border-color .15s ease;
}
.cta-card a.email:hover{ color:var(--navy-900); border-color:var(--lake); }

.contact-list{ margin:22px 0 26px; padding:0; list-style:none; }
.contact-list li{
  position:relative;
  padding-left:30px;
  margin-bottom:12px;
}
.contact-list li::before{
  content:"";
  position:absolute; left:0; top:2px; width:18px; height:18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4C10 4 4 10 4 20c10 0 16-6 16-16z' fill='%23c99a3f'/%3E%3Cpath d='M6.5 17.5 17.5 6.5' stroke='%23f0cf82' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:contain;
}

.btn{
  display:inline-block;
  padding:13px 30px;
  background:linear-gradient(135deg, var(--navy-800), var(--navy-900));
  color:#fff !important;
  text-decoration:none;
  border-radius:22px 6px 22px 6px;
  font-weight:600;
  letter-spacing:.02em;
  box-shadow:0 6px 16px rgba(21,49,31,.22);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ background:linear-gradient(135deg, var(--navy-900), #0e2216); transform:translateY(-1px); box-shadow:0 10px 22px rgba(21,49,31,.3); }

/* ---------- Gallery grid: "polaroid"-kollaasi ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px 18px;
  margin-top:40px;
}
.gallery-grid a{
  display:block;
  background:var(--bg-light);
  padding:8px 8px 22px;
  border-radius:3px;
  box-shadow:0 8px 20px rgba(21,49,31,.14), 0 2px 5px rgba(21,49,31,.08);
  transition:transform .25s ease, box-shadow .25s ease;
  will-change:transform;
}
.gallery-grid a:nth-child(6n+1){ transform:rotate(-1.6deg); }
.gallery-grid a:nth-child(6n+2){ transform:rotate(1.1deg); }
.gallery-grid a:nth-child(6n+3){ transform:rotate(-.8deg); }
.gallery-grid a:nth-child(6n+4){ transform:rotate(1.6deg); }
.gallery-grid a:nth-child(6n+5){ transform:rotate(-1.1deg); }
.gallery-grid a:nth-child(6n+6){ transform:rotate(.9deg); }
.gallery-grid a:hover{
  transform:rotate(0) scale(1.045);
  box-shadow:0 16px 34px rgba(21,49,31,.24), 0 4px 10px rgba(21,49,31,.14);
  z-index:2;
  position:relative;
}
.gallery-grid img{
  width:100%; aspect-ratio:3/4; object-fit:cover; display:block;
  transition:transform .35s ease;
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:50;
  background:rgba(12,22,15,.93);
  display:none;
  align-items:center; justify-content:center;
  padding:40px;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:100%; border-radius:4px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lightbox-close{
  position:absolute; top:20px; right:28px;
  color:#fff; font-size:2rem; line-height:1;
  background:none; border:0; cursor:pointer;
}

/* ---------- Site footer ---------- */
.site-footer{
  padding:24px 48px 40px;
  color:var(--text-muted);
  font-size:.85rem;
  border-top:1px solid var(--border-soft);
}

/* ---------- Mobile nav ---------- */
.topbar{ display:none; }

@media (max-width: 900px){
  .layout{ display:block; }
  .sidebar{
    position:relative;
    width:auto;
    padding:0;
    overflow:visible;
  }
  .sidebar > .brand, .sidebar > .brand-tagline, .sidebar nav, .sidebar-footer{ display:none; }
  .sidebar::after{ display:none; }
  .content{ margin-left:0; }

  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:linear-gradient(160deg, var(--navy-800), var(--navy-900) 70%);
    color:#fff;
    padding:16px 20px;
  }
  .topbar .brand-name{ font-size:1.4rem; }
  .topbar .brand-tagline{ display:none; }
  .menu-toggle{
    background:none; border:1px solid rgba(255,255,255,.4);
    color:#fff; border-radius:6px; padding:8px 12px;
    font-size:.85rem; cursor:pointer;
  }
  .mobile-nav{
    display:none;
    background:var(--navy-800);
  }
  .mobile-nav.open{ display:block; }
  .mobile-nav ul{ list-style:none; margin:0; padding:8px 20px 16px; }
  .mobile-nav a{
    display:block; padding:12px 0; color:#dfe5ee; text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .mobile-nav a.active{ color:var(--gold-soft); }

  .hero{ height:220px; }
  .hero-title{ font-size:1.7rem; padding:24px; }
  .hero:not(.with-title)::before{ height:34px; background-size:140px 34px; }
  .section{ padding:36px 24px 44px; }
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); gap:18px 14px; }
  .site-footer{ padding:20px 24px 32px; }
}

@media (max-width: 480px){
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); gap:14px 10px; }
  .gallery-grid a{ padding:6px 6px 16px; }
}