/* Lihtne elegantne stiil */
:root{--bg:#faf7f3;--paper:#fff;--ink:#222;--muted:#6b6b6b;--gold:#b68c4a;--beige:#efe6db;--radius:14px;--shadow:0 10px 30px rgba(0,0,0,.06)}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
h1,h2{font-family:'Playfair Display', Georgia, serif;line-height:1.2;margin:0 0 .6em;color:#1b1b1b}
h1{font-size:clamp(22px,3vw,34px)}h2{font-size:clamp(22px,3vw,34px)}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.narrow{max-width:860px;margin:0 auto}
.nav{position:sticky;top:0;z-index:20;background:rgba(250,247,243,.85);border-bottom:1px solid rgba(0,0,0,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.logo{font:600 32px/1 'Playfair Display',serif;color:#111;text-decoration:none}.logo span{color:var(--gold)}
.nav nav a{margin-left:18px;text-decoration:none;color:#333}.btn{display:inline-block;padding:.7em 1.1em;border-radius:999px;border:1px solid #d8c7a8;text-decoration:none;color:#5a4b32;background:#fff;box-shadow:var(--shadow)}
.btn.primary{background:#8E7A79;color:#fff;border-color:var(--gold)}.btn.ghost{background:transparent;border-color:#cbbba0;color:#5a4b32}
.section{padding:64px 0}.section.alt{background:var(--beige)}
.hero{padding:0px 0;background:linear-gradient(180deg,#f8f3ec 0%,#fbf8f3 100%)}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.hero-text p{color:var(--muted)}
.hero-media .image-placeholder{background:#e8dfd2;border-radius:var(--radius);height:350px;display:block;align-items:center;justify-content:center;color:#6e5a3c;border:1px dashed #cbbba0}
.price-list{list-style:none;padding:0;margin:24px 0;border:1px solid #eadfcd;border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow)}
.price-list li{display:flex;flex-direction:column;padding:14px 18px;border-bottom:1px solid #eee}
.price-list li:last-child{border-bottom:none}
.price-list strong{font-weight:600;margin-top:6px}
.service-desc{color:#6c6355;margin:.4em 0 0}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px}
.grid .image-placeholder{background:#fff;border:1px dashed #d8c7a8;border-radius:12px;min-height:140px;display:flex;align-items:center;justify-content:center;color:#8a744f}
.footer{padding:28px 0;border-top:1px solid rgba(0,0,0,.06);text-align:center;color:#777;background:#faf7f3}
@media (max-width:620px){.grid{grid-template-columns:1fr}}
.hero-media img,
.hero-img {
display: block;
width: 100%;
height: 350px;
object-fit: cover;
object-position: center;F
border-radius: 12px;
}
@media (max-width: 768px) {
.hero-media img,
.hero-img {
height: 100vw; !important ;
}
}
@media (max-width: 768px) {
.hero-media img,
.hero-img {
height: 100vw !important;
}
}
@media (max-width: 768px) {
.hero-media img,
.hero-img {
width: 100% !important;
height: 100vw !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
}
}
.image-placeholder{
background-image: url('assets/hero.jpg');
background-size: cover;
background-position: center;
height: 350px;
border-radius: 12px;
color: transparent;
}

@media (max-width: 768px){
.image-placeholder{
height: 100vw !important;
}
}
/* --- Brow Wellness hero pildi kuju määramine --- */
.hero-media {
position: relative; /* vajalik, et pilt saaks sees positsioneerida */
overflow: hidden; /* lõikab üle ääre ulatuva pildi ära */
}

.hero-media img.hero-img {
width: 100%; /* võtab kogu konteineri laiuse */
height: 100%; /* võtab kogu konteineri kõrguse */
object-fit: cover; /* täidab ala, lõikab vajadusel üleliigse ära */
object-position: center; /* hoiab pildi keskkoha nähtaval */
display: block; /* eemaldab tühiku pildi all */
}

/* Telefonivaade – portreeformaadis (4:5 suhe) */
@media (max-width: 767px) {
.hero-media {
aspect-ratio: 4 / 5;
}
}

/* Lauaarvutivaade – kandiline (1:1 suhe) */
@media (min-width: 768px) {
.hero-media {
aspect-ratio: 1 / 1;
}
}
/* --- Mobiilis paneme hero veerud üksteise alla ja teeme pildi täislaiuses --- */
@media (max-width: 767px) {
  .hero-inner {
    display: flex;
    flex-direction: column;     /* tekst -> pilt alla */
    align-items: stretch;
    gap: 16px;                  /* vahe tekstiga (soovi korral muuda) */
  }

  .hero-text {
    width: 100%;
  }

  .hero-media {
    width: 100%;                /* mitte kitsas tulbake */
    aspect-ratio: 4 / 5;        /* portree kuju */
    border-radius: 12px;        /* kui soovid sama nurka */
    overflow: hidden;
  }

  .hero-media img.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
}
/* --- Mobiilis: pilt teksti alla ja täislaiuses (4:5) --- */
@media (max-width: 767px) {
  /* hero konteiner mobiilis ühe veeruna */
  .hero-inner {
    display: flex;            /* kui oli grid vms, asenda flexiga */
    flex-direction: column;   /* stack: kõigepealt tekst, siis pilt */
    align-items: stretch;
    gap: 16px;                /* vahe tekstiga (soovi korral muuda) */
  }

  /* järjekord – tekst enne pilti */
  .hero-text  { order: 1; width: 100%; }
  .hero-media { order: 2; width: 100%; }

  /* pildi kuju ja täitmine */
  .hero-media {
    aspect-ratio: 4 / 5;      /* portree kuju telefonis */
    overflow: hidden;
    border-radius: 12px;       /* sama nurk kui desktopil */
  }
  .hero-media img.hero-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
  }
}
/* --- Mobiilis paneme hero veerud üksteise alla ja teeme pildi täislaiuses --- */
@media (max-width: 767px) {
.hero-inner {
display: flex;
flex-direction: column; /* tekst -> pilt alla */
align-items: stretch;
gap: 16px; /* vahe tekstiga (soovi korral muuda) */
}

.hero-text {
width: 100%;
}

.hero-media {
width: 100%; /* mitte kitsas tulbake */
aspect-ratio: 4 / 5; /* portree kuju */
border-radius: 12px; /* kui soovid sama nurka */
overflow: hidden;
}

.hero-media img.hero-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
}hero-media {
width: 100%; /* mitte kitsas tulbake */
aspect-ratio: 4 / 5; /* portree kuju */
border-radius: 12px; /* kui soovid sama nurka */
overflow: hidden;
margin-top: 12px; /* lisab õhku pildi ja ülemise elemendi vahele */
}
@media (max-width: 767px) {
.hero-media {
width: 100%; /* mitte kitsas tulbake */
aspect-ratio: 4 / 5; /* portree kuju */
border-radius: 12px; /* kui soovid sama nurka */
overflow: hidden;
margin-top: 12px; /* lisab õhku pildi ja ülemise elemendi vahele */
}
}
/* Ümarad nurgad kõigil külgedel hero-pildil, nii mobiilis kui arvutis */
.hero-media img.hero-img {
    border-radius: 20px;
}
/* Ümarad nurgad hero-pildil kõigil seadmetel */
.hero-media img.hero-img {
    border-radius: 20px;
    display: block;
    max-width: 100%;
    height: auto;
}

/* Väiksemate ekraanide jaoks pisut väiksem nurk, et proportsioon jääks ilus */
@media (max-width: 768px) {
    .hero-media img.hero-img {
        border-radius: 15px;
    }
}
/* Galerii pilt – sama käitumine nagu hero */
#galerii .grid-img {
width: 100%;
aspect-ratio: 4 / 5; /* mobiilis portree-kuju */
object-fit: cover; /* ei veni; lõikab üleliigse */
object-position: center;
border-radius: 12px; /* samad ümarad nurgad */
display: block;
overflow: hidden;
}

@media (min-width: 768px) {
#galerii .grid-img {
aspect-ratio: 1 / 1; /* desktopis ruut */
}
}
/* Galerii pilt – sama mis hero */
.grid-img {
width: 100%;
aspect-ratio: 4 / 5;
border-radius: 12px;
overflow: hidden;
margin-top: 12px;
}

.grid-img {
border-radius: 20px;
display: block;
max-width: 100%;
height: auto;
}

@media (max-width: 768px) {
.grid-img {
border-radius: 15px;
}
}
/* Galerii pildi stiilid */
.grid-img {
width: 100%;
aspect-ratio: 4 / 5; /* sama proportsioon nagu hero.jpg */
border-radius: 12px; /* samad ümarad nurgad */
overflow: hidden;
object-fit: cover; /* täidab ala ilma venituseta */
}

/* Väiksemad ekraanid */
@media (max-width: 768px) {
.grid-img {
border-radius: 15px;
}
}