/*
 * selva-enhancements.css — Selva Dorada Premium Enhancements
 * ════════════════════════════════════════════════════════════════════════════
 *
 * TABLE OF CONTENTS
 * ─────────────────────────────────────────────────────────────────────────
 *  1.  Font System Override (Cormorant Garamond + Lato)
 *  2.  Global Typography Application
 *  3.  Page Layout Fixes (page.php loop fix visual support)
 *  4.  Services Grid — Responsive CSS Grid
 *  5.  Service Card — Base Structure
 *  6.  Service Card — Image + Hover Zoom
 *  7.  Service Card — Dark Overlay (reveals on hover)
 *  8.  Service Card — SVG Icon Reveal on Hover
 *  9.  Service Card — Badges (Popular / Featured)
 * 10.  Service Card — Body, Meta, Price, Duration
 * 11.  Service Card — Footer CTA Buttons
 * 12.  Services Filter Bar (page-services.php)
 * 13.  Section Header (eyebrow / title / subtitle / ornament)
 * 14.  Team Grid + Team Cards
 * 15.  Button System (selva-btn)
 * 16.  Admin Banner (fresh-install placeholder notice)
 * 17.  Dark Skin Overrides
 * 18.  Responsive Breakpoints
 * ─────────────────────────────────────────────────────────────────────────
 *
 * LOADING ORDER:
 *   selva-main.css (priority 10) → selva-enhancements.css (priority 20)
 *   We override CSS custom properties defined in selva-main.css :root.
 *   All selectors use the same specificity as selva-main.css — no !important.
 *
 * @package selva-dorada
 */


/* ════════════════════════════════════════════════════════════════════════════
   1. FONT SYSTEM OVERRIDE
   ════════════════════════════════════════════════════════════════════════════

   WHY THIS PAIRING:
   ─────────────────
   Cormorant Garamond (Serif Display)
     Designed by Christian Thalmann as a revival of Claude Garamond's 16th-
     century typefaces. Features extreme stroke contrast — razor-thin hairlines
     against bold strokes — the exact language of luxury fashion publishing
     (Vogue, Chanel, Hermès). Ideal for headings, hero text, pull-quotes.

   Lato (Humanist Sans-Serif)
     Designed by Łukasz Dziedzic to feel "transparent" — readers experience
     the content, not the font. Warm letter shapes with slight roundness give
     it a human quality absent from strict geometric sans-serifs. Ideal for
     body paragraphs, navigation, labels, UI strings at 13px–16px.

   Combined tension: dramatic, editorial display font + invisible, readable
   body font. This mirrors the classical print design standard used by every
   major luxury brand from Dior to The New York Times.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body:    'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-accent:  'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Grid token */
  --svc-grid-gap:    clamp(20px, 2.5vw, 32px);
  --svc-grid-cols:   3;

  /* Card tokens */
  --card-radius:     12px;
  --card-img-ratio:  3 / 2;
  --card-shadow:     0 2px 8px rgba(26,20,10,.05), 0 8px 24px rgba(26,20,10,.07);
  --card-shadow-hov: 0 16px 48px rgba(26,20,10,.14), 0 4px 12px rgba(26,20,10,.07);

  /* Overlay */
  --overlay-start: rgba(15, 13, 11, 0);
  --overlay-end:   rgba(15, 13, 11, .72);
}


/* ════════════════════════════════════════════════════════════════════════════
   2. GLOBAL TYPOGRAPHY APPLICATION
   ════════════════════════════════════════════════════════════════════════════ */

/* Body + UI — Lato */
body, p, li, td, th, dd, dt, figcaption, caption,
input, textarea, select, button, label,
.selva-nav__menu a,
.selva-footer a {
  font-family: var(--font-body);
}

/* Display + Headings — Cormorant Garamond */
h1, h2, h3, h4, h5, h6,
.hero__title, .selva-page-title, .selva-section-title,
.selva-svc-card__title, .selva-team-card__name,
.selva-logo__text, .card__title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Pull-quote elegance — use italic Cormorant */
blockquote, .selva-section-eyebrow em, .page-subtitle {
  font-family: var(--font-display);
  font-style: italic;
}


