/*
 * Hero (home-page.php - #hero-header).
 * Aquestes regles fan servir el mateix prefix ".page-template-home-page #hero-header"
 * que Legacy_new-child-theme.css (el bundle realment encolat per theme_enqueue_styles(),
 * veure functions.php) perquè, amb la mateixa especificitat, guanyen per ordre de sortida
 * (aquest full es carrega després, veure matteria_custom_components_assets()), i així no
 * cal tocar el bundle legacy per anul·lar el vell hero fixed/100vh
 * (".page-template-home-page #hero-header { position: fixed; height: 100vh; ... }").
 */

/* Contenedor Principal con textura de grano fija.
   El disseny (.claude/context/Matteria Home Standalone.html) exporta el fons
   com una imatge estàtica (img/hero-bg.jpg encara disponible a /img si mai
   cal retornar-hi), però aquí es prioritza el "pointer-aura" interactiu
   (.pointer-aura + js/components/hero.js) que Andrea ja havia ajustat i
   confirmat abans d'aquesta sessió (veure git log) - la imatge de fons quedava
   per sobre i l'aura interactiva es perdia contra el seu propi glow ja
   il·luminat. Es torna al degradat CSS pla perquè l'aura hi torni a
   destacar igual que abans. */
.page-template-home-page #hero-header {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-gradient);
  /* Legacy_new-child-theme.css fixa ".page-template-home-page #hero-header" a
     "height: 100vh" (sense media query, sense !important) pensant en el vell hero
     fixed. Un "height" explícit sempre guanya sobre "min-height", així que cal
     neutralitzar-lo (igual que ja es fa amb "position"). Abans això només es feia
     a >=992px i per sota el hero quedava clavat a 100vh amb "overflow: hidden":
     en horitzontal (mòbil/tablet apaïsat, ~334-414px d'alçada) els pills del CTA
     queien fora de la caixa i es retallaven, sense cap manera d'arribar-hi
     (mesurat: 279px de contingut tallat a 900x414, 450px a 760x334). */
  height: auto;
  min-height: 100vh;
  /* Interpolació contínua entre els dos valors del disseny (160/64 a mòbil,
     220/120 a l'amplada de referència del mock) en comptes del salt sec que
     hi havia a 992px. Rectes per (992, 160)->(1600, 220) i
     (992, 64)->(1600, 120); el clamp les deixa planes fora del rang.

     El "min(..., Nvh)" hi posa un segon sostre lligat a l'ALÇADA del viewport:
     el padding del disseny és el que toca en una pantalla de ~1000px d'alt, però
     amb la mateixa amplada i menys alçada aquests 340px de padding (22% del hero)
     eren el primer motiu pel qual el hero no cabia a la pantalla. Els coeficients
     (24.4vh = 220/900, 13.3vh = 120/900) fan que a l'alçada del mock (900px) el
     valor sigui exactament el del disseny i que només es retalli per sota d'això.
     El "max(110px, ...)" garanteix que el padding superior mai baixi del nav
     fixe (94px a desktop, 84px a mòbil) + una mica d'aire. */
  padding-top: max(110px, min(clamp(160px, 9.87vw + 62.1px, 220px), 24.4vh));
  padding-bottom: min(clamp(64px, 9.21vw - 27.4px, 120px), 13.3vh);
}

/* Mock actualitzat de mòbil (2026-07-24): degradat més verd/menys blavós que
   var(--color-bg-gradient) (compartida amb la cinta de clients, veure
   customers.css - no es toca la variable per no canviar també el ribbon).
   Només ≤767.98px: a partir de 768px es manté el degradat de marca. */
@media screen and (max-width: 767.98px) {
  .page-template-home-page #hero-header {
    background: linear-gradient(134deg, #0e2e2a 14%, #2f6e52 54%, #74ae72 86%);
  }
}

