/* =========================================================
   Mizieș — stylesheet original, portat 1:1 din machetă.
   Bootstrap 5 e inclus doar pentru grid/utilitare/formulare;
   toată identitatea vizuală vine din regulile de mai jos.
   ========================================================= */

:root{
  --ink:#1c1e19;
  --olive:#586a4a;
  --olive-dark:#41502f;
  --cream:#f6f3ea;
  --stone:#8b8577;
  --gold:#c9a24b;
  --line: rgba(255,255,255,0.25);
}
*{box-sizing:border-box;}
body{
  font-family:'Manrope', sans-serif;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  margin:0;
}
h1,h2,h3{
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  letter-spacing:0.01em;
}
a{color:inherit; text-decoration:none;}
img{display:block; width:100%; height:100%; object-fit:cover;}
.eyebrow{
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-weight:700;
}
button{font-family:inherit; cursor:pointer;}

/* ---------- HEADER ---------- */
header{
  position:absolute; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:28px 56px;
  color:#fff;
}
.brand{display:flex; align-items:center; gap:14px;}
.brand-mark{width:34px; height:34px; opacity:0.92;}
.brand-text{line-height:1.15;}
.brand-text .name{font-family:'Cormorant Garamond', serif; font-size:22px; letter-spacing:0.08em; font-weight:600;}
.brand-text .region{font-size:10px; letter-spacing:0.18em; opacity:0.75;}
nav{display:flex; align-items:center; gap:38px; font-size:13px; letter-spacing:0.06em;}
nav a{opacity:0.88; position:relative; padding-bottom:6px;}
nav a.active{opacity:1;}
nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--gold);
}
.socials{display:flex; gap:10px;}
.socials a{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:14px;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  background:
    linear-gradient(100deg, rgba(20,24,18,0.72) 0%, rgba(20,24,18,0.42) 38%, rgba(20,24,18,0.06) 62%),
    var(--hero-image) center/cover no-repeat;
  color:#fff;
  overflow:hidden;
}
.hero-inner{
  position:relative; z-index:3;
  padding:0 56px; max-width:640px;
  padding-top:40px;
}
.hero h1{
  font-size:96px; line-height:0.95; letter-spacing:0.02em;
  margin-left:36px;
}
.hero .sub{
  font-size:20px; font-weight:500; margin:14px 0 0 36px;
}
.rule{
  width:64px; height:2px; background:var(--gold); margin:22px 0 22px 36px;
}
.hero p{
  margin-left:36px; max-width:420px; font-size:15px; line-height:1.7; color:rgba(255,255,255,0.85);
}
.hero-cta{
  display:flex; align-items:center; gap:22px; margin:34px 0 0 36px;
}
.btn-primary{
  background:var(--olive-dark); color:#fff; border:none;
  padding:15px 26px; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700;
  border-radius:2px; display:inline-flex; align-items:center; gap:10px;
  transition:background .25s ease;
}
.btn-primary:hover{background:var(--olive); color:#fff;}
.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:#fff; z-index:3;
  animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,6px);}}

/* ---------- FEATURE (Biserica) ---------- */
.feature{
  display:grid; grid-template-columns:1fr 1fr;
  min-height:560px;
}
.feature .media{position:relative; overflow:hidden;}
.feature .media img{
  filter:saturate(1.02);
  transition:transform 8s ease;
}
.feature .media:hover img{transform:scale(1.06);}
.feature .copy{
  position:relative;
  background:var(--cream);
  display:flex; flex-direction:column; justify-content:center;
  padding:60px 90px 60px 70px;
  overflow:hidden;
}
.feature .copy .eyebrow{color:var(--olive-dark); margin-bottom:16px;}
.feature .copy h2{font-size:40px; line-height:1.15; color:var(--ink); max-width:420px;}
.feature .copy p{
  margin-top:20px; max-width:360px; font-size:14.5px; line-height:1.8; color:#4c4a41;
}
.btn-secondary{
  margin-top:28px; align-self:flex-start;
  background:var(--olive-dark); color:#fff; border:none;
  padding:14px 24px; font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700;
  border-radius:2px;
}
.watermark{
  position:absolute; right:-40px; bottom:-30px; width:340px; opacity:0.06;
  pointer-events:none;
}

/* ---------- FIGURES (Dorz / Romanul) ---------- */
.figures{display:grid; grid-template-columns:1fr 1fr;}
.figure{
  position:relative; min-height:420px; display:flex; align-items:flex-end;
  background-size:cover; background-position:center;
  color:#fff;
}
.figure::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,10,8,0.88) 8%, rgba(10,10,8,0.55) 45%, rgba(10,10,8,0.15) 80%);
}
.figure-copy{position:relative; z-index:2; padding:44px 54px; max-width:420px;}
.figure-copy .eyebrow{color:var(--gold); margin-bottom:12px;}
.figure-copy h3{font-size:32px; margin-bottom:12px;}
.figure-copy p{font-size:13.5px; line-height:1.7; color:rgba(255,255,255,0.82); margin-bottom:22px;}
.btn-outline{
  border:1px solid rgba(255,255,255,0.65); background:transparent; color:#fff;
  padding:12px 22px; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700;
  border-radius:2px;
}