/* ════════════════════════════════════════════════════════════════════════════
   3. PAGE LAYOUT FIXES
   ════════════════════════════════════════════════════════════════════════════ */
.selva-page-main,
.selva-main {
  padding-top: var(--sp-6, 48px);
  padding-bottom: var(--sp-12, 96px);
  min-height: 60vh;
}

.selva-page-header {
  margin-bottom: var(--sp-5, 40px);
  padding-bottom: var(--sp-4, 32px);
  border-bottom: 1px solid var(--color-border, #DDD5C8);
}

.selva-page-title {
  font-size: clamp(var(--text-3xl, 36px), 5vw, var(--text-5xl, 60px));
  color: var(--color-text-primary, #1A1A1A);
  margin: 0 0 var(--sp-2, 16px);
}

.selva-page-subtitle {
  font-size: var(--text-md, 20px);
  color: var(--color-text-muted, #78716C);
  line-height: 1.65;
  margin: 0;
}

.selva-page-body.prose {
  font-size: var(--text-base, 16px);
  line-height: 1.75;
  color: var(--color-text-muted, #78716C);
  max-width: 72ch;
  margin-bottom: var(--sp-6, 48px);
}

.selva-page-hero-thumb {
  margin-bottom: var(--sp-5, 40px);
  border-radius: var(--card-radius);
  overflow: hidden;
  line-height: 0;
}
.selva-page-hero-thumb__img {
  width: 100%;
  height: auto;
  display: block;
}

.selva-services-intro {
  max-width: 660px;
}

.selva-page-empty {
  text-align: center;
  padding: var(--sp-12, 96px) 0;
}
.selva-page-empty p {
  font-size: var(--text-md, 20px);
  color: var(--color-text-muted, #78716C);
  margin-bottom: var(--sp-4, 32px);
}


/* ════════════════════════════════════════════════════════════════════════════
   4. SERVICES GRID — Responsive CSS Grid
   ════════════════════════════════════════════════════════════════════════════

   WHY CSS GRID (not flexbox):
   • grid-template-columns: repeat(3, 1fr) creates exactly 3 equal columns
     that automatically shrink to 2 and 1 column on smaller screens via
     media queries below. No float hacks, no flex-wrap math.
   • gap handles all gutters — no margin math or negative margin wrappers.
   ════════════════════════════════════════════════════════════════════════════ */
.selva-services-grid {
  display: grid;
  grid-template-columns: repeat(var(--svc-grid-cols), 1fr);
  gap: var(--svc-grid-gap);
  margin-top: var(--sp-6, 48px);
}

/* Homepage section wrapper */
.selva-services-section {
  padding: var(--sp-12, 96px) 0;
  background: var(--color-bg-secondary, #EFE9DF);
}


/* ════════════════════════════════════════════════════════════════════════════
   5. SERVICE CARD — Base Structure
   ════════════════════════════════════════════════════════════════════════════ */
.selva-svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card, #FDFAF5);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition:
    transform  .32s cubic-bezier(.25, .46, .45, .94),
    box-shadow .32s cubic-bezier(.25, .46, .45, .94);
  will-change: transform;
}

.selva-svc-card:hover {
  transform: translateY(-8px) scale(1.012);
  box-shadow: var(--card-shadow-hov);
}

.selva-svc-card:focus-within {
  outline: 2px solid var(--color-accent, #C5A059);
  outline-offset: 2px;
}


/* ════════════════════════════════════════════════════════════════════════════
   6. SERVICE CARD — Image + Hover Zoom
   ════════════════════════════════════════════════════════════════════════════ */
.selva-svc-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--card-img-ratio);
  background: var(--color-bg-secondary, #EFE9DF);
  flex-shrink: 0;
}

.selva-svc-card__media-link {
  display: block;
  width: 100%;
  height: 100%;
}

.selva-svc-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .55s cubic-bezier(.25, .46, .45, .94);
}

/* Image zooms on card hover */
.selva-svc-card:hover .selva-svc-card__img {
  transform: scale(1.07);
}


/* ════════════════════════════════════════════════════════════════════════════
   7. SERVICE CARD — Dark Overlay (reveals on hover)
   ════════════════════════════════════════════════════════════════════════════

   The overlay is a pseudo-element on .selva-svc-card__overlay — a separate
   div (not ::after on the image) so it can contain the icon child element.
   Gradient runs transparent→dark from top to bottom for natural depth.
   ════════════════════════════════════════════════════════════════════════════ */
.selva-svc-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--overlay-start) 0%,
    var(--overlay-end)   100%
  );
  opacity: 0;
  transition: opacity .38s ease;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--sp-3, 24px);
  pointer-events: none;
  z-index: 2;
}

