/*
 * OK Clinic — premium polish (additive layer)
 * Loads AFTER blocks.css. Adds nested-bezel feel to surface cards
 * (.svc__card / .pr__card / .tm__card) without touching base components.
 * Safe to remove the enqueue line in functions.php to roll back instantly.
 */

/* Nested bezel for home surface cards.
   Outer shell (the card itself) gets a soft ambient shadow and a
   ring-style hairline. Inner core (::before) sits 6px inside and
   carries an inset highlight, simulating a glass plate on a tray. */
.svc__card,
.pr__card,
.tm__card {
  position: relative;
  border-color: transparent;
  background-clip: padding-box;
  box-shadow:
    0 1px 0 color-mix(in oklab, var(--bg) 60%, transparent) inset,
    0 0 0 1px var(--line) inset,
    var(--shadow-card);
}

.svc__card::before,
.pr__card::before,
.tm__card::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: calc(var(--radius-lg) - 6px);
  box-shadow:
    0 1px 1px color-mix(in oklab, var(--bg) 65%, transparent) inset,
    0 0 0 1px var(--line-2) inset;
  pointer-events: none;
  transition: box-shadow 0.35s var(--ease-out);
  z-index: 0;
}

/* Lift card content above the bezel pseudo so links/media stay clickable. */
.svc__card > *,
.pr__card > *,
.tm__card > * {
  position: relative;
  z-index: 1;
}

/* Flush cards (image edge-to-edge): the inner-core ::before would draw a
   highlight line across the media. Hide it on flush — outer ring + ambient
   shadow already give enough depth. */
.svc__card.card--flush::before,
.pr__card.card--flush::before {
  display: none;
}

/* Hover: deeper ambient + brighter inner ring, no transform jump that
   would break the nested-card illusion. Inherits base hover from .card. */
.svc__card:hover,
.pr__card:hover,
.tm__card:hover {
  box-shadow:
    0 1px 0 color-mix(in oklab, var(--bg) 80%, transparent) inset,
    0 0 0 1px color-mix(in oklab, var(--lavender) 60%, transparent) inset,
    var(--shadow-pop);
}

.svc__card:hover::before,
.pr__card:hover::before,
.tm__card:hover::before {
  box-shadow:
    0 1px 1px color-mix(in oklab, var(--bg) 80%, transparent) inset,
    0 0 0 1px color-mix(in oklab, var(--lavender) 40%, transparent) inset;
}

/* ============================================================
 * Unified primary CTA geometry
 * Every .btn--primary across the homepage has the same shape:
 * pill width follows content, text + flat trailing arrow sit together
 * in the middle with symmetric padding. No nested circle decoration —
 * the Awwwards-tier "button-in-button" pattern was inconsistent across
 * blocks (some children had different SVG sizes/structures), so we
 * pick the cleaner Apple/Linear treatment: text + arrow as one unit.
 * ============================================================ */

.btn--primary {
  width: auto;
  align-self: flex-start;
  justify-content: center;
  padding-left: var(--gap-xl);
  padding-right: var(--gap-xl);
  gap: 10px;
}

/* Reset block-level overrides that previously stretched/redistributed
   the primary pill. */
.fq__asideCta.btn--primary,
.ba__cta.btn--primary,
.rv__cta.btn--primary,
.tm__btn.btn--primary,
.dir__btn.btn--primary {
  width: auto;
  justify-self: flex-start;
  align-self: flex-start;
  padding-left: var(--gap-xl);
  padding-right: var(--gap-xl);
  gap: 10px;
}

/* Submit button is a special case: SVG is wrapped in <span data-state>
   so the geometry rules above don't reach it. Keep it full-width and
   centered — the correct submit treatment. */
.bk__submit.btn--primary {
  width: 100%;
  align-self: stretch;
  justify-content: center;
}

/* Normalize the trailing arrow to a single flat glyph across all
   primary/dark CTAs, regardless of what size the block-specific SVG
   ships with. Hover translates the arrow slightly to the right. */
.btn--primary > svg:last-child,
.btn--dark > svg:last-child {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  transition: transform 0.25s var(--ease-out);
}

.btn--primary:hover > svg:last-child,
.btn--dark:hover > svg:last-child {
  transform: translateX(2px);
}

/* ============================================================
 * Glass mobile menu + staggered reveal
 * Promote .mnav__panel from a 360px side-drawer to a screen-filling
 * glass overlay. Stagger child items with CSS-only animation-delay.
 * Active state is the existing [data-open='true'] attribute set by JS.
 * ============================================================ */

.mnav__scrim {
  /* Slightly deeper scrim so the glass panel reads as a single sheet. */
  background: color-mix(in oklab, var(--ink) 60%, transparent);
}

