/* ==========================================================================
   Soy Almería — identités des pages piliers
   Chaque guide reçoit sa strate : matière, décors signature, accents.
   Chargé après guide.css, uniquement sur les pages guides.
   ========================================================================== */

:root {
  --olive: #5f682e;          /* vert RAF / salicorne, lisible sur chaux     */
  --sea-wash: #e7edf0;       /* lavis marin froid                           */
  --clay-wash: #f3ead7;      /* lavis terre cuite clair                     */
}

[class*='theme-'] .guide-hero {
  position: relative;
  overflow: clip;
}

[class*='theme-'] .guide-hero__grid {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   HISTORIA — pierre & mémoire
   ========================================================================== */

.theme-historia .guide-hero {
  background: var(--paper);
}

.theme-historia .guide-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.36 0 0 0 0 0.24 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Filigrane gravé : l'année fondatrice. */
.theme-historia .guide-hero::after {
  content: '955';
  position: absolute;
  right: 2%;
  bottom: -0.22em;
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(9rem, 20vw, 19rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgb(173 78 40 / 0.22);
  pointer-events: none;
}

.theme-historia .guide__body h2::after {
  box-shadow: 0 5px 0 0 var(--copper);
}

.theme-historia .guide__toc {
  background: var(--paper);
}

.theme-historia .guide__figure .photo {
  outline: 1px solid rgb(28 39 51 / 0.14);
  outline-offset: 4px;
}

/* ==========================================================================
   SABORES — terre cuite, olive & azulejo
   ========================================================================== */

.theme-sabores .guide-hero {
  background: linear-gradient(180deg, var(--clay-wash) 0%, var(--chalk) 100%);
}

/* Frise d'azulejos : treillis de losanges céramique. */
.theme-sabores .guide-hero::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 0.8rem;
  background-image:
    repeating-linear-gradient(45deg, rgb(20 58 92 / 0.38) 0 1.5px, transparent 1.5px 10px),
    repeating-linear-gradient(-45deg, rgb(20 58 92 / 0.38) 0 1.5px, transparent 1.5px 10px);
}

.theme-sabores .guide-hero::before {
  content: 'tapeo';
  position: absolute;
  right: 3%;
  bottom: -0.18em;
  z-index: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(7rem, 15vw, 14rem);
  font-weight: 600;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgb(95 104 46 / 0.28);
  pointer-events: none;
}

.theme-sabores .kicker,
.theme-sabores .guide__toc h2 {
  color: var(--olive);
}

.theme-sabores .display em {
  color: var(--olive);
}

.theme-sabores .guide__body h2::after {
  background: var(--olive);
}

.theme-sabores .guide__body > section:first-of-type > p:first-of-type::first-letter {
  color: var(--olive);
}

.theme-sabores .guide__toc {
  background: var(--clay-wash);
}

.theme-sabores .guide__toc ol {
  border-left-color: var(--olive);
}

.theme-sabores .guide__body ul:not([class]) li::marker {
  color: var(--olive);
}

/* Citation en fiche de recette. */
.theme-sabores .pull {
  background: var(--clay-wash);
  border: 1px dashed var(--copper);
  border-radius: var(--radius);
  padding: 1.5rem 1.8rem 1.5rem 3.6rem;
}

.theme-sabores .pull::before {
  left: 1rem;
  top: 0.55rem;
  color: var(--olive);
}

.theme-sabores .related {
  background: var(--clay-wash);
}

/* ==========================================================================
   CULTURA — nuit de cinéma & bois de guitare
   ========================================================================== */

.theme-cultura .guide-hero {
  background: var(--navy);
  padding-bottom: 2.5rem;
}

.theme-cultura .guide-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.93 0 0 0 0 0.88 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Pellicule filant sous le hero. */
.theme-cultura .guide-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.4rem;
  height: 2.6rem;
  background-color: var(--copper-soft);
  -webkit-mask: url('../vectors/decorative/film-strip-wave.svg') center / 100% 100% no-repeat;
  mask: url('../vectors/decorative/film-strip-wave.svg') center / 100% 100% no-repeat;
  opacity: 0.8;
}

