/*
 * Hero Parallax — 3 capes amb parallax via JS (hero.js).
 *
 * Estructura:
 *   .hero-container (relative, overflow-hidden, height variable)
 *     img.hero-layer-bg (absolute z-0, parallax fort)
 *     .hero-layer-text (relative z-10, parallax mitjà)
 *     img.hero-layer-fg (absolute z-20, parallax suau)
 *     .hero-social-float (terres, absolute z-30 lateral)
 */

.hero-container {
  background-color: #1a202c;
  z-index: 0;
  min-height: 480px; /* no col·lapsa en viewports curts (mobile landscape) */
}

/*
 * Alçada "responsive": creix amb el viewport però limitada per evitar que
 * un hero ocupi 100vh en mobile portrait (massa) o 100vh en mobile landscape
 * (tapa tota la pantalla). Usa svh (small viewport height) quan està
 * disponible perquè en iOS Safari evita el salt amb la barra d'adreces.
 */
.hero-h-responsive {
  height: 70vh;
  height: 70svh;
}
@media (min-width: 768px) {
  .hero-h-responsive {
    height: 85vh;
    height: 85svh;
  }
}
@media (min-width: 1024px) {
  .hero-h-responsive {
    height: 100vh;
    height: 100svh;
  }
}

.hero-layer-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  will-change: transform;
  pointer-events: none;
}

/*
 * Capa text: z-index 30 (per damunt del fg z-20). Amb text centrat per defecte,
 * la silueta del primer pla podria tapar el títol; mantenir el text DAMUNT
 * garanteix que sigui sempre visible.
 */
.hero-layer-text {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  padding-top: max(5vh, var(--site-header-height, 4rem));
}

/*
 * Inner: el bloc del text en sí. Per defecte centrat absolutament.
 * Els presets el reposicionen.
 */
.hero-text-inner {
  position: absolute;
  pointer-events: auto;
  max-width: min(90%, 64rem);
  padding: 0 1rem;
  text-align: center;
  /* Centrat absolut per defecte */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

/*
 * Mobile (< 640px): TOTS els presets cauen a centre per evitar que el text
 * surti del viewport o se solapi amb el foreground en pantalles petites.
 */
@media (max-width: 639px) {
  .hero-text-inner {
    top: 50% !important;
    right: auto !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
  }
}

/*
 * Presets de posicionament (>= sm). Còpia exacta del mockup Costa.
 */
@media (min-width: 640px) {
  /* SALOU — top 40% right 25%, text-align: right (mockup pos-salou) */
  .hero-preset-salou .hero-text-inner {
    top: 40%;
    right: 25%;
    left: auto;
    transform: translateY(-50%);
    text-align: right;
  }
  /* TAMARIT — top 35-40%, centrat horizontal, text-center (mockup pos-tamarit) */
  .hero-preset-tamarit .hero-text-inner {
    top: 38%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  /* CENTER — centrat absolut (Terres default) */
  .hero-preset-center .hero-text-inner {
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  /* TOP — a dalt centrat */
  .hero-preset-top .hero-text-inner {
    top: 18%;
    left: 50%;
    right: auto;
    transform: translate(-50%, 0);
    text-align: center;
  }
  /* BOTTOM — a baix centrat */
  .hero-preset-bottom .hero-text-inner {
    bottom: 12%;
    left: 50%;
    top: auto;
    right: auto;
    transform: translate(-50%, 0);
    text-align: center;
  }
}

.hero-layer-fg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom; /* ancora la silueta al fons en qualsevol viewport */
  z-index: 20;
  will-change: transform;
  pointer-events: none;
}

.text-shadow-hero,
.hero-title,
.hero-subtitle {
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/*
 * Animació flotant del títol (skin costa).
 * Aplicada via classe condicional al .hero-text-inner.
 */
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(15px); }
}

.hero-text-float {
  animation: hero-float 6s ease-in-out infinite;
}

/* Respecte preferences usuari per a evitar moviment */
@media (prefers-reduced-motion: reduce) {
  .hero-text-float {
    animation: none;
  }
  .hero-layer-bg,
  .hero-layer-text,
  .hero-layer-fg {
    transform: none !important;
  }
}

/*
 * Tamanys de tipografia fluids amb clamp(min, vw, max):
 *  - mòbil petit (~360px): mínim llegible
 *  - desktop ample (~1400px): màxim del mockup
 *  - entremig: escala suau, sense salts per breakpoints
 */

/* Skin Costa (default + body.theme-costa) */
.hero-costa .hero-title,
body.theme-costa .hero-container:not(.hero-terres) .hero-title {
  font-size: clamp(2.25rem, 6vw, 4.5rem); /* 36px → 72px */
  letter-spacing: -0.025em;
  line-height: 1;
}

.hero-costa .hero-subtitle,
body.theme-costa .hero-container:not(.hero-terres) .hero-subtitle {
  font-family: var(--font-hand, "Kalam", cursive);
  font-style: italic;
  letter-spacing: 0.02em;
  font-size: clamp(1.125rem, 2.5vw, 1.875rem); /* 18px → 30px */
  margin-top: 0.5rem;
  color: rgb(var(--brand-secondary, 255 215 0));
}
@media (min-width: 640px) {
  .hero-costa .hero-subtitle,
  body.theme-costa .hero-container:not(.hero-terres) .hero-subtitle {
    color: #fff;
  }
}

/*
 * Social float lateral (mockup Terres): columna vertical a la dreta del hero,
 * botons circulars amb fons translúcid i blur. Ocult en mòbil per evitar
 * tapar el contingut.
 */
.hero-social-float {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 30;
}
@media (min-width: 768px) {
  .hero-social-float {
    display: flex;
  }
}
.hero-social-float > a {
  background: rgba(255, 255, 255, 0.2) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease;
}
.hero-social-float > a:hover {
  background: #fff !important;
  color: #282828 !important;
  transform: scale(1.1);
}

/* Skin Terres (.hero-terres + body.theme-terres) */
.hero-terres .hero-title,
body.theme-terres .hero-container:not(.hero-costa) .hero-title {
  font-size: clamp(2.5rem, 8vw, 6rem); /* 40px → 96px */
  letter-spacing: 0.02em;
  line-height: 1;
}