/* ==========================================================================
   NADIIA — services.css
   Compact hero · nav dropdowns · catalog accordions · gallery · craft
   ========================================================================== */

/* nav dropdown submenu styles live in base.css (shared by all pages) */

/* ---------- compact hero ---------- */
.svc-hero {
  position: relative;
  min-height: 48vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: linear-gradient(180deg, #F1E5D2 0%, #F5EBDB 100%);
  padding: 120px var(--pad-x) clamp(44px, 6vh, 70px);
}
.svc-hero-bg {
  position: absolute;
  inset: -8% 0;
  background-image: url('../img/hero/hero-background.webp');
  background-size: cover;
  background-position: center right;
  opacity: .9;
  will-change: transform;
}
.svc-hero-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(241,229,210,.97) 0%, rgba(241,229,210,.85) 38%, rgba(241,229,210,.25) 72%, rgba(241,229,210,0) 100%);
}
.svc-hero-content { position: relative; z-index: 2; max-width: 680px; }
.svc-hero h1 {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 74px);
  line-height: 1.06;
  color: var(--text-heading);
}
.svc-hero h1 em { font-style: italic; color: var(--gold-500); }
.svc-hero p {
  margin: 20px 0 0;
  max-width: 430px;
  font-size: 15px;
  line-height: 1.85;
  font-weight: 300;
  color: var(--ink-500);
}
.svc-hero .btn { margin-top: 30px; }
.secflower.f-svc-hero { left: 2vw; bottom: 0; }

/* ---------- catalog ---------- */
.cat {
  position: relative;
  padding: clamp(70px, 10vh, 130px) var(--pad-x);
  overflow: visible;
}
.cat.is-alt { background: var(--cream-200); }
.cat-grid {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2.5vw, 40px);
  align-items: start;
}
.cat-photo-col { grid-column: 1 / span 5; grid-row: 1; }
.cat.is-flip .cat-photo-col { grid-column: 8 / span 5; }
.cat-photo { position: relative; }
.cat-photo-num {
  position: absolute;
  top: -12px; left: -12px;
  font-family: var(--font-display);
  font-size: clamp(80px, 9vw, 140px);
  line-height: 1;
  color: rgba(181, 142, 76, 0.08);
  pointer-events: none;
  user-select: none;
  z-index: 2;
}
.cat-photo-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(60,44,32,.16);
  margin-top: 40px;
}
.cat-photo-img {
  aspect-ratio: 4 / 4.6;
  background-size: cover;
  background-position: center;
  will-change: transform;
}
.cat-photo-img.i-manicure   { background-image: url('../img/services/catalog/manicure.webp'); }
.cat-photo-img.i-pedicure   { background-image: url('../img/services/catalog/pedicure.webp'); }
.cat-photo-img.i-strengthen { background-image: url('../img/services/catalog/strengthen.webp'); }

.cat-meta { margin-top: 26px; }
.cat-meta-row { display: flex; align-items: center; gap: 18px; }
.cat-meta-label {
  font-size: 11px;
  letter-spacing: .44em;
  text-transform: uppercase;
  color: var(--gold-500);
  font-weight: 500;
}
.cat-meta-row .rule { height: 1px; flex: 1; background: var(--gold-300); opacity: .6; }
.cat-meta h2 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.08;
  color: var(--text-heading);
}
.cat-meta p {
  margin: 14px 0 0;
  max-width: 380px;
  font-size: 14px;
  line-height: 1.85;
  font-weight: 300;
  color: var(--ink-500);
}

.cat-items-col {
  grid-column: 7 / span 6;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: clamp(36px, 5vh, 0px);
}
.cat.is-flip .cat-items-col { grid-column: 1 / span 6; }
.cat-hint {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .06em;
  color: var(--ink-300);
}

/* treatment accordion card */
.tcard {
  background: var(--cream-50);
  border: 1px solid var(--cream-400);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(60,44,32,.05);
  overflow: hidden;
  transition: border-color .6s ease, background-color .6s ease;
}
/* deep-link arrival: gentle gold accent, fades back after ~2.5s */
.tcard.is-highlight {
  border-color: var(--gold-400);
  background: var(--gold-50);
}
.tcard-head {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 30px);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
  transition: background-color .35s ease;
}
.tcard-head:hover { background-color: var(--gold-50); }
.tcard-info { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.tcard-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--ink-900);
}
.tcard-summary { font-size: 12.5px; font-weight: 300; color: var(--ink-400); }
.tcard-cta {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-600);
  font-weight: 500;
}
.tcard-side { display: flex; align-items: center; gap: 18px; flex: none; }
.tcard-price {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.9vw, 22px);
  color: var(--gold-600);
  white-space: nowrap;
}
.tcard-plus {
  width: 28px; height: 28px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--gold-300);
  color: var(--gold-400);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .4s var(--ease-lux), color .35s ease, border-color .35s ease;
}
.tcard-plus svg { width: 13px; height: 13px; display: block; stroke: currentColor; }
.tcard.is-open .tcard-plus { transform: rotate(45deg); color: var(--gold-600); border-color: var(--gold-400); }

.tcard-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .4s var(--ease-lux), opacity .35s ease;
}
.tcard.is-open .tcard-body { grid-template-rows: 1fr; opacity: 1; }