.mnav__panel {
  /* Override the 360px right-drawer geometry. */
  inset: 0;
  width: auto;
  height: 100%;
  /* Frosted glass on a near-white sheet — keep brand cream rather than OLED black. */
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  backdrop-filter: blur(28px) saturate(140%);
  /* Replace the harsh left side-shadow with an ambient surround. */
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--lavender) 25%, transparent) inset,
    0 30px 80px -20px color-mix(in oklab, var(--ink) 35%, transparent);
  /* Drop horizontal slide; fade + scale from 0.98 instead. */
  transform: scale(0.98);
  opacity: 0;
  transition:
    transform 0.45s var(--ease-out),
    opacity 0.35s var(--ease-out);
  padding: 24px clamp(20px, 5vw, 40px) 40px;
}

.mnav[data-open='true'] .mnav__panel {
  transform: scale(1);
  opacity: 1;
}

/* Bigger, editorial nav items inside the overlay. */
.mnav[data-open='true'] .mnav__list a,
.mnav[data-open='true'] .mnav__group summary {
  padding: 18px 4px;
  font: 500 22px/1.2 var(--font-display);
  letter-spacing: -0.01em;
}

/* Lighter dividers — glass surface, so keep the lines subtle. */
.mnav__list li + li {
  border-top-color: color-mix(in oklab, var(--ink) 8%, transparent);
}

/* Staggered fade-up reveal. Items start translated/transparent, then
   animate in once the panel is open. Delays climb by 60ms. */
@keyframes okclinic-mnav-stagger {
  from { opacity: 0; transform: translateY(14px) }
  to   { opacity: 1; transform: translateY(0) }
}

.mnav[data-open='true'] .mnav__list > li,
.mnav[data-open='true'] .mnav__cta,
.mnav[data-open='true'] .mnav__contacts,
.mnav[data-open='true'] .mnav__socials {
  opacity: 0;
  animation: okclinic-mnav-stagger 0.55s var(--ease-out) forwards;
}

.mnav[data-open='true'] .mnav__list > li:nth-child(1) { animation-delay: 0.10s }
.mnav[data-open='true'] .mnav__list > li:nth-child(2) { animation-delay: 0.16s }
.mnav[data-open='true'] .mnav__list > li:nth-child(3) { animation-delay: 0.22s }
.mnav[data-open='true'] .mnav__list > li:nth-child(4) { animation-delay: 0.28s }
.mnav[data-open='true'] .mnav__list > li:nth-child(5) { animation-delay: 0.34s }
.mnav[data-open='true'] .mnav__list > li:nth-child(6) { animation-delay: 0.40s }
.mnav[data-open='true'] .mnav__list > li:nth-child(7) { animation-delay: 0.46s }
.mnav[data-open='true'] .mnav__list > li:nth-child(8) { animation-delay: 0.52s }
.mnav[data-open='true'] .mnav__cta       { animation-delay: 0.58s }
.mnav[data-open='true'] .mnav__contacts  { animation-delay: 0.64s }
.mnav[data-open='true'] .mnav__socials   { animation-delay: 0.70s }

/* Glass-overlay needs stronger contrast on social pills — the default
   lavender-50 reads as flat-white on the translucent panel. Use the
   filled lavender so all three icons sit visually equal.
   Force a square box: base.css `@media (hover: none) a { min-height:44px }`
   was stretching the 36px width into a 44px-tall ellipse on touch devices. */
.mnav__socials a {
  width: 44px;
  height: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  background: var(--lavender-700);
  color: var(--bg);
}
@media (hover: hover) {
  .mnav__socials a:hover {
    background: var(--lavender-800);
    color: var(--bg);
  }
}

/* ============================================================
 * Before/After: breathing room before the thumbnail strip
 * The thumbs row used to sit flush against the panel above it; on
 * mobile that read as one continuous box. Add deliberate vertical
 * separation so the strip starts as its own block.
 * ============================================================ */

.ba__thumbs {
  margin-top: clamp(20px, 3vw, 32px);
}

/* Reduced motion: keep the bezel but drop any animated transition. */
@media (prefers-reduced-motion: reduce) {
  .svc__card::before,
  .pr__card::before,
  .tm__card::before,
  .btn--primary > svg:last-child,
  .btn--dark > svg:last-child,
  .mnav__panel {
    transition: none;
  }
  .mnav[data-open='true'] .mnav__list > li,
  .mnav[data-open='true'] .mnav__cta,
  .mnav[data-open='true'] .mnav__contacts,
  .mnav[data-open='true'] .mnav__socials {
    animation: none;
    opacity: 1;
  }
}