/* ---------- WELCOME / LOCATION / MAP ---------- */
.lower{display:grid; grid-template-columns:1.1fr 0.9fr 1.4fr; min-height:320px;}
.welcome{
  position:relative;
  background-image:linear-gradient(100deg, rgba(10,12,8,0.72), rgba(10,12,8,0.35)), var(--welcome-image);
  background-size:cover; background-position:center;
  color:#fff;
  display:flex; flex-direction:column; justify-content:center;
  padding:44px 50px;
}
.welcome h2{font-size:32px; line-height:1.15;}
.welcome p{margin-top:14px; font-size:13.5px; line-height:1.7; color:rgba(255,255,255,0.82); max-width:280px;}
.locate{
  background:var(--olive-dark);
  color:#fff;
  display:flex; flex-direction:column; justify-content:center; gap:16px;
  padding:44px 46px;
}
.locate .pin{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.5);
  display:flex; align-items:center; justify-content:center; font-size:16px; margin-bottom:4px;
}
.locate .eyebrow{opacity:0.75;}
.locate .place{font-family:'Cormorant Garamond', serif; font-size:24px; margin-top:4px;}
.locate .btn-outline{margin-top:10px; align-self:flex-start;}
.map{position:relative; background:#dfe6d8; overflow:hidden;}
.map img{filter:saturate(0.85);}
.map iframe{width:100%; height:100%; border:0; filter:saturate(0.9);}
.map-badge{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-100%);
  background:var(--olive-dark); color:#fff; padding:6px 12px; border-radius:3px;
  font-size:11px; font-weight:700; letter-spacing:0.03em;
  display:flex; align-items:center; gap:6px; box-shadow:0 6px 16px rgba(0,0,0,0.25);
  z-index:2;
}
.map-badge::after{
  content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--olive-dark);
}

/* ---------- FOOTER ---------- */
footer{
  background:#15170f; color:rgba(255,255,255,0.78);
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 56px;
  font-size:12.5px;
  flex-wrap:wrap; gap:16px;
}
footer .brand-text .name{color:#fff;}
footer .quote{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-size:15px; color:rgba(255,255,255,0.9);
  text-align:center; max-width:360px;
}
footer .rights{text-align:right; line-height:1.6; opacity:0.7;}
footer .socials a{border-color:rgba(255,255,255,0.2);}

/* ---------- GALLERY PAGE ---------- */
.gallery-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:4px;
  padding:4px;
}
.gallery-item{position:relative; overflow:hidden; aspect-ratio:4/3;}
.gallery-item img{transition:transform .6s ease;}
.gallery-item:hover img{transform:scale(1.08);}
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,0));
  color:#fff; padding:16px 16px 10px; font-size:13px;
}

/* ---------- INNER PAGE HERO (Despre / Istorie / Patrimoniu / Contact) ---------- */
.page-hero{
  position:relative; min-height:46vh; display:flex; align-items:flex-end;
  background:
    linear-gradient(180deg, rgba(20,24,18,0.5), rgba(20,24,18,0.8)),
    var(--page-hero-image) center/cover no-repeat;
  color:#fff;
  padding:64px 56px 48px;
}
.page-hero h1{font-size:56px;}
.page-hero p{margin-top:10px; max-width:520px; font-size:15px; color:rgba(255,255,255,0.85);}

/* ---------- CONTACT FORM ---------- */
.contact-wrap{display:grid; grid-template-columns:1fr 1fr; min-height:520px;}
.contact-form{padding:60px 70px; display:flex; flex-direction:column; justify-content:center;}
.contact-form label{
  font-size:12px; letter-spacing:0.06em; text-transform:uppercase; font-weight:700; color:var(--olive-dark);
  display:block; margin-bottom:6px;
}
.contact-form .form-control{
  border-radius:2px; border:1px solid #d8d3c4; padding:12px 14px; width:100%;
  font-family:inherit; font-size:14px; margin-bottom:20px;
  background:#fff;
}
.contact-form .form-control:focus{
  outline:none; border-color:var(--olive); box-shadow:0 0 0 3px rgba(88,106,74,0.15);
}
.alert-success{
  background:#eef3e8; color:var(--olive-dark); border:1px solid #cddabb;
  padding:14px 18px; border-radius:2px; font-size:14px; margin-bottom:20px;
}
.alert-danger{
  background:#f7e9e6; color:#8a3b2e; border:1px solid #edc7bd;
  padding:14px 18px; border-radius:2px; font-size:14px; margin-bottom:20px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  header{padding:20px 24px;}
  nav{display:none;}
  .hero-inner{padding:0 24px;}
  .hero h1{font-size:64px; margin-left:20px;}
  .hero .sub, .rule, .hero p, .hero-cta{margin-left:20px;}
  .feature{grid-template-columns:1fr;}
  .feature .copy{padding:44px 28px;}
  .figures{grid-template-columns:1fr;}
  .lower{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2, 1fr);}
  .contact-wrap{grid-template-columns:1fr;}
  .contact-form{padding:40px 28px;}
  footer{flex-direction:column; text-align:center;}
  footer .rights{text-align:center;}
}
@media (prefers-reduced-motion: reduce){
  .scroll-cue{animation:none;}
  .feature .media:hover img{transform:none;}
}