/* Overlay fades in on card hover */
.selva-svc-card:hover .selva-svc-card__overlay {
  opacity: 1;
}


/* ════════════════════════════════════════════════════════════════════════════
   8. SERVICE CARD — SVG Icon Reveal on Hover
   ════════════════════════════════════════════════════════════════════════════

   The SVG icon slides up from below and fades in while the overlay appears.
   Uses translateY so GPU compositing handles the animation (no layout shift).
   ════════════════════════════════════════════════════════════════════════════ */
.selva-svc-card__overlay-icon {
  transform: translateY(12px);
  opacity: 0;
  transition:
    transform .38s cubic-bezier(.34, 1.56, .64, 1),
    opacity   .30s ease;
}

.selva-svc-card:hover .selva-svc-card__overlay-icon {
  transform: translateY(0);
  opacity: 1;
}

/* Style the SVG itself */
.selva-svc-card__overlay-icon svg {
  width: 48px;
  height: 48px;
  fill:         rgba(255, 255, 255, .95);
  stroke:       none;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

/* SVGs that use stroke instead of fill */
.selva-svc-card__overlay-icon svg[fill="none"] {
  fill:   none;
  stroke: rgba(255, 255, 255, .95);
  stroke-width: 1.5;
}


/* ════════════════════════════════════════════════════════════════════════════
   9. SERVICE CARD — Badges
   ════════════════════════════════════════════════════════════════════════════ */
.selva-svc-card__badges {
  position: absolute;
  top: var(--sp-2, 16px);
  left: var(--sp-2, 16px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 3;
}

.selva-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full, 9999px);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.selva-badge--popular {
  background: var(--color-accent, #C5A059);
  color: #fff;
}

.selva-badge--featured {
  background: var(--color-bg-dark, #131110);
  color: var(--color-accent, #C5A059);
  border: 1px solid var(--color-accent, #C5A059);
}


/* ════════════════════════════════════════════════════════════════════════════
  10. SERVICE CARD — Body, Meta, Price, Duration
   ════════════════════════════════════════════════════════════════════════════ */
.selva-svc-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--sp-3, 24px) var(--sp-3, 24px) var(--sp-2, 16px);
}

.selva-svc-card__title {
  font-size: var(--text-xl, 22px);
  margin: 0 0 var(--sp-1, 8px);
  line-height: 1.2;
}
.selva-svc-card__title a {
  color: var(--color-text-primary, #1A1A1A);
  text-decoration: none;
  transition: color var(--transition-fast, .18s ease);
}
.selva-svc-card__title a:hover {
  color: var(--color-accent, #C5A059);
}

.selva-svc-card__excerpt {
  font-size: var(--text-sm, 14px);
  color: var(--color-text-muted, #78716C);
  line-height: 1.65;
  margin: 0 0 var(--sp-2, 16px);
  flex: 1;
}

.selva-svc-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2, 16px);
  margin-top: auto;
  padding-top: var(--sp-2, 16px);
  border-top: 1px solid var(--color-border-light, #F0EDE8);
}

.selva-svc-card__price {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: var(--text-base, 16px);
  font-weight: 600;
  color: var(--color-accent, #C5A059);
}
.selva-svc-card__price i { font-size: 12px; opacity: .8; }

.selva-svc-card__dur {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm, 14px);
  color: var(--color-text-muted, #78716C);
}
.selva-svc-card__dur i { font-size: 12px; }


/* ════════════════════════════════════════════════════════════════════════════
  11. SERVICE CARD — Footer CTA Buttons
   ════════════════════════════════════════════════════════════════════════════ */
.selva-svc-card__footer {
  padding: var(--sp-2, 16px) var(--sp-3, 24px) var(--sp-3, 24px);
  display: flex;
  gap: var(--sp-1, 8px);
  flex-wrap: wrap;
  border-top: 1px solid var(--color-border-light, #F0EDE8);
}

.selva-svc-card__footer .selva-btn:first-child {
  flex: 1; /* Book Now takes most space */
}


/* ════════════════════════════════════════════════════════════════════════════
  12. SERVICES FILTER BAR (page-services.php)
   ════════════════════════════════════════════════════════════════════════════ */
.selva-services-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1, 8px);
  margin-bottom: var(--sp-5, 40px);
  padding-top: var(--sp-2, 16px);
}

.selva-filter-btn {
  display: inline-block;
  padding: 9px 20px;
  border-radius: var(--radius-full, 9999px);
  border: 1.5px solid var(--color-border, #DDD5C8);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm, 14px);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-text-muted, #78716C);
  text-decoration: none;
  transition:
    background-color var(--transition-fast, .18s ease),
    border-color     var(--transition-fast, .18s ease),
    color            var(--transition-fast, .18s ease);
  cursor: pointer;
  white-space: nowrap;
}
.selva-filter-btn:hover,
.selva-filter-btn.is-active {
  background: var(--color-accent, #C5A059);
  border-color: var(--color-accent, #C5A059);
  color: #fff;
}

/* Homepage JS filter tabs */
.selva-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1, 8px);
  justify-content: center;
  margin-bottom: var(--sp-5, 40px);
}
.selva-filter-tabs__btn {
  display: inline-block;
  padding: 9px 22px;
  border-radius: var(--radius-full, 9999px);
  border: 1.5px solid var(--color-border, #DDD5C8);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm, 14px);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-text-muted, #78716C);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color     var(--transition-fast),
    color            var(--transition-fast);
}
.selva-filter-tabs__btn:hover,
.selva-filter-tabs__btn.is-active {
  background: var(--color-accent, #C5A059);
  border-color: var(--color-accent, #C5A059);
  color: #fff;
}


/* ════════════════════════════════════════════════════════════════════════════
  13. SECTION HEADER
   ════════════════════════════════════════════════════════════════════════════ */
.selva-section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--sp-6, 48px);
}

.selva-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent, #C5A059);
  margin: 0 0 var(--sp-2, 16px);
}

.selva-section-title {
  font-size: clamp(var(--text-3xl, 36px), 4vw, var(--text-4xl, 48px));
  color: var(--color-text-primary, #1A1A1A);
  margin: 0 0 var(--sp-2, 16px);
  line-height: 1.1;
}

.selva-section-subtitle {
  font-size: var(--text-base, 16px);
  color: var(--color-text-muted, #78716C);
  line-height: 1.65;
  margin: 0 0 var(--sp-3, 24px);
}

.selva-section-ornament {
  display: block;
  width: 48px;
  height: 2px;
  background: var(--color-accent, #C5A059);
  border-radius: 2px;
  margin: 0 auto;
}

.selva-section-cta {
  text-align: center;
  margin-top: var(--sp-8, 64px);
}


/* ════════════════════════════════════════════════════════════════════════════
  14. TEAM GRID + TEAM CARDS
   ════════════════════════════════════════════════════════════════════════════ */
.selva-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--svc-grid-gap);
  margin-top: var(--sp-6, 48px);
}

.selva-team-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card, #FDFAF5);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition:
    transform  .32s cubic-bezier(.25, .46, .45, .94),
    box-shadow .32s ease;
}
.selva-team-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--card-shadow-hov);
}

.selva-team-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-bg-secondary, #EFE9DF);
}
.selva-team-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform .5s ease;
}
.selva-team-card:hover .selva-team-card__img { transform: scale(1.05); }

.selva-team-card__social {
  position: absolute;
  bottom: var(--sp-2, 16px);
  right: var(--sp-2, 16px);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.92);
  border-radius: var(--radius-full, 9999px);
  color: var(--color-accent, #C5A059);
  font-size: 16px;
  text-decoration: none;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .25s ease, transform .25s ease;
}
.selva-team-card:hover .selva-team-card__social { opacity: 1; transform: scale(1); }

.selva-team-card__body {
  flex: 1;
  padding: var(--sp-3, 24px);
}
.selva-team-card__name {
  font-size: var(--text-xl, 22px);
  margin: 0 0 4px;
}
.selva-team-card__name a {
  color: var(--color-text-primary, #1A1A1A);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.selva-team-card__name a:hover { color: var(--color-accent, #C5A059); }

.selva-team-card__role {
  font-family: var(--font-body);
  font-size: var(--text-sm, 14px);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-accent, #C5A059);
  margin: 0 0 var(--sp-1, 8px);
}
.selva-team-card__bio {
  font-size: var(--text-sm, 14px);
  color: var(--color-text-muted, #78716C);
  line-height: 1.6;
  margin: 0;
}

.selva-team-card__footer {
  padding: var(--sp-2, 16px) var(--sp-3, 24px) var(--sp-3, 24px);
  display: flex;
  gap: var(--sp-1, 8px);
  border-top: 1px solid var(--color-border-light, #F0EDE8);
}
.selva-team-card__footer .selva-btn { flex: 1; justify-content: center; }


/* ════════════════════════════════════════════════════════════════════════════
  15. BUTTON SYSTEM (selva-btn)
   ════════════════════════════════════════════════════════════════════════════ */
.selva-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--radius-base, 6px);
  font-family: var(--font-body);
  font-size: var(--text-sm, 14px);
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    color            var(--transition-fast),
    border-color     var(--transition-fast),
    transform        .15s ease,
    box-shadow       .15s ease;
}
.selva-btn:hover { transform: translateY(-1px); }
.selva-btn:active { transform: translateY(0); }

/* CTA — filled accent */
.selva-btn--cta {
  background: var(--color-accent, #C5A059);
  border-color: var(--color-accent, #C5A059);
  color: #fff;
}
.selva-btn--cta:hover {
  background: var(--color-accent-hover, #D4B576);
  border-color: var(--color-accent-hover, #D4B576);
  color: #fff;
  box-shadow: 0 4px 18px rgba(197,160,89,.38);
}

/* Ghost — transparent + border */
.selva-btn--ghost {
  background: transparent;
  border-color: var(--color-border, #DDD5C8);
  color: var(--color-text-primary, #1A1A1A);
}
.selva-btn--ghost:hover {
  background: var(--color-bg-secondary, #EFE9DF);
  border-color: var(--color-text-muted, #78716C);
}

/* Outline — accent border, transparent bg */
.selva-btn--outline {
  background: transparent;
  border-color: var(--color-accent, #C5A059);
  color: var(--color-accent, #C5A059);
}
.selva-btn--outline:hover {
  background: var(--color-accent, #C5A059);
  color: #fff;
  box-shadow: 0 4px 18px rgba(197,160,89,.28);
}

/* Sizes */
.selva-btn--sm { padding: 9px 18px; font-size: 13px; }
.selva-btn--md { padding: 11px 24px; }
.selva-btn--lg { padding: 14px 36px; font-size: var(--text-base, 16px); border-radius: var(--radius-full, 9999px); }


/* ════════════════════════════════════════════════════════════════════════════
  16. ADMIN BANNER (placeholder notice for fresh installs)
   ════════════════════════════════════════════════════════════════════════════ */
.selva-admin-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 16px);
  padding: var(--sp-2, 16px) var(--sp-3, 24px);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-base, 6px);
  color: #1d4ed8;
  font-size: var(--text-sm, 14px);
  font-weight: 500;
  margin-bottom: var(--sp-4, 32px);
}
.selva-admin-banner i { flex-shrink: 0; font-size: 18px; }
.selva-admin-banner span { flex: 1; }
.selva-admin-banner__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--sp-2, 16px);
  padding: 6px 14px;
  background: #1d4ed8;
  color: #fff;
  border-radius: var(--radius-base, 6px);
  font-weight: 700;
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
  transition: background-color var(--transition-fast);
}
.selva-admin-banner__link:hover { background: #1e40af; color: #fff; }


/* ════════════════════════════════════════════════════════════════════════════
  17. DARK SKIN OVERRIDES
      html.skin-dark is set by header.php when selva_get_skin() = 'dark'
   ════════════════════════════════════════════════════════════════════════════ */
.skin-dark .selva-svc-card,
.skin-dark .selva-team-card {
  background: var(--color-bg-card, #1E1C19);
  box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.30);
}
.skin-dark .selva-svc-card:hover,
.skin-dark .selva-team-card:hover {
  box-shadow: 0 20px 56px rgba(0,0,0,.50), 0 4px 12px rgba(0,0,0,.35);
}

.skin-dark .selva-svc-card__title a,
.skin-dark .selva-team-card__name a {
  color: var(--color-text-primary, #F5F0E8);
}
.skin-dark .selva-svc-card__title a:hover,
.skin-dark .selva-team-card__name a:hover {
  color: var(--color-accent, #C9A84C);
}

.skin-dark .selva-svc-card__excerpt,
.skin-dark .selva-svc-card__dur,
.skin-dark .selva-team-card__bio {
  color: rgba(245, 240, 232, .60);
}

.skin-dark .selva-svc-card__price,
.skin-dark .selva-team-card__role {
  color: var(--color-accent, #C9A84C);
}

.skin-dark .selva-svc-card__meta,
.skin-dark .selva-svc-card__footer,
.skin-dark .selva-team-card__footer {
  border-top-color: rgba(255,255,255,.08);
}

.skin-dark .selva-page-header {
  border-bottom-color: rgba(255,255,255,.08);
}

.skin-dark .selva-page-title,
.skin-dark .selva-section-title {
  color: var(--color-text-primary, #F5F0E8);
}

.skin-dark .selva-filter-btn,
.skin-dark .selva-filter-tabs__btn {
  border-color: rgba(255,255,255,.15);
  color: rgba(245,240,232,.65);
}
.skin-dark .selva-filter-btn:hover,
.skin-dark .selva-filter-btn.is-active,
.skin-dark .selva-filter-tabs__btn:hover,
.skin-dark .selva-filter-tabs__btn.is-active {
  background: var(--color-accent, #C9A84C);
  border-color: var(--color-accent, #C9A84C);
  color: #0F0F0E;
}

.skin-dark .selva-btn--ghost {
  border-color: rgba(255,255,255,.18);
  color: rgba(245,240,232,.80);
}
.skin-dark .selva-btn--ghost:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.30);
  color: #fff;
}

.skin-dark .selva-services-section {
  background: var(--color-bg-secondary, #181714);
}

.skin-dark .selva-admin-banner {
  background: #1e3a5f;
  border-color: #2563eb;
  color: #93c5fd;
}


/* ════════════════════════════════════════════════════════════════════════════
  18. RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════════════════════════════════════ */

/* Tablet: 2 columns */
@media (max-width: 1023px) {
  :root { --svc-grid-cols: 2; }
  .selva-team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Large mobile: service cards still 2 wide, team goes 1 wide */
@media (max-width: 767px) {
  .selva-team-grid { grid-template-columns: 1fr; }
  .selva-page-title { font-size: var(--text-3xl, 36px); }
  .selva-section-title { font-size: var(--text-2xl, 28px); }
}

/* Mobile: 1 column everything */
@media (max-width: 599px) {
  :root { --svc-grid-cols: 1; }

  .selva-services-filter-bar,
  .selva-filter-tabs { gap: 6px; }
  .selva-filter-btn,
  .selva-filter-tabs__btn { padding: 7px 14px; font-size: 12px; }

  .selva-svc-card__footer { flex-direction: column; }
  .selva-svc-card__footer .selva-btn:first-child { flex: none; width: 100%; }
  .selva-svc-card__footer .selva-btn:last-child  { width: 100%; }

  .selva-team-card__footer { flex-direction: column; }
  .selva-team-card__footer .selva-btn { flex: none; width: 100%; }

  .selva-section-cta .selva-btn--lg { width: 100%; }

  .selva-admin-banner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .selva-admin-banner__link { margin-left: 0; width: 100%; justify-content: center; }
}

/* Reduced motion — disable all non-essential transitions */
@media (prefers-reduced-motion: reduce) {
  .selva-svc-card,
  .selva-svc-card__img,
  .selva-svc-card__overlay,
  .selva-svc-card__overlay-icon,
  .selva-team-card,
  .selva-team-card__img {
    transition: none;
    animation: none;
  }
  .selva-svc-card:hover { transform: none; }
  .selva-team-card:hover { transform: none; }
}