/* ============================================================================
   Vilana — Anlass Pages (anlass.css) — FULL (UNIVERSAL, CLEAN, STABLE)
============================================================================ */

/* ============================================================================
   ROOT VARS (single source of truth)
============================================================================ */
:root{
  --header-h: 72px;

  /* Hero image: set per page via:
     <section class="hero" style="--hero-img: url('/images/...')"> ... */
  --hero-img: none;

  --text: #111827;
  --muted: rgba(17,24,39,.75);

  /* Hero frame */
  --hero-wrap-max: 1280px;
  --hero-center-max: 1240px;
  --hero-side-pad: clamp(14px, 4.5vw, 56px);

  --radius-hero: 28px;
  --radius-hero-img: 22px;

  --hero-h-desktop: auto;
  --hero-h-mobile: auto;
  --hero-minh: 0;


  --hero-blur: 22px;
  --hero-blur-opacity: .62;

  /* Services tokens */
  --section-bg: #f8f6f2;
  --card-bg: #ffffff;
  --radius-card: 22px;
  --stroke: rgba(15,23,42,.12);
  --shadow1: 0 10px 28px rgba(15,23,42,.08);
  --shadow2: 0 16px 36px rgba(15,23,42,.14);
}

/* ============================================================================
   BASE
============================================================================ */
html{ scroll-behavior:smooth; }

body{
  margin: 0;
  background: #fdfaf6;
}

body, h1, h2, h3, p, span, label, input, textarea, select, button{
  font-family: "Cormorant SC", serif;
}

/* один-единственный отступ от шапки */
#main{
  padding-top: calc(var(--header-h) + 10px);
}

/* важно: не добавляем второй отступ */
.hero{
  margin-top: 0 !important;
}

/* Button */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.78rem 1.25rem;
  border-radius:9999px;
  border:1px solid #c9b192;
  color: var(--text);
  text-decoration:none;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.9rem;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 54px rgba(0,0,0,.14);
}
.btn:active{
  transform: translateY(0);
  opacity:.92;
}

/* ============================================================================
   HERO (UNIVERSAL)
============================================================================ */
.hero{
  background: #fdfaf6;
  padding-left: clamp(12px, 2vw, 24px);
  padding-right: clamp(12px, 2vw, 24px);
}

.hero-media{
  width: min(100%, var(--hero-wrap-max));
  margin-left:auto;
  margin-right:auto;

  position: relative;
  overflow: hidden;
  border-radius: var(--radius-hero);

  /* боковые поля убраны — фото не растягивается на весь экран на десктопе */

  background: #f3eee6;
}

/* blurred premium fields inside hero
   Works even when --hero-img is not set (fallback gradients stay). */
.hero-media::before{
  content:"";
  position:absolute;
  inset:-28px;

  background:
    radial-gradient(900px 520px at 50% 0%, rgba(17,24,39,.10), rgba(17,24,39,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,0) 52%),
    var(--hero-img);

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  filter: blur(var(--hero-blur)) saturate(.98) contrast(1.02) brightness(1.10);
  transform: scale(1.08);
  opacity: var(--hero-blur-opacity);
  z-index: 0;
}

/* subtle depth */
.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(0,0,0,.10), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,0) 42%);
  opacity:.22;
}

.hero-media picture,
.hero-media img{
  position: relative;
  z-index: 2;
  display:block;
  margin-left:auto;
  margin-right:auto;
}

.hero-media img{
  width: min(100%, var(--hero-center-max));
  height: var(--hero-h-desktop);
  min-height: var(--hero-minh);

  object-fit: cover;
  object-position: center 35%;

  border-radius: var(--radius-hero-img);
  box-shadow: 0 22px 70px rgba(0,0,0,.16);
  filter: saturate(.98) contrast(1.02);
}

/* below image copy */
.hero-below{
  text-align:center;
  padding-top: clamp(1.2rem, 2.2vw, 1.9rem);
  padding-bottom: clamp(2rem, 3.6vw, 3.2rem);
}

.hero-title{
  color:#111827;
  font-size: clamp(2.05rem, 3.9vw, 3.35rem);
  font-weight:700;
  letter-spacing:.2px;
  line-height:1.06;
  margin: 0 auto .75rem;
  max-width: 26ch;
}

.hero-subtitle{
  color: rgba(17,24,39,.75);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height:1.55;
  max-width:62ch;
  margin:0 auto 1.25rem;
}

.hero-cta{ margin-top:.25rem; }

@media (max-width: 640px){
  /* НЕ обнуляем отступ — держим буфер под шапку */
  #main{
    padding-top: calc(var(--header-h) + 10px);
  }

  .hero{
    padding-left:0;
    padding-right:0;
  }

  .hero-media{
    width:100%;
    border-radius:0;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .hero-media::before{ opacity:.20; }
  .hero-media::after{ opacity:.18; }

  .hero-media img{
    width:100% !important;
    max-width:none !important;
    height: auto !important;        /* показываем фото целиком */
    min-height: unset !important;   /* убираем ограничение по высоте */
    object-fit: contain !important; /* не обрезать */
    border-radius:0;
    box-shadow:none;
  }

  .hero-below{
    padding-left:16px;
    padding-right:16px;
  }

  .hero-title{ max-width:20ch; }
}

/* ============================================================================
   SERVICES (UNIVERSAL)
============================================================================ */
.services{
  padding: clamp(3rem, 2.2rem + 2vw, 5rem) 0;
  background: var(--section-bg);
}

.section-title{
  text-align:center;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight:700;
  letter-spacing:.05em;
  line-height:1.2;
  margin:0 0 .5rem;
  color: var(--text);
}

.section-subtitle{
  text-align:center;
  margin:0 0 2rem;
  color:#6b7280;
  font-size: clamp(1rem, .95rem + .25vw, 1.12rem);
  line-height:1.5;
}

.services-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  margin-top:1.25rem;
}

@media (min-width:768px){
  .services-grid{
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:1.5rem;
  }
}

.service-card{
  position:relative;
  background: var(--card-bg);
  border:1px solid var(--stroke);
  border-radius: var(--radius-card);
  overflow:hidden;
  box-shadow: var(--shadow1);
  transition: transform .25s ease, box-shadow .25s ease;
  min-height:100%;
  display:flex;
  flex-direction:column;
  isolation:isolate;
}

.service-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow2);
}

/* Universal media crop for cards */
.service-media{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background: #0e0e0e;
}

.service-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transform:scale(1.01);
}

/* no masks */
.service-media::after{
  content:none !important;
  display:none !important;
}

.service-body{
  padding:1.1rem 1.2rem 1.3rem;
  display:flex;
  flex-direction:column;
  gap:.45rem;
  flex:1 1 auto;
}

.service-name{
  margin:.2rem 0 .55rem;
  font-size: clamp(1.2rem, 1.05rem + .65vw, 1.58rem);
  line-height:1.2;
  font-weight:700;
  color: var(--text);
}

.service-description{
  margin:0;
  color: var(--muted);
  font-size: clamp(1rem, .96rem + .22vw, 1.08rem);
  line-height:1.6;
}

.services .btn{
  display:inline-block;
  margin-top: clamp(1.2rem, 1rem + .8vw, 2rem);
}

/* safety override */
.services .service-card{
  border-radius: var(--radius-card) !important;
  overflow:hidden !important;
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .service-card{ transition:none; }
  .service-card:hover{ transform:none; }
}