/* статична картка (сертифікат): без згортання — шапка не інтерактивна */
.tcard--static .tcard-head { cursor: default; }
.tcard--static .tcard-head:hover { background-color: transparent; }
.tcard--static .tcard-body { grid-template-rows: 1fr; opacity: 1; }
.tcard-body-clip { overflow: hidden; }
.tcard-body-inner { padding: 0 clamp(20px, 2.4vw, 30px) 24px; }
.tcard-divider { height: 1px; background: var(--cream-400); margin-bottom: 18px; }
.tcard-includes-label {
  font-size: 10.5px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-600);
}
.tcard-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tcard-chips span {
  padding: 7px 14px;
  border: 1px solid var(--gold-200);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--ink-700);
  background: var(--cream-100);
}
.tcard-note { margin: 14px 0 0; font-size: 12px; font-weight: 300; color: var(--ink-400); }
.tcard-body .btn { margin-top: 20px; }

.secflower.f-cat { left: 1.5vw; top: -40px; z-index: 3; }

/* ---------- gallery ---------- */
.gal {
  position: relative;
  background: var(--cream-100);
  padding: clamp(90px, 13vh, 160px) var(--pad-x);
  overflow: hidden;
}
.gal-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: clamp(40px, 6vh, 64px);
}
.gal-head h2 {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.1;
  color: var(--text-heading);
}
.gal-head h2 em { font-style: italic; color: var(--gold-500); }
.gal-inner { max-width: 1160px; margin: 0 auto; }
.gal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(140px, 18vw, 250px);
  gap: 18px;
}
.gal-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(60,44,32,.1);
}
.gal-item.is-big { grid-column: span 2; grid-row: span 2; }
.gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.secflower.f-gal { right: 3vw; top: 12vh; }

/* ---------- craft (emotional finale) ---------- */
.craft {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--brown-700);
}
/* фонове відео: вантажиться ліниво, проявляється поверх фото-фону */
.craft-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* постер = перший кадр: видимий одразу, відео підхоплює без шва */
  opacity: 1;
  pointer-events: none;
}
.craft-video.is-on { opacity: 1; }
/* dot-grid поверх відео: стримана кінотекстура — 1px теплих чорних крапок
   на сітці 4px (перенесено з cxr-hero__grain) */
.craft-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(10,8,6,.55) 1px, transparent 1.4px);
  background-size: 4px 4px;
}
/* над крапками: градієнт для читабельності — діагональ + нижня віньєтка
   (перенесено з cxr-hero__overlay, холодний синьо-чорний → теплий коричневий) */
.craft-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(78deg, rgba(46,33,21,.86) 0%, rgba(46,33,21,.54) 46%, rgba(46,33,21,.2) 100%),
    linear-gradient(to top, rgba(46,33,21,.4) 0%, rgba(46,33,21,0) 46%);
}
.craft-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding: clamp(80px, 12vh, 140px) var(--pad-x);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.craft .eyebrow { color: var(--gold-300); }
.craft h2 {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.8vw, 62px);
  line-height: 1.1;
  color: var(--cream-100);
  text-wrap: balance;
}
.craft h2 em { font-style: italic; color: var(--gold-300); }
.craft p {
  margin: 20px 0 0;
  max-width: 440px;
  font-size: 14.5px;
  line-height: 1.9;
  font-weight: 300;
  color: rgba(251,246,238,.75);
}

/* ---------- gift certificate (matches .cat layout) ---------- */
/* certificate visual — sits inside .cat-photo-frame like the category photos */
.cert-card {
  aspect-ratio: 4 / 4.6;
  padding: clamp(16px, 2vw, 22px);
  background: linear-gradient(150deg, var(--brown-600), var(--brown-700));
}
.cert-card-frame {
  height: 100%;
  border: 1px solid rgba(216,181,112,.45);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: clamp(22px, 3vw, 40px);
}
.cert-card-eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .32em;
  font-size: 11px;
  font-weight: 500;
  color: var(--gold-300);
}
.cert-card-logo { width: clamp(150px, 60%, 220px); height: auto; opacity: .96; }
.cert-card-tag {
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(251,246,238,.6);
}
.cert-card-line { width: 46px; height: 1px; background: var(--gold-300); opacity: .7; margin: 4px 0; }
.cert-card-note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 18px);
  color: rgba(251,246,238,.82);
}

/* selectable denomination buttons */
.cert-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px 0 8px;
}
.cert-amount {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--gold-600);
  padding: 12px 22px;
  border: 1px solid var(--gold-300);
  border-radius: 40px;
  background: var(--cream-50);
  cursor: pointer;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}
.cert-amount:hover { border-color: var(--gold-500); background: var(--gold-50); }
.cert-amount.is-selected {
  color: var(--cream-50);
  background: var(--gold-500);
  border-color: var(--gold-500);
}
.cert-order { align-self: flex-start; }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .cat-photo-col, .cat.is-flip .cat-photo-col,
  .cat-items-col, .cat.is-flip .cat-items-col {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-top: 0;
  }
  .cat-items-col { margin-top: 40px; }
  .gal-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-card { max-width: 380px; }
}