/* ============================================================
   home.css — само за index.html (началната страница).

   5 авг. 2026 — преработка по неин собствен дизайн-модел (3
   варианта, тя избра "1c" — по-едра снимкова карта „Академия" +
   отдясно, една под друга, „Процедури" и компактна „За мен", с
   анимиран диагонален „блясък" при hover). Фонът на „Академия"
   (градиент + приглушена снимка) остава същият, който тя одобри
   по-рано — само формата/hover ефектът са нови. Редът с 4-те
   бутона долу (.home-actions/.hbtn) НЕ се пипа с тази промяна.

   Mobile-first: всички ширини се задават от 900px нагоре.
   ============================================================ */

/* Воал: 5 авг. 2026 (шеста заявка) — лек диагонален преход тъмно
   (вляво) → светло (вдясно), в цветовата гама на картата „Академия"
   (тъмният ѝ край #B98F8D, светлият ѝ край #D3B2B0 — виж .tile--academy
   по-долу), вместо неутралния кремав воал отпреди. Текстът остава
   тъмен навсякъде (виж .hero-title/.hero-lead). */
.home-veil{
  background:linear-gradient(90deg,
    rgba(153, 108, 102, .46) 0%,
    rgba(199, 161, 159, .34) 45%,
    rgba(250, 243, 236, .22) 100%);
}

/* по-светъл фонов кадър само за началната страница — още малко
   изсветлен на 5 авг. 2026 (втора заявка same ден), заедно с
   по-лекия воал по-долу */
body:has(.home) .ambient-media{
  filter:saturate(.68) brightness(1.3) contrast(.94);
}

.home{
  position:relative;z-index:10;
  display:flex;flex-direction:column;
  min-height:calc(100vh - var(--topbar-h));
  padding:0 16px 110px;
}

/* ── HERO (заглавие + кратко въведение, директно на фона —
   без карта около тях, както в избрания от нея модел) ─────── */
.hero{
  position:relative;z-index:2;
  padding:8px 0 4px;max-width:680px;
  animation:sdFade .9s ease-out both;
}
@keyframes sdFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.hero .eyebrow{margin-bottom:14px;}
.hero-title{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(1.5rem,4.6vw,2rem);line-height:1.3;
  color:var(--espresso);margin:0 0 14px;
}
.hero-lead{
  font-size:.98rem;line-height:1.65;color:var(--text-soft);
  max-width:56ch;margin:0;
}

/* ── 3-те карти (bento) ──────────────────────────────────── */
.cards3{
  position:relative;z-index:2;
  display:flex;flex-direction:column;gap:14px;
  margin-top:24px;
}
.cards3-side{display:flex;flex-direction:column;gap:14px;}

.tile{
  position:relative;overflow:hidden;padding:18px;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:126px;
  box-shadow:0 10px 24px -18px rgba(0,0,0,.6);
  transition:transform .3s cubic-bezier(.25,.8,.25,1),box-shadow .3s ease;
}
.tile:hover{transform:translateY(-5px);}
.tile:active{transform:scale(.985);}
/* всички преки деца стоят над фоновите ::before/::after */
.tile > *{position:relative;z-index:1;}
.tile-top{display:flex;align-items:flex-start;justify-content:space-between;}
.chip{
  width:44px;height:44px;border-radius:14px;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:1.25rem;
}
.tile-arrow{opacity:.6;font-size:1rem;margin-top:4px;}

/* display:block е задължителен — иначе двата <span> се изливат в един
   абзац и заглавието се слепва с описанието. */
.tile-title{
  display:block;
  font-family:var(--font-serif);font-weight:500;
  font-size:1.2rem;line-height:1.18;margin:14px 0 3px;
}
.tile-desc{display:block;font-size:.9rem;line-height:1.4;}

/* диагонален „блясък", който преминава по картата при hover —
   основната анимация от избрания модел. Слой ::after, над снимката
   на „Академия" (::before), но под текста (децата са z-index:1). */