/* TEXTURA DE GRANO: Se aplica sobre todo el fondo del Hero */
.page-template-home-page #hero-header::after {
  content: "";
  position: absolute;
  inset: 0;
  /* SVG inyectado que genera el ruido fractal nítido */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");

  /* Opacidad sutil para el fondo (0.05 a 0.08 suele ser perfecto) */
  opacity: 0.04;

  /* 'overlay' hace que el grano reaccione tanto al fondo oscuro como al gradiente amarillo que pasa por detrás */
  mix-blend-mode: overlay;

  /* Asegura que el grano se quede justo encima de la luz pero detrás del texto */
  z-index: 1;
  pointer-events: none;
}

@media screen and (min-width: 992px) {
  .page-template-home-page #hero-header {
    /* Es descompta l'alçada del "peek" de la cinta de clients (veure
       --customers-ribbon-peek a _variables.css) perquè, sense fer scroll, es vegi
       aproximadament la meitat de #customers just per sota del hero, tal com mostra
       el mock. Només afecta ≥992px: al mòbil/tablet el contingut del hero ja supera
       l'alçada del viewport (layout apilat amb la side card sota el contingut). */
    min-height: calc(100vh - var(--customers-ribbon-peek));
  }
}

/* Degradat estàtic (abans "pointer aura": un halo que seguia el ratolí via
   JS, veure git history / js/components/hero.js - eliminat a petició del
   client perquè volien un fons normal i estàtic, igual a desktop i mòbil).
   Es manté el mateix to i posició per defecte que tenia l'efecte dinàmic
   (65%/30%, groc Jonquil) perquè el fons no canviï visualment, però ara és
   fix: no hi ha JS ni "--x"/"--y" custom properties implicades. */
/* DISEÑO BASE (OCULTO PARA MÓVILES Y TABLETS) */
.page-template-home-page #hero-header .pointer-aura {
  display: none; /* <--- Esto lo oculta por completo en móviles */
  position: absolute;
  inset: -100px;
  pointer-events: none;
  z-index: 0;
  filter: blur(60px);
  mix-blend-mode: screen;
}

/* OVERRIDE DINÁMICO (SOLO PARA ORDENADORES CON RATÓN) */
@media (hover: hover) and (pointer: fine) {
  .page-template-home-page #hero-header .pointer-aura {
    display: block; /* <--- Lo volvemos a encender en desktop */
    background: radial-gradient(
      circle at var(--x, 65%) var(--y, 30%),
      rgba(222, 245, 97, 0.5) 0%,
      rgba(222, 245, 97, 0.3) 20%,
      transparent 65%
    );
  }
}
.page-template-home-page #hero-header .container {
  position: relative;
  z-index: 1;
  /* Bootstrap's stock .container caps out at 1320px (>=1400px), leaving a
     large empty margin on wide screens. Edge padding itself is handled by
     the shared ".container-edge" class (css/components/_layout.css, applied
     directly on this element's markup) - this just removes Bootstrap's
     max-width cap so that padding is the only thing bounding the width. */
  max-width: 100%;
}

/* Tipografia H1: Raleway 600 (SemiBold), ~59px (brandbook: 44pt, 1pt = 1.333px).
   L'escala responsive intermèdia és una progressió pròpia del component fins arribar
   al valor de marca (var(--font-size-h1)) al breakpoint xl. */
.page-template-home-page #hero-header .hero-content h1,
.page-template-home-page #hero-header .hero-content .h1 {
  font-size: 40px;
  font-family: var(--font-heading);
  color: #ffffff;
  font-weight: var(--font-weight-h1);
  line-height: var(--line-height-h1);
}

/* Escala CONTÍNUA entre els dos extrems que ja tenia el disseny: 53px a 576px
   i el valor de marca (var(--font-size-h1) * 1.15 = 67.85px) a partir de
   1200px, on ja hi era. Abans hi havia tres graons (53 / 64 / 67.85) i el de
   992px queia justament on el hero perdia amplada de columna pel padding de
   144px: el títol passava de 2 línies a 991px a CINC línies a 992px. La recta
   passa per (576, 53) i (1200, 67.85) -> pendent 14.85px / 624px = 2.38vw.
   Els dos extrems del disseny es conserven exactament. */