.theme-cultura .guide-hero .display {
  color: var(--on-navy);
}

.theme-cultura .guide-hero .display em {
  color: var(--terra-light);
}

.theme-cultura .guide-hero .kicker {
  color: var(--terra-light);
}

.theme-cultura .guide-hero .lead {
  color: var(--on-navy-mute);
}

/* Soulignés en cordes de guitare : trois filets parallèles. */
.theme-cultura .guide__body h2::after {
  width: 6rem;
  height: 7px;
  margin-top: 0.8rem;
  background: repeating-linear-gradient(to bottom, var(--copper) 0 1px, transparent 1px 3px);
}

.theme-cultura .guide__toc {
  background: var(--navy);
  color: var(--on-navy-mute);
}

.theme-cultura .guide__toc h2 {
  color: var(--terra-light);
}

.theme-cultura .guide__toc a {
  color: var(--on-navy-mute);
}

.theme-cultura .guide__toc a:hover {
  color: var(--on-navy);
}

.theme-cultura .guide__toc ol {
  border-left-color: var(--copper-soft);
}

.theme-cultura .related {
  background: var(--navy);
}

.theme-cultura .related h2 {
  color: var(--on-navy);
}

.theme-cultura .related h2 em {
  color: var(--terra-light);
}

/* ==========================================================================
   FIESTAS — verbena, papel picado & liane
   ========================================================================== */

.theme-fiestas .guide-hero {
  background: var(--chalk);
}

/* Semis de confettis. */
.theme-fiestas .guide-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 2.5px at 12% 24%, rgb(173 78 40 / 0.4) 2.5px, transparent 3px),
    radial-gradient(circle 2px at 28% 68%, rgb(20 58 92 / 0.35) 2px, transparent 2.5px),
    radial-gradient(circle 3px at 46% 18%, rgb(189 138 82 / 0.45) 3px, transparent 3.5px),
    radial-gradient(circle 2px at 62% 76%, rgb(173 78 40 / 0.32) 2px, transparent 2.5px),
    radial-gradient(circle 2.5px at 78% 32%, rgb(20 58 92 / 0.3) 2.5px, transparent 3px),
    radial-gradient(circle 2px at 90% 62%, rgb(189 138 82 / 0.4) 2px, transparent 2.5px),
    radial-gradient(circle 2px at 8% 82%, rgb(189 138 82 / 0.35) 2px, transparent 2.5px),
    radial-gradient(circle 2.5px at 55% 50%, rgb(173 78 40 / 0.22) 2.5px, transparent 3px);
  background-size: 340px 260px;
  pointer-events: none;
}

/* Filets tricolores de verbena. */
.theme-fiestas .guide__body h2::after {
  width: 3.6rem;
  background: linear-gradient(90deg, var(--terra) 0 33%, var(--copper) 33% 66%, var(--navy) 66%);
}

/* La liane grimpe le long du sommaire, la lanterne l'éclaire. */
.theme-fiestas .guide__toc {
  position: relative;
  margin-left: 1.6rem;
}

.theme-fiestas .guide__toc::before {
  content: '';
  position: absolute;
  inset-block: -0.5rem;
  left: -1.9rem;
  width: 2.3rem;
  background-color: var(--copper);
  -webkit-mask: url('../vectors/decorative/botanical-timeline.svg') top center / 100% auto repeat-y;
  mask: url('../vectors/decorative/botanical-timeline.svg') top center / 100% auto repeat-y;
}

.theme-fiestas .guide__toc::after {
  content: '';
  position: absolute;
  top: -1.1rem;
  right: 1rem;
  width: 1.6rem;
  aspect-ratio: 1;
  background-color: var(--terra-bright);
  -webkit-mask: url('../vectors/icons/lantern.svg') center / 100% 100% no-repeat;
  mask: url('../vectors/icons/lantern.svg') center / 100% 100% no-repeat;
}