.tile--academy,.tile--proc,.tile--zamen{
  border-radius:26px;
  transition:transform .3s cubic-bezier(.25,.8,.25,1),box-shadow .3s ease;
}
.tile--academy::after,.tile--proc::after,.tile--zamen::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;
  background-image:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  background-size:250% 100%;background-position:-60% 0;
  transition:background-position .9s ease;
  mix-blend-mode:overlay;
}
.tile--academy:hover::after,.tile--proc:hover::after,.tile--zamen:hover::after{
  background-position:160% 0;
}

/* ── КАРТА „Академия за козметици" ──────────────────────
   Фонът (градиент + приглушена снимка) е нейният одобрен фон от
   по-рано и НЕ се пипа с тази преработка — само формата (по-едро
   заобляне) и hover-блясъкът (::after по-горе) са нови. */
.tile--academy{
  background:linear-gradient(158deg,#D3B2B0 0%,#C7A19F 48%,#B98F8D 100%);
  color:#3C2C15;
  border:1px solid rgba(25,4,3,.20);
  min-height:340px;
  padding:24px;
  box-shadow:
    0 22px 44px -24px rgba(60,44,21,.55),
    0 3px 8px -3px rgba(60,44,21,.20),
    inset 0 1px 0 rgba(255,255,255,.6);
}

/* Снимката: дуотон в цветовете на самата карта, свален до ~17 %.
   Маската я прави по-плътна долу вдясно и почти невидима горе вляво,
   където стои иконата — така текстурата има посока, вместо да лежи
   като равномерен воал. */
.tile--academy::before{
  content:"";position:absolute;inset:0;z-index:0;
  border-radius:inherit;pointer-events:none;
  background-image:url(../images/academy-tile.jpg);
  background-image:image-set(
    url(../images/academy-tile.avif) type("image/avif"),
    url(../images/academy-tile.webp) type("image/webp"),
    url(../images/academy-tile.jpg)  type("image/jpeg"));
  background-size:cover;background-position:center 42%;
  opacity:.25;
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(202deg,
    rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 42%, #000 100%);
  mask-image:linear-gradient(202deg,
    rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 42%, #000 100%);
  transition:opacity .3s ease,transform .3s ease;
}
.tile--academy:hover::before{opacity:.30;transform:scale(1.03);}

.tile--academy .chip{
  width:54px;height:54px;border-radius:16px;
  background:rgba(60,44,21,.10);color:#7A5A22;
  border:1px solid rgba(60,44,21,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
/* текстът стои вертикално в средата на картата */
.tile--academy .tile-text{
  flex:1;display:flex;flex-direction:column;justify-content:center;
}
.tile--academy .tile-title{
  font-size:clamp(1.6rem,5.6vw,2.05rem);
  line-height:1.1;margin:0 0 10px;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.tile--academy .tile-desc{
  font-size:1rem;line-height:1.5;
  color:rgba(60,44,21,.76);max-width:34ch;
}
.tile--academy .tile-arrow{color:rgba(60,44,21,.5);}
.tile--academy:hover{
  box-shadow:
    0 30px 56px -26px rgba(60,44,21,.6),
    0 4px 10px -3px rgba(60,44,21,.22),
    inset 0 1px 0 rgba(255,255,255,.6);
}

/* ── КАРТА „Козметични процедури" ───────────────────────
   По-светла/неутрална от „Академия" (контраст, както в модела) +
   асиметрично заобляне, което „пасва" на „За мен" под нея. */
.tile--proc{
  background:linear-gradient(158deg,#F4E6DE 0%,#ECD8CC 100%);
  color:#3C2417;
  border:1px solid rgba(60,36,23,.16);
  border-radius:6px 26px;
  min-height:150px;
  padding:20px;
  box-shadow:
    0 18px 36px -22px rgba(60,36,23,.35),
    0 3px 8px -3px rgba(60,36,23,.14),
    inset 0 1px 0 rgba(255,255,255,.55);
}
.tile--proc .chip{
  background:rgba(60,36,23,.10);color:#7A5A22;
  border:1px solid rgba(60,36,23,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.tile--proc .tile-title{font-size:1.34rem;margin:12px 0 4px;}
.tile--proc .tile-desc{color:rgba(60,36,23,.72);}
.tile--proc .tile-arrow{color:rgba(60,36,23,.5);}
.tile--proc:hover{
  box-shadow:
    0 26px 46px -24px rgba(60,36,23,.4),
    0 4px 10px -3px rgba(60,36,23,.16),
    inset 0 1px 0 rgba(255,255,255,.55);
}

/* ── КАРТА „За мен" (нова, компактна — 5 авг. 2026) ─────────
   Същият бледолилав тон, който вече ползваме за „За мен" другаде
   по началната страница по-рано днес; асиметричното заобляне е
   огледално на „Процедури" отгоре ѝ, за да „прилепват" една в друга. */
.tile--zamen{
  background:linear-gradient(158deg,#F1E6FA 0%,#E7D3F4 100%);
  color:#1F1329;
  border:1px solid rgba(90,50,120,.20);
  border-radius:26px 6px;
  min-height:110px;
  padding:20px;
  justify-content:center;
  box-shadow:
    0 18px 36px -22px rgba(60,20,80,.3),
    0 3px 8px -3px rgba(60,20,80,.12),
    inset 0 1px 0 rgba(255,255,255,.6);
}
.tile--zamen:hover{
  box-shadow:
    0 24px 44px -22px rgba(60,20,80,.36),
    0 4px 10px -3px rgba(60,20,80,.16),
    inset 0 1px 0 rgba(255,255,255,.6);
}
/* 5 авг. 2026 (пета заявка) — сериф шрифт (var(--font-serif)) вместо
   стандартния текстови, за да не изпъква с различен шрифт спрямо
   заглавията на другите две карти; за проба, ако не пасне — обратно. */
.tile-eyebrow{
  display:block;font-family:var(--font-serif);font-weight:600;
  font-size:.78rem;text-transform:uppercase;
  letter-spacing:.1em;color:#6B3F8C;margin:0 0 8px;
}
/* 5 авг. 2026 (втора заявка): същия сериф шрифт като заглавията в
   „Академия"/„Процедури" (var(--font-serif)), не обикновения текстов
   шрифт — за да не изглежда „За мен" картата стилово различна. */
.tile-mini-desc{
  font-family:var(--font-serif);font-weight:500;
  font-size:1.05rem;line-height:1.4;color:#2B1D3B;margin:0;
}

/* ── ОБЩ РЕД С 4 БУТОНА (Галерия / Контакти / Запиши час /
   Повече за мен) ──────────────────────────────────────────
   Не се пипа с редизайна на картите отгоре — по нейно изрично
   желание стилът/hover поведението на тези 4 бутона да остане
   както си е. "Запиши час" остава акцентиран (виненочервен), както
   навсякъде другаде в сайта, останалите три са в еднакъв, по-тих
   стил — закръглени, с иконка в кръгче, леко повдигане при hover,
   не плоски (сянка + тънка рамка), но не и натрапчиви. */
.home-actions{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  margin-top:22px;
}
.hbtn{
  position:relative;
  display:flex;align-items:center;gap:10px;
  /* 5 авг. 2026 (пета заявка) — топъл светъл стъклен вид (същия тон
     като .btn--ghost другаде в сайта), вместо предишния почти-бял
     полупрозрачен, който вече не се виждаше добре върху светлия
     кремав фон отгоре. Текстът остава тъмен и фиксиран. */
  background:rgba(196,165,144,.16);
  border:1px solid rgba(155,132,120,.35);
  border-radius:100px;
  padding:9px 16px 9px 8px;
  box-shadow:0 8px 18px -18px rgba(60,36,23,.4),inset 0 1px 0 rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}
.hbtn:hover{
  transform:translateY(-2px);
  background:rgba(196,165,144,.28);
  box-shadow:0 12px 22px -18px rgba(60,36,23,.45),inset 0 1px 0 rgba(255,255,255,.6);
}
.hbtn-ic{
  width:32px;height:32px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(36,22,16,.1);color:#6B4A3D;font-size:.92rem;
}
/* фиксиран тъмен цвят (не var(--text-soft), който на тази страница
   е обърнат за тъмна тема и излиза светъл/избледнял на светлия розов
   фон тук — заради това текстът не се четеше) — 5 авг. 2026 */
.hbtn span:last-child{font-size:.88rem;font-weight:500;color:#241610;}

.hbtn--wine{
  background:linear-gradient(158deg,#9B2D3A 0%,#7E2732 100%);
  border-color:rgba(0,0,0,.18);
  box-shadow:0 14px 28px -16px rgba(155,45,58,.55),inset 0 1px 0 rgba(255,255,255,.14);
}
.hbtn--wine:hover{background:linear-gradient(158deg,#A8323F 0%,#8B2C38 100%);}
.hbtn--wine .hbtn-ic{background:rgba(255,255,255,.18);color:#fff;}
.hbtn--wine span:last-child{color:#fff;font-weight:600;}

/* ── ДЕСКТОП (≥900px) ───────────────────────────────────── */
@media(min-width:900px){
  .home{padding:0 40px 60px 72px;}

  /* Текстовият блок е със същата ширина/центриране като картите
     отдолу (max-width 1140 + margin:auto), за да застане точно над
     тях. Подравнен вляво (5 авг. 2026, пета заявка — обратно от
     дясното подравняване по-рано същия ден). width:100% е нужен,
     защото .hero е flex дете на .home и auto margin-ът иначе
     изключва стандартното align-items:stretch поведение (вижда се
     свито до съдържанието си вместо да стигне до max-width). */
  .hero{
    width:100%;max-width:1140px;margin:0 auto;
    display:flex;flex-direction:column;align-items:flex-start;
    text-align:left;
  }
  .hero-title{
    font-size:clamp(1.3rem,2.1vw,1.65rem);
    max-width:640px;
  }
  .hero-lead{font-size:1.02rem;max-width:560px;}

  /* Голямата „Академия" вляво + отдясно, една под друга, „Процедури"
     и „За мен". align-items:stretch кара „Академия" автоматично да
     се изравни по височина с дясната колона (двете малки карти +
     разстоянието между тях) — не се налагат никакви min-height
     формули за целта. */
  /* по-широки от преди + центрирани в оставащото пространство след
     лявото отстояние на .home (margin:0 auto) — по нейна заявка да
     ги "разпъна леко" и да ги центрирам (5 авг. 2026, трета заявка).
     Разстоянието между тях (хоризонтално между колоните, вертикално
     между „Процедури" и „За мен") е леко увеличено (5 авг. 2026,
     четвърта заявка). */
  .cards3{
    display:grid;grid-template-columns:1.4fr 1fr;
    gap:30px;align-items:stretch;margin:34px auto 0;
    max-width:1140px;
  }
  .cards3-side{gap:28px;}
  .tile--proc,.tile--zamen{flex:1;}

  .tile--academy{min-height:0;}

  /* по-малки, по-близо разположени бутони (съдържанието им, не
     равни 1/4 колони) — както в нейния модел; подравнени вляво
     заедно с картите/текста отгоре (5 авг. 2026, пета заявка —
     преди бяха центрирани) */
  .home-actions{
    display:flex;flex-wrap:wrap;justify-content:flex-start;
    grid-template-columns:none;gap:10px;margin:30px auto 0;
    max-width:1140px;
  }
  .hbtn{flex:0 0 auto;}
}

@media(min-width:1300px){
  .home{padding-left:96px;}
}

@media(prefers-reduced-motion:reduce){
  .hero{animation:none;}
  .tile,.hbtn{transition:none;}
  .tile:hover,.tile:active,.hbtn:hover{transform:none;}
  .tile--academy::before,
  .tile--academy::after,.tile--proc::after,.tile--zamen::after{transition:none;}
}