@media screen and (min-width: 576px) {
  .page-template-home-page #hero-header .hero-content h1,
  .page-template-home-page #hero-header .hero-content .h1 {
    font-size: clamp(53px, 2.38vw + 39.3px, calc(var(--font-size-h1) * 1.15));
  }
}

.page-template-home-page #hero-header .hero-subtitle {
  color: var(--color-cream);
  /* Mateix criteri que l'H1: interpolació contínua entre els dos valors del
     disseny (22px fins a 992px, 26px a l'amplada gran) en comptes d'un salt
     sec a 992px. Recta per (992, 22) i (1440, 26). */
  font-size: clamp(22px, 0.893vw + 13.1px, 26px);
  line-height: 160%;
  margin-top: 24px;
  max-width: 90% /* Increased from 480px so the larger text doesn't wrap too early */
}

.page-template-home-page #hero-header .hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

/* El pill primari no té border i el secundari sí (2px), però el flex els iguala
   l'alçada (align-items: stretch), així que amb layout de bloc el text del
   primari quedava 4px amunt del centre. Centrat real dins de cada botó. */
.page-template-home-page #hero-header .hero-cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mòbil: els dos pills CTA ocupen tota l'amplada disponible en comptes de
   quedar-se a la mida del seu text (mock: un a sota de l'altre, cadascun
   fent d'amplada completa). Es defineix aquí (no min-width) perquè "flex:
   1 1 100%" força el "wrap" fins i tot si el text dels dos botons hi
   cabria en una sola línia. */
@media screen and (max-width: 767.98px) {
  .page-template-home-page #hero-header .hero-cta .btn {
    flex: 1 1 100%;
    width: 100%;
    text-align: center;
  }
}

/* PANTALLES BAIXES (>=992px): el mateix criteri que el padding de dalt, aplicat
   a la tipografia i als marges verticals del hero. El hero és l'única secció amb
   la promesa de cabre sencera a la finestra (min-height: 100vh - peek), però
   tota la seva escala anava lligada NOMÉS a l'amplada: a 1440x714 feia 939px
   d'alt (225px per sota de la línia de plegat) i a 1366x682, 920px. Amb la
   mateixa amplada i menys alçada no hi ha manera de fer-lo cabre sense reduir
   també el text, així que cada mida porta un sostre en vh calibrat per valer
   exactament el valor del disseny a l'alçada del mock (900px): 7.5vh = 67.85/900,
   2.9vh = 26/900, 2.7vh = 24/900, 4.4vh = 40/900. Per sobre de ~900px d'alçada,
   doncs, no canvia res; per sota, el hero torna a cabre (mesurat: contingut
   sencer visible sense scroll de 1920x994 fins a 1280x514).

   Només >=992px: per sota, el hero ja no està limitat a 100vh (veure la nota de
   "height: auto") i la pàgina simplement fa scroll. Aplicar-hi el sostre en vh
   deixaria l'H1 a ~25px en un mòbil apaïsat, que és pitjor que fer scroll. */
@media screen and (min-width: 992px) {
  .page-template-home-page #hero-header .hero-content h1,
  .page-template-home-page #hero-header .hero-content .h1 {
    font-size: min(clamp(53px, 2.38vw + 39.3px, calc(var(--font-size-h1) * 1.15)), 7.5vh);
  }

  .page-template-home-page #hero-header .hero-subtitle {
    font-size: min(clamp(22px, 0.893vw + 13.1px, 26px), 2.9vh);
    margin-top: min(24px, 2.7vh);
  }

  .page-template-home-page #hero-header .hero-cta {
    margin-top: min(40px, 4.4vh);
  }
}

.page-template-home-page #hero-header .btn-outline-hero {
  font-size: 16px;
  font-weight: 700;
  padding: 16px 24px;
  border-radius: 100px;
  background-color: transparent;
  /* 2px al mock (box-shadow: inset 0 0 0 2px), no l'1px per defecte de Bootstrap */
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.page-template-home-page #hero-header .btn-outline-hero:hover {
  background-color: var(--color-primary);
  color: var(--color-dark);
}