.theme-fiestas .pull::before {
  color: var(--terra-bright);
}

.theme-fiestas .related {
  background: var(--clay-wash);
}

/* ==========================================================================
   MAR — sel, marée & volcan
   ========================================================================== */

.theme-mar .guide-hero {
  background: linear-gradient(180deg, var(--chalk) 0%, var(--sea-wash) 100%);
}

.theme-mar .guide-hero::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2.4rem;
  background-color: var(--chalk);
  -webkit-mask: url('../vectors/decorative/wave-crest.svg') center / 100% 100% no-repeat;
  mask: url('../vectors/decorative/wave-crest.svg') center / 100% 100% no-repeat;
  transform: scaleY(-1);
}

.theme-mar .kicker,
.theme-mar .guide__toc h2 {
  color: var(--navy);
}

.theme-mar .display em {
  color: var(--navy);
}

.theme-mar .guide__body h2::after {
  width: 6rem;
  height: 0.55rem;
  margin-top: 0.7rem;
  background-color: var(--navy);
  -webkit-mask: url('../vectors/decorative/topographic-single.svg') left center / 260% 100% no-repeat;
  mask: url('../vectors/decorative/topographic-single.svg') left center / 260% 100% no-repeat;
}

.theme-mar .guide__body > section:first-of-type > p:first-of-type::first-letter {
  color: var(--navy);
}

.theme-mar .guide__toc {
  background: var(--sea-wash);
}

.theme-mar .guide__toc ol {
  border-left-color: var(--navy);
}

.theme-mar .note {
  background: var(--sea-wash);
  border-left-color: var(--navy);
}

.theme-mar .pull::before {
  color: var(--navy);
}

.theme-mar .guide__body ul:not([class]) li::marker {
  color: var(--navy);
}

.theme-mar .related {
  background: var(--sea-wash);
}

/* ==========================================================================
   VIAJE — carte, boussole & sentiers
   ========================================================================== */

.theme-viaje .guide-hero {
  background: var(--chalk-cool);
}

/* Courbes de niveau répétées sur toute la carte. */
.theme-viaje .guide-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--copper);
  -webkit-mask: url('../vectors/decorative/topographic-wave.svg') 0 0 / 130% auto repeat;
  mask: url('../vectors/decorative/topographic-wave.svg') 0 0 / 130% auto repeat;
  opacity: 0.16;
  pointer-events: none;
}

/* Rose des vents. */
.theme-viaje .guide-hero::after {
  content: '';
  position: absolute;
  top: 1.6rem;
  right: max(var(--shell-pad), calc((100vw - var(--shell)) / 2));
  width: 3.4rem;
  aspect-ratio: 1;
  background-color: var(--copper-ink);
  -webkit-mask: url('../vectors/icons/compass.svg') center / 100% 100% no-repeat;
  mask: url('../vectors/icons/compass.svg') center / 100% 100% no-repeat;
  opacity: 0.85;
}

/* Jalons numérotés comme des balises d'étape. */
.theme-viaje .guide__body {
  counter-reset: waypoint;
}

.theme-viaje .guide__body > section > h2::before {
  counter-increment: waypoint;
  content: counter(waypoint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  aspect-ratio: 1;
  margin-right: 0.5em;
  font-family: var(--font-body);
  font-size: 0.55em;
  font-weight: 700;
  color: var(--terra);
  border: 2px solid var(--terra);
  border-radius: 50%;
  vertical-align: 0.25em;
}

/* Pointillés de sentier. */
.theme-viaje .guide__body h2::after {
  width: 4.5rem;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--terra) 0 7px, transparent 7px 14px);
}

.theme-viaje .guide__toc {
  background: var(--chalk-cool);
  border: 1px dashed var(--copper);
}

.theme-viaje .guide__toc h2 {
  color: var(--copper-ink);
}

.theme-viaje .related {
  background: var(--chalk-cool);
}