/* ============================================================================
   Holdviola v3 — inner pages (service listing, service detail, gift voucher)
   Reuses tokens.css / base.css / shell.css / home.css. Loaded only on inner
   pages. Never edit the core CSS. On-brand violet, Prata/Caudex/Baloo, pills.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Inner-page hero — elegant static brand gradient (no WebGL)
   --------------------------------------------------------------------------- */
.phero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 1.5rem + 5vw, 5rem));
  padding-bottom: clamp(2.5rem, 1.5rem + 5vw, 5rem);
  color: #fff;
  overflow: hidden;
  background: var(--grad-silk);
  isolation: isolate;
}
.phero::before {
  /* soft glow accents — purely decorative */
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 90% at 82% -10%, rgba(233,145,215,.45), transparent 55%),
    radial-gradient(60% 80% at 8% 110%, rgba(37,7,121,.55), transparent 60%);
  pointer-events: none;
}
.phero::after {
  /* subtle moving silk sheen, killed for reduced-motion below */
  content: "";
  position: absolute; inset: -40%; z-index: -1;
  background: conic-gradient(from 180deg at 50% 50%, rgba(255,255,255,0) 0deg, rgba(255,255,255,.10) 60deg, rgba(255,255,255,0) 140deg);
  animation: pheroSheen 18s linear infinite;
  pointer-events: none;
}
@keyframes pheroSheen { to { transform: rotate(360deg); } }

.phero__inner { position: relative; z-index: 1; max-width: 56rem; }
.phero__inner.is-centered { margin-inline: auto; text-align: center; }
.phero__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  padding: .4rem 1rem; border-radius: var(--r-pill);
  font-family: var(--font-btn); font-weight: 500; text-transform: uppercase;
  letter-spacing: .12em; font-size: var(--tiny); margin-bottom: 1.3rem;
}
.phero__eyebrow .star { color: var(--star); }
.phero h1 { color: #fff; line-height: 1.12; margin-bottom: 1rem; text-shadow: 0 2px 30px rgba(20,3,52,.45); }
.phero__sub { font-size: var(--body-md); color: #ecdffb; max-width: 40rem; margin-bottom: 1.8rem; }
.phero__inner.is-centered .phero__sub { margin-inline: auto; }
.phero__chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.8rem; }
.phero__inner.is-centered .phero__chips { justify-content: center; }
.phero__chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-btn); font-weight: 500; font-size: .85rem;
  color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32);
  border-radius: var(--r-pill); padding: .45rem 1rem;
}
.phero__actions { display: flex; gap: .9rem; flex-wrap: wrap; }
.phero__inner.is-centered .phero__actions { justify-content: center; }

/* breadcrumb */
.crumbs { font-size: var(--small); color: rgba(255,255,255,.78); margin-bottom: 1rem; }
.crumbs a { color: rgba(255,255,255,.78); }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs span[aria-current] { color: #fff; }

/* ---------------------------------------------------------------------------
   Service listing — anchor nav + grouped card grids
   --------------------------------------------------------------------------- */
.svc-anchors { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

.svc-group + .svc-group { margin-top: clamp(3rem, 2rem + 4vw, 5rem); }
.svc-group__head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(1.6rem, 1rem + 2vw, 2.4rem); scroll-margin-top: calc(var(--nav-h) + 1rem); }
.svc-group__head h2 { color: var(--brand); }
.svc-group__head .eyebrow { color: var(--brand-bright); }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: clamp(1.2rem, .8rem + 1.6vw, 1.8rem);
}

.scard {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #ece6f3; border-radius: var(--r-card);
  box-shadow: var(--shadow-card); overflow: hidden;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transform-style: preserve-3d;
}
.scard:hover { box-shadow: var(--shadow-card-hover); }
.scard__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: #f3edfb; }
.scard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.scard:hover .scard__media img { transform: scale(1.05); }
.scard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(165deg, transparent 58%, rgba(74,2,146,.20)); }
.scard__body { display: flex; flex-direction: column; gap: .85rem; padding: clamp(1.2rem, 1rem + 1vw, 1.6rem); flex: 1; }
.scard__name { font-family: var(--font-head); color: var(--brand); font-size: 1.35rem; line-height: 1.25; }
.scard__prices { display: flex; flex-wrap: wrap; gap: .45rem; }
.scard__prices .chip { font-family: var(--font-btn); font-size: .82rem; background: #f5effb; }
.scard__desc { color: var(--muted); font-size: var(--small); flex: 1; }
.scard__actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .3rem; }
.scard__actions .btn { padding: .7rem 1.15rem .58rem; font-size: .9rem; }