/* La targeta lateral va SOTA el contingut (apilada) fins a 1200px i només es
   posa al costat a partir d'allà, que és on el marcatge fa el repartiment 8/3
   ("col-xl-8" / "col-xl-3", veure page-templates/home-page.php). Abans el
   repartiment començava a 992px, i allà la columna de text es quedava en
   540px (H1 de 4-5 línies) i la targeta en ~209px, molt per sota dels 340px
   que li demana .hero-side-card: entre 992 i 1199px cap de les dues peces
   tenia prou amplada. */
.page-template-home-page #hero-header .hero-side {
  margin-top: 64px;
}
@media screen and (min-width: 1200px) {
  .page-template-home-page #hero-header .hero-side {
    margin-top: 0;
  }
}

/* Entre 992 i 1199px la targeta s'apila SOTA el contingut i hi suma ~490px
   (imatge + títol + enllaç + els 64px de margin-top): amb prou alçada hi cap,
   però en una tablet apaïsada (1024x614 real d'un iPad) el hero passava a fer
   1195px i quedava 581px per sota del plegat - cap sostre en vh pot compensar
   mig hero de targeta apilada. Per sota de 820px d'alçada, doncs, la targeta
   s'amaga i el hero torna a cabre exactament amb el peek del disseny (mesurat:
   1024x614 -> hero 532px = 100vh - 82px). "!important" perquè el que s'anul·la
   és el ".d-lg-block" de Bootstrap, que ja el porta (veure home-page.php);
   >=1200px, on la targeta va al costat i no suma alçada, no es toca. */
@media screen and (min-width: 992px) and (max-width: 1199.98px) and (max-height: 820px) {
  .page-template-home-page #hero-header .hero-side {
    display: none !important;
  }
}

.page-template-home-page #hero-header .hero-side-label {
  display: block;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 16px;
}

.page-template-home-page #hero-header .hero-side-card {
  /* background-color: var(--color-dark); */
  overflow: hidden;
  max-width: 340px;
}

/* --- IMAGE ZOOM EFFECT --- */
.page-template-home-page #hero-header .hero-side-image {
  display: block;
  /* Mock: 335.853 x 206.292px (~1.628), no 4/3 (1.333) - la caixa és més
     panoràmica del que semblava a ull. */
  aspect-ratio: 335.853 / 206.292;
  overflow: hidden; /* Keeps the zoomed image inside the container */
  border-radius: 8px; /* Mock: 8px, no 12px */
}

.page-template-home-page #hero-header .hero-side-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease; /* Smooth transition */
  transform: scale(1); /* Default state */
}

.page-template-home-page #hero-header .hero-side-image:hover img {
  transform: scale(1.08); /* Zooms in by 8% on hover */
}

/* --- LINK ARROW DISPLACE EFFECT --- */
.page-template-home-page #hero-header .hero-side-link {
  display: block;
  color: #ffffff;
  font-weight: 500;
  font-size: 15px;
  padding: 20px 20px 20px;
  text-decoration: underline;
}
.arrow-icon {
  margin-left: 8px;
  display: inline-block;
  font-size: 1.6em; 
  transition: transform 0.3s ease; /* Movimiento suave */
}

/* El hover se activa al pasar el ratón por el enlace, y mueve el icono interno */
.hero-side-link:hover .arrow-icon {
  transform: translateX(4px);
}

.page-template-home-page #hero-header .hero-side-title {
  display: block;
  color: #ffffff;
  font-weight: 700;
  font-size: 18px;
  line-height: 140%;
  padding: 20px 20px 8px;
  text-decoration: none;
}



/* La vella regla ".page-template-home-page #presentation" al bundle legacy fa
   "margin-top: 100vh" pensant en el hero fixed que ja no existeix; aquí es
   neutralitza amb la mateixa especificitat perquè torni a l'espaiat normal. */
.page-template-home-page #presentation {
  margin-top: 0;
}
.page-template-home-page #presentation .card {
  margin-top: 0;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}