/*
 * Casos d'èxit (global-templates/success-stories-component.php).
 *
 * El carrusel NO fa servir Swiper (desacoblat de
 * js/Legacy_new-child-theme.js pel mateix motiu i amb el mateix patró que
 * css/components/actualitat.css: llegiu-lo primer per al detall complet).
 * ".success-stories-track" és un track amb scroll-snap natiu, mogut pel
 * motor genèric js/components/carousel.js via l'atribut "data-carousel".
 * Mòbil: 1 targeta amb "peek" (85%, ~slidesPerView 1.15); >=768px: 2;
 * >=992px: 3 - substitueix els antics breakpoints Swiper (375/768/1024).
 */

/* --- Ritme vertical: títol equidistant (feedback client 2026-07-23) ---
   El títol ha de quedar CENTRAT al seu espai: distància indicador "Continua
   fent scroll" (peu de #services-scroll) -> títol IGUAL a distància títol ->
   targetes.

   Per què tot va amb el prefix "body.page-template-home-page": el CSS legacy
   (min) porta ".page-template-home-page #success-stories{padding-top:100px;
   padding-bottom:100px}" i "#success-stories h2{margin-bottom:60px}" que
   GUANYAVEN a les regles planes d'aquest fitxer - el padding 64px de mòbil i
   el "margin: 0" de l'h2 de la versió anterior no s'aplicaven mai (per això
   la secció mesurava 100px de padding a tot arreu i l'h2 arrossegava 60px de
   marge fantasma). El body extra dóna l'especificitat justa per sobre de
   qualsevol variant legacy, mateixa tècnica que services-page.css/navbar.css.

   La distància de DALT no és només el nostre padding-top: l'sticky de
   #services-scroll centra el contingut en 100vh (justify-content: center) i
   deixa la seva "cua" (leftover/2 + 32px de padding) just abans d'aquesta
   secció - mesurada ~231px en escriptori (1600x914, contingut real) i ~90px
   en un mòbil típic (~800px d'alçada, on el contingut omple gairebé tot el
   viewport; als tests headless de 500x914 la cua surt inflada, ~185px - és
   artefacte del viewport, no un desequilibri real). Amb l'h2 ja sense marge:

   Escriptori:  A = 231.5 (cua) + 22 (padding-top)          = 253.5
                B = 20 (gap) + 44 (nav) + 194 (margin) - 4  = 254
   Mòbil:       A = ~90 (cua) + 32 (padding-top)            = ~122
                B = 126 (margin) - 4 (track)                = 122
   (el -4 és el margin negatiu de .success-stories-track, més avall)

   Si es retoca l'alçada del peu de #services-scroll o el seu padding,
   recalibrar aquí. */
body.page-template-home-page #success-stories {
  padding: 32px 0 var(--section-spacing-y);
}

@media screen and (min-width: 992px) {
  body.page-template-home-page #success-stories {
    padding: 22px 0 var(--section-spacing-y-lg);
  }
}

/* --- Capçalera: títol centrat + navegació alineada a la dreta --- */
#success-stories .success-stories-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}

body.page-template-home-page #success-stories .success-stories-header h2 {
  margin: 0;
  text-align: center;
}

@media screen and (min-width: 992px) {
  #success-stories .success-stories-header {
    margin-bottom: 56px;
  }
}

/* Fletxes de navegació prev/next: veure global-templates/carousel-nav.php +
   css/components/carousel-nav.css (component compartit, també usat a
   #actualitat) - inclou el seu propi amagat a mòbil. Abans tenien una
   "border: 1px solid var(--color-dark)" pròpia d'aquí; el component
   compartit no en porta (segueix l'estil sense vora d'#actualitat), així
   que aquestes fletxes ara es veuen sense contorn també. */

/* --- Carrusel --- */
#success-stories .success-stories-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px;
  margin: -4px;
}

#success-stories .success-stories-track::-webkit-scrollbar {
  display: none;
}

@media screen and (min-width: 768px) {
  #success-stories .success-stories-track {
    gap: 20px;
  }
}