/* bérlet note */
.berlet-note {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; justify-content: center;
  text-align: center; background: #f7f1fd; border: 1px solid #ece0f8;
  border-radius: var(--r-md); padding: clamp(1.2rem, 1rem + 1.5vw, 1.8rem);
}
.berlet-note p { color: var(--muted); margin: 0; }
.berlet-note .berlet-note__ic { width: 26px; height: 26px; color: var(--brand-bright); flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   Service detail — intro, illustration, list sections
   --------------------------------------------------------------------------- */
.detail-intro { max-width: 46rem; }
.detail-intro .eyebrow { display: inline-block; margin-bottom: .8rem; }
.detail-intro p { font-size: var(--body-md); color: var(--muted); }

.detail-media {
  display: grid; gap: clamp(1rem, .6rem + 1.5vw, 1.6rem);
  grid-template-columns: 1fr;
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
}
.detail-media.has-two { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .detail-media.has-two { grid-template-columns: 1fr; } }
.detail-media figure { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); aspect-ratio: 4 / 3; background: #f3edfb; }
.detail-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.detail-media figure:hover img { transform: scale(1.04); }

/* list / benefit blocks */
.detail-blocks { display: grid; gap: clamp(1.4rem, 1rem + 2vw, 2.4rem); margin-top: clamp(2.5rem, 1.6rem + 3vw, 4rem); }
@media (min-width: 880px) { .detail-blocks.cols-2 { grid-template-columns: 1fr 1fr; } }

.dblock {
  background: #fff; border: 1px solid #ece6f3; border-radius: var(--r-md);
  box-shadow: var(--shadow-card); padding: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
}
.dblock h3 { color: var(--brand); font-size: 1.4rem; margin-bottom: 1.1rem; }
.dblock__list { display: grid; gap: .85rem; }
.dblock__list li {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: .65rem; align-items: start;
  color: var(--muted); line-height: 1.55;
}
.dblock__list li::before {
  content: ""; width: 1.4rem; height: 1.4rem; margin-top: .15rem;
  background: radial-gradient(circle at 30% 30%, var(--brand-bright), var(--brand));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  flex: 0 0 auto;
}
.dblock__list li b, .dblock__list li strong { color: var(--brand); font-weight: 400; }

/* other-services strip on detail pages */
.more-svc { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.more-svc a {
  font-family: var(--font-btn); font-weight: 500; font-size: .85rem;
  color: var(--brand); background: #f5effb; border: 1px solid #e7dcf6;
  border-radius: var(--r-pill); padding: .5rem 1rem;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.more-svc a:hover { background: var(--brand); color: #fff; }

/* ---------------------------------------------------------------------------
   Gift voucher page
   --------------------------------------------------------------------------- */
.gift-form-grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.6rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}
@media (max-width: 880px) { .gift-form-grid { grid-template-columns: 1fr; } }

.gift-form {
  background: #fff; border: 1px solid #ece6f3; border-radius: var(--r-md);
  box-shadow: var(--shadow-card); padding: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  display: grid; gap: 1.1rem;
}
.gift-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .gift-form .field-row { grid-template-columns: 1fr; } }

/* checkbox group for service selection */
.svc-pick { display: grid; gap: .5rem; }
.svc-pick__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .9rem; }
@media (max-width: 560px) { .svc-pick__grid { grid-template-columns: 1fr; } }
.svc-pick label {
  display: flex; align-items: center; gap: .55rem; cursor: pointer;
  font-size: var(--small); color: var(--text);
}
.svc-pick input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--brand); flex: 0 0 auto; }

.gift-aside {
  background: var(--grad-cta-b); color: #fff; border-radius: var(--r-md);
  padding: clamp(1.6rem, 1rem + 2vw, 2.4rem); position: relative; overflow: hidden;
}
.gift-aside::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 120% at 85% -10%, rgba(255,255,255,.18), transparent 50%); pointer-events: none; }
.gift-aside h3 { color: #fff; margin-bottom: 1rem; }
.gift-aside ul { display: grid; gap: .7rem; position: relative; z-index: 1; }
.gift-aside li { display: flex; gap: .6rem; align-items: flex-start; color: #f3e9ff; }
.gift-aside li svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--star); margin-top: 3px; }
.gift-aside__img { margin-top: 1.4rem; border-radius: 12px; overflow: hidden; position: relative; z-index: 1; box-shadow: var(--shadow-card-hover); }

/* ---------------------------------------------------------------------------
   Motion / reduced-motion safety
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce), (hover: none) {
  .phero::after { animation: none; }
  .scard { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .scard__media img, .detail-media img, .more-svc a { transition: none !important; }
}