/**
 * Mock /mock-services/ — override de tokens Quiosco a brand Rebs.
 *
 * Estrategia: NO reimplementar el componente .qsc-grid (lo carga el plugin
 * Quiosco). Solo redeclaramos las CSS vars públicas dentro del scope del mock
 * (`body.page-mock-services .qsc-grid`) para repintar a paleta/tipografía Rebs.
 *
 * Tokens redeclarados: bg card, button (mint idle / teal hover, texto blanco
 * en ambos según standard Rebs), category pill (teal, esquina inferior-derecha
 * redondeada como .card-header-overlay del /services/ real).
 *
 * Estado --selected: cuando llega ?service=SLUG, JS agrega
 * .qsc-grid__card--selected a la card matcheada. Border mint, sombra brand,
 * scale sutil + pill "Selected" arriba a la derecha (::after).
 */

/* -------------------------------------------------------------------------
 * 1. Token overrides — brand Rebs
 * Specificity: body.page-mock-services (0,1,1) + .qsc-grid (0,2,1) gana al
 * `:where(.qsc-grid)` original (0,0,0) sin pelear.
 * ------------------------------------------------------------------------- */

body.page-mock-services .qsc-grid,
body.page-mock-services .qsc-grid__card {
  /* Card — SCRUM-191 reset: radius 0 site-wide (cards Rebs son cuadradas) */
  --qsc-card-bg: #ffffff;
  --qsc-card-text: var(--rebs-text, #0a3a45);
  --qsc-card-text-muted: #5a6b70;
  --qsc-card-border: 1px solid #e8edee;
  --qsc-card-radius: 0;
  --qsc-card-shadow: 0 4px 16px rgba(10, 58, 69, 0.08);
  --qsc-card-padding: 1.5rem;

  /* Media */
  --qsc-media-aspect-ratio: 16 / 10;

  /* Title */
  --qsc-title-size: 1.25rem;
  --qsc-title-weight: 500;
  --qsc-title-line-height: 1.3;

  /* Price destacado — esto es lo que pidió Cani */
  --qsc-price-size: 1.5rem;
  --qsc-price-color: var(--rebs-teal, #0097b2);

  /* Button — standard Rebs: mint idle / teal hover, texto BLANCO en ambos.
     Radius 0 alineado al reset SCRUM-191. */
  --qsc-button-bg: var(--rebs-mint, #0cdfc6);
  --qsc-button-text: #ffffff;
  --qsc-button-bg-hover: var(--rebs-teal, #0097b2);
  --qsc-button-radius: 0;
  --qsc-button-padding: 0.75rem 1.5rem;

  /* Category pill — EXCEPCIÓN INTENCIONAL al reset SCRUM-191. Replica el
     `.card-header-overlay` de /services/ real: teal, esquina inferior-derecha
     redondeada (8px), anclado top-left. Es design pattern de Rebs. */
  --qsc-category-bg: var(--rebs-teal, #0097b2);
  --qsc-category-text: #ffffff;
  --qsc-category-padding: 0.625rem 1rem;
  --qsc-category-font-size: 0.875rem;
  --qsc-category-font-weight: 500;
  --qsc-category-radius-br: 8px;

  /* Grid gap más generoso */
  --qsc-grid-gap: 2rem;
}

/* -------------------------------------------------------------------------
 * 2. Tipografía brand — Mulish (headings) + Poppins (body)
 * El token API de Quiosco no expone font-family — la inyectamos directo
 * por specificity sin !important.
 * ------------------------------------------------------------------------- */

body.page-mock-services .qsc-grid__title {
  font-family: 'Mulish', 'Helvetica Neue', sans-serif;
}

body.page-mock-services .qsc-grid__excerpt,
body.page-mock-services .qsc-grid__price,
body.page-mock-services .qsc-grid__button {
  font-family: 'Poppins', 'Helvetica Neue', sans-serif;
}

body.page-mock-services .qsc-grid__price {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* -------------------------------------------------------------------------
 * 3. Layout intro de la página
 * ------------------------------------------------------------------------- */

body.page-mock-services .mock-services-intro {
  max-width: 720px;
  margin: 0 auto 3rem;
  text-align: center;
}

body.page-mock-services .mock-services-intro h1 {
  font-family: 'Mulish', sans-serif;
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 500;
  color: var(--rebs-text, #0a3a45);
  margin: 0 0 1rem;
}

body.page-mock-services .mock-services-intro p {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: #5a6b70;
  margin: 0;
}

body.page-mock-services .mock-services-wrapper {
  max-width: 1280px;
  margin: 3rem auto;
  padding: 0 1.5rem;
}

/* -------------------------------------------------------------------------
 * 4. Estado --selected — card destacada cuando llega ?service=SLUG
 *
 * Composición visual:
 *  - Border mint 2px (reemplaza el border gris default)
 *  - Sombra brand más fuerte
 *  - Scale 1.02 (sutil, no agresivo)
 *  - Pill "Selected" arriba a la derecha vía ::before
 *  - Transición suave para que el highlight no sea brusco
 * ------------------------------------------------------------------------- */

body.page-mock-services .qsc-grid__card {
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

body.page-mock-services .qsc-grid__card--selected {
  border: 2px solid var(--rebs-mint, #0cdfc6);
  box-shadow: 0 12px 32px rgba(12, 223, 198, 0.25),
              0 4px 12px rgba(0, 151, 178, 0.15);
  transform: scale(1.02);
  z-index: 1;
}

/* Pill "Selected" — posicionado top-right de la card.
   Radius 0 alineado al reset SCRUM-191. */
body.page-mock-services .qsc-grid__card--selected::before {
  content: 'Selected';
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  z-index: 3;
  padding: 0.375rem 0.75rem;
  background: var(--rebs-mint, #0cdfc6);
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(12, 223, 198, 0.4);
  pointer-events: none;
}

/* -------------------------------------------------------------------------
 * 5. Media query: en mobile, scale agresivo rompe layout. Bajamos.
 * ------------------------------------------------------------------------- */

@media (max-width: 767px) {
  body.page-mock-services .qsc-grid__card--selected {
    transform: scale(1.01);
  }
}

/* -------------------------------------------------------------------------
 * 6. Reduced motion — sin scale ni transition
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body.page-mock-services .qsc-grid__card {
    transition: none;
  }
  body.page-mock-services .qsc-grid__card--selected {
    transform: none;
  }
}

/* -------------------------------------------------------------------------
 * 7. Slider — TODOS los viewports.
 *
 * Decisión 2026-05-27: el slider unifica el comportamiento en todos los
 * viewports: scroll-snap horizontal + flechas cuadradas estilo testimonios.
 * NO library externa. Se MANTIENE aunque hoy entren todas las cards en
 * desktop: Cani quiere el slider activo por si suma más servicios a futuro.
 *
 * Estado real 2026-06-09: 5 servicios (Introductory, Catch Up, Client Call,
 * Power Hour, Mentoring). El grid NO está anidado en .mock-services-intro
 * (720px) — es hijo directo de .mock-services-wrapper (1280px) y ya ocupa el
 * ancho de contenido correcto (verificado getComputedStyle local).
 *
 * Cards visibles por viewport:
 *   - Mobile (<768):     1 card + peek (~85vw)
 *   - Tablet (768-1023):  2 cards + peek (slider)
 *   - Desktop (≥1024):    LAS 5 cards en una fila, CENTRADAS, sin slider
 *                          (decisión Cani 2026-06-09 v0.13.0: con el grid ya
 *                          liberado del header de 720px ocupa el wrapper de
 *                          1172px y las 5 entran cómodas. justify-content:center
 *                          SOLO en ≥1024 — abajo rompería el slider, ver nota
 *                          en .qsc-grid. El overflow-x:auto sigue activo pero
 *                          NO scrollea porque no hay desborde — el slider
 *                          vuelve solo en tablet/mobile donde sí desbordan.)
 * ------------------------------------------------------------------------- */

body.page-mock-services .qsc-grid {
  display: flex;
  flex-direction: row;
  /* flex-start (default) en tablet/mobile: cuando las cards DESBORDAN el grid,
     justify-content:center partiría el overflow a ambos lados y empujaría la
     primera card fuera del scroll (left negativo, inalcanzable con scrollLeft).
     Verificado por CDP 2026-06-09: con center, en 900px la primera card queda
     en left:-358 y firstClippedLeft:true → slider roto. Por eso el centrado se
     aplica SOLO en ≥1024px (sección 8), donde no hay desborde. */
  justify-content: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.5rem 1.5rem;
  margin: 0 -1.5rem;
  gap: 1.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* align-items: stretch (default) + height:100% en cada card consigue
     que TODAS las cards igualen alto al row, no al contenido propio. */
  align-items: stretch;
}

body.page-mock-services .qsc-grid::-webkit-scrollbar {
  display: none;
}

body.page-mock-services .qsc-grid__card {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  flex: 0 0 85%;
  max-width: 85%;
  /* En flex row, `height: 100%` de Quiosco no se infiere del tallest sibling
     por default. Forzamos con align-self stretch + height auto para que el
     contenedor flex calcule el alto real del row más alto. */
  align-self: stretch;
  height: auto;
}

@media (min-width: 768px) {
  body.page-mock-services .qsc-grid__card {
    flex: 0 0 calc(50% - 0.75rem);
    max-width: calc(50% - 0.75rem);
  }
}

@media (min-width: 1024px) {
  /* Centrado del conjunto SOLO en desktop: acá las 5 cards entran sin
     desborde (scrollWidth ≈ clientWidth), así que justify-content:center
     centra la fila completa en el wrapper sin riesgo de clipping. Verificado
     por CDP 2026-06-09: a 1440px → gridLeft 134/gridRight 1306, bloque de 5
     cards centrado, firstClippedLeft:false, hasOverflow:false. */
  body.page-mock-services .qsc-grid {
    justify-content: center;
  }

  body.page-mock-services .qsc-grid__card {
    /* LAS 5 cards en una fila en desktop (decisión Cani 2026-06-09 v0.13.0).
       Con el grid ya liberado del header de 720px, el .qsc-grid ocupa el
       wrapper de contenido (~1172px) y las 5 cards entran cómodas sin
       desbordar. Gap entre cada: 1.5rem (24px). Con 5 cards hay 4 gaps =
       4 × 24 = 96px. Cada card = (100% - 96px) / 5 ≈ 210px.
       scrollWidth ≈ clientWidth → NO hay overflow → el slider no scrollea
       (sí queda activo el overflow-x:auto, pero sin nada que scrollear).
       justify-content:center (sección 7) centra el conjunto en el wrapper.
       En tablet/mobile las cards desbordan y el slider vuelve naturalmente. */
    flex: 0 0 calc((100% - 96px) / 5);
    max-width: calc((100% - 96px) / 5);
  }
}

/* Controles slider — visibles en todos los viewports. */
body.page-mock-services .mock-services-slider-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

body.page-mock-services .mock-services-slider-btn {
  width: 48px;
  height: 48px;
  background: transparent;
  border: 2px solid var(--rebs-teal, #0097b2);
  border-radius: 0;
  color: var(--rebs-teal, #0097b2);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 200ms ease, color 200ms ease;
  padding: 0;
  font-family: inherit;
}

body.page-mock-services .mock-services-slider-btn:hover,
body.page-mock-services .mock-services-slider-btn:focus-visible {
  background: var(--rebs-teal, #0097b2);
  color: #ffffff;
}

body.page-mock-services .mock-services-slider-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

body.page-mock-services .mock-services-slider-btn:focus-visible {
  outline: 2px solid var(--rebs-mint, #0cdfc6);
  outline-offset: 2px;
}