/* --- Targeta: quadrada, amb logo per defecte i hover amb títol/fletxa ---
   El marcat viu a global-templates/case-card.php i es COMPARTEIX entre el
   carrusel de la portada i la graella de l'arxiu /casos-de-exito
   (loop-templates/story-content.php) - per això les regles visuals de la
   targeta van SENSE l'escopa #success-stories (les classes .case-card-* són
   pròpies del component, no col·lisionen amb res més). Només el dimensionat
   de carrusel (flex/scroll-snap, just a sota) queda lligat al track de la
   portada; a l'arxiu la targeta omple la seva columna Bootstrap. */
.case-card {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--color-dark);
  text-decoration: none;
}

/* Dimensionat de carrusel, només a la portada.
   Mòbil: 85% (~slidesPerView 1.15) perquè el cantó de la targeta següent
   "assomi" per la dreta, igual que a css/components/actualitat.css. */
#success-stories .case-card {
  flex: 0 0 85%;
  scroll-snap-align: start;
}

@media screen and (min-width: 768px) {
  #success-stories .case-card {
    flex-basis: calc((100% - 20px) / 2);
  }
}

/* 3 targetes a partir de "lg" (992px), NO de 1024px: el .container de
   Bootstrap salta de 720px a 960px justament a 992px, així que entre 992 i
   1023px les 2 targetes del tram tauleta s'inflaven fins a ~458px (més grans
   que a 640px i molt més que les 299px de 1024px) - la mida de targeta no era
   monòtona respecte l'amplada de pantalla. Alineant el canvi de 2 a 3 columnes
   amb el mateix breakpoint que fa saltar el contenidor, la reflow passa una
   sola vegada i la targeta només decreix. */
@media screen and (min-width: 992px) {
  #success-stories .case-card {
    flex-basis: calc((100% - 40px) / 3);
  }
}

.case-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mock: overlay rgba(44,44,68,0.6) = var(--color-dark), no un navy
   (30,35,50) sense relació amb la resta de la paleta. */
.case-card-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(44, 44, 68, 0.6);
  transition: background-color 0.3s ease;
}

.case-card:hover .case-card-overlay,
.case-card:focus-visible .case-card-overlay {
  background-color: rgba(44, 44, 68, 0.78);
}

.case-card-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 60%;
  max-height: 35%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}

.case-card-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.case-card:hover .case-card-logo,
.case-card:focus-visible .case-card-logo {
  opacity: 0;
}

.case-card-arrow {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #fff;
  font-size: 46px;
  line-height: 1;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.case-card-caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  color: #fff;
  font-family: var(--font-main);
  font-weight: 600;
  font-size: 16px;
  line-height: 140%;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.case-card:hover .case-card-arrow,
.case-card:hover .case-card-caption,
.case-card:focus-visible .case-card-arrow,
.case-card:focus-visible .case-card-caption {
  opacity: 1;
  transform: translateY(0);
}

/* Tàctil (mock actualitzat 2026-07-24): sense ratolí no hi ha ":hover", així
   que l'overlay fosc + logo + caption/fletxa (pensats com a estat "hover"
   d'escriptori) quedaven sempre en el seu estat per defecte (logo visible,
   caption/fletxa invisibles) - el mock mostra el degradat i el peu de
   targeta (logo + títol) sempre visibles a mòbil. Mateix criteri
   "(hover: hover) and (pointer: fine)" que .pointer-aura a hero.css. */
@media (hover: none) {
  .case-card-overlay {
    background-color: rgba(44, 44, 68, 0.72);
  }

  .case-card-arrow,
  .case-card-caption {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Graella de l'arxiu /casos-de-exito (archive-success_story.php) ---
   Les targetes hi arriben dins de columnes Bootstrap normals
   (loop-templates/story-content.php); només cal el respir vertical entre
   files (la paginació AJAX afegeix més columnes al mateix .content-wrapper,
   row-gap les cobreix igual). */
.post-type-archive-success_story #posts .content-wrapper {
  row-gap: 20px;
}

/* --- Peu: botó "Veure tots els casos" --- */
#success-stories .success-stories-footer {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

#success-stories .success-stories-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 100px;
  background-color: var(--color-dark);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

#success-stories .success-stories-cta:hover {
  background-color: #646E9E;
}

@media (prefers-reduced-motion: reduce) {
  .case-card-overlay,
  .case-card-logo,
  .case-card-arrow,
  .case-card-caption,
  #success-stories .success-stories-cta {
    transition: none;
  }
}