/* Señal Memoria — Podcast page (Nuestras Huellas Sonoras)
   Hero con cover + episodio destacado + grid 20 cards con audio inline.
*/

/* ============ BREADCRUMB ============ */
.sm-breadcrumb {
  padding: 1.25rem 0;
  background: var(--sm-paper-050);
  border-bottom: 1px solid var(--sm-border);
  font-family: var(--sm-font-mono);
  font-size: var(--sm-fs-tag);
  letter-spacing: var(--sm-tracking-wider);
  text-transform: uppercase;
}
.sm-breadcrumb ol {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
}
.sm-breadcrumb li + li::before {
  content: '/'; margin-right: .5rem; color: var(--sm-ink-300);
}
.sm-breadcrumb a { color: var(--sm-ink-500); }
.sm-breadcrumb a:hover { color: var(--sm-purple-700); }
.sm-breadcrumb [aria-current="page"] { color: var(--sm-ink-950); font-weight: 600; }

/* ============ HERO PODCAST (gradient morado tema podcast) ============ */
.sm-pod-hero {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: linear-gradient(135deg, var(--sm-purple-900) 0%, var(--sm-purple-700) 60%, var(--sm-ink-950) 100%);
  color: #fff;
  position: relative; overflow: hidden;
}
.sm-pod-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(at 90% 10%, rgba(249,176,45,0.18) 0px, transparent 50%),
              radial-gradient(at 10% 80%, rgba(46,118,50,0.15) 0px, transparent 50%);
  z-index: 0;
}
.sm-pod-hero > .container { position: relative; z-index: 1; }
.sm-pod-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 991px) { .sm-pod-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.sm-pod-hero-cover {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--bs-border-radius-xl);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.sm-pod-hero-cover img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.sm-pod-hero-cover-glow {
  position: absolute; inset: -20%;
  background: radial-gradient(circle at center, rgba(249,176,45,0.4) 0%, transparent 60%);
  z-index: -1;
  filter: blur(40px);
  animation: sm-cover-pulse 4s ease-in-out infinite alternate;
}
@keyframes sm-cover-pulse {
  from { opacity: .6; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1.05); }
}

.sm-pod-hero-info .sm-eyebrow { color: var(--sm-amber-500); }
.sm-pod-hero-title {
  font-size: var(--sm-fs-display-1);
  font-weight: 900;
  line-height: var(--sm-leading-display);
  letter-spacing: var(--sm-tracking-tighter);
  color: #fff;
  margin: 1rem 0 1.5rem;
  max-width: 14ch;
}
.sm-pod-hero-title .sm-display-italic { color: var(--sm-amber-500); }
.sm-pod-hero-info .sm-lead { color: rgba(255,255,255,.85); max-width: 60ch; }

.sm-pod-meta {
  display: flex; flex-wrap: wrap; gap: 2.5rem;
  margin: 2.5rem 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.2);
}
.sm-pod-meta-num {
  font-family: var(--sm-font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 900; color: var(--sm-amber-500);
  display: block; line-height: 1;
  letter-spacing: var(--sm-tracking-tighter);
}
.sm-pod-meta-label {
  font-family: var(--sm-font-mono); font-size: var(--sm-fs-tag);
  text-transform: uppercase; letter-spacing: var(--sm-tracking-wider);
  color: rgba(255,255,255,.7);
  margin-top: .5rem; display: block;
}

.sm-pod-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.sm-pod-cta-play {
  display: inline-flex; align-items: center; gap: .75rem;
  background: var(--sm-amber-500); color: var(--sm-ink-950);
  padding: 1rem 1.75rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  transition: all var(--sm-dur-base) var(--sm-ease-out);
}
.sm-pod-cta-play:hover {
  background: #fff; color: var(--sm-ink-950);
  transform: translateY(-2px); gap: 1.25rem;
}
.sm-pod-cta-play i { font-size: 1.5rem; }
.sm-pod-cta-sec {
  display: inline-flex; align-items: center; gap: .65rem;
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  padding: .9rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: all var(--sm-dur-base) var(--sm-ease-out);
}
.sm-pod-cta-sec:hover { background: rgba(255,255,255,.2); color: #fff; }

/* ============ EPISODIO DESTACADO ============ */
.sm-pod-feature { background: var(--sm-paper-050); }
.sm-pod-feature-card {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0;
  background: #fff;
  border-radius: var(--bs-border-radius-xl);
  overflow: hidden;
  box-shadow: var(--sm-shadow-lg);
  border: 1px solid var(--sm-border);
}
@media (max-width: 767px) { .sm-pod-feature-card { grid-template-columns: 1fr; } }
.sm-pod-feature-img {
  background: var(--sm-ink-950);
  position: relative;
  min-height: 320px;
  overflow: hidden;
}
.sm-pod-feature-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 6s ease;
}
.sm-pod-feature-card:hover .sm-pod-feature-img img { transform: scale(1.03); }
.sm-pod-feature-body {
  padding: clamp(2rem, 4vw, 3rem);
  display: flex; flex-direction: column; gap: 1rem;
}
.sm-pod-num-badge {
  display: inline-block;
  background: var(--sm-purple-700); color: #fff;
  padding: .35rem .85rem;
  border-radius: 6px;
  font-family: var(--sm-font-mono);
  font-size: var(--sm-fs-tag);
  letter-spacing: var(--sm-tracking-wider);
  font-weight: 700;
  align-self: flex-start;
}
.sm-pod-date {
  font-family: var(--sm-font-mono); font-size: var(--sm-fs-tag);
  text-transform: uppercase; letter-spacing: var(--sm-tracking-wider);
  color: var(--sm-ink-500);
}
.sm-pod-feature-body h3 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 900;
  letter-spacing: var(--sm-tracking-tighter);
  line-height: var(--sm-leading-display);
  margin: 0;
}
.sm-pod-feature-body p {
  color: var(--sm-ink-700);
  font-size: 1rem; margin: 0;
}
.sm-pod-feature-body .sm-pod-audio {
  width: 100%;
  margin-top: .5rem;
}
.sm-pod-share {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sm-border);
}
.sm-pod-share-label {
  font-family: var(--sm-font-mono); font-size: var(--sm-fs-tag);
  text-transform: uppercase; letter-spacing: var(--sm-tracking-wider);
  color: var(--sm-ink-500);
}
.sm-pod-share a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sm-ink-100);
  color: var(--sm-ink-950);
  transition: all var(--sm-dur-base) var(--sm-ease-out);
}
.sm-pod-share a:hover {
  background: var(--sm-purple-700); color: #fff;
  transform: translateY(-2px);
}

/* ============ GRID 20 EPISODIOS ============ */
.sm-pod-episodios { background: #fff; }
.sm-pod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 991px) { .sm-pod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .sm-pod-grid { grid-template-columns: 1fr; } }

.sm-pod-card {
  background: #fff;
  border: 1px solid var(--sm-border);
  border-radius: var(--bs-border-radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--sm-dur-base) var(--sm-ease-out),
              box-shadow var(--sm-dur-base) var(--sm-ease-out),
              border-color var(--sm-dur-base) var(--sm-ease-out);
}
.sm-pod-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sm-shadow-md);
  border-color: var(--sm-purple-700);
}
.sm-pod-card-img {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--sm-ink-950);
}
.sm-pod-card-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 6s ease;
}
.sm-pod-card:hover .sm-pod-card-img img { transform: scale(1.06); }
.sm-pod-ep {
  position: absolute;
  top: 1rem; left: 1rem;
  background: rgba(9,9,11,.7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--sm-amber-500);
  padding: .35rem .75rem;
  border-radius: 6px;
  font-family: var(--sm-font-mono);
  font-size: var(--sm-fs-tag);
  letter-spacing: var(--sm-tracking-wider);
  font-weight: 700;
}
.sm-pod-card-body {
  padding: 1.25rem;
  display: flex; flex-direction: column; gap: .75rem;
  flex: 1;
}
.sm-pod-card-body time {
  font-family: var(--sm-font-mono); font-size: var(--sm-fs-tag);
  color: var(--sm-ink-500);
  letter-spacing: var(--sm-tracking-wider);
  text-transform: uppercase;
}
.sm-pod-card-body h3 {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  letter-spacing: var(--sm-tracking-tight);
  flex: 1;
}
.sm-pod-card-body audio {
  width: 100%;
  height: 40px;
  margin-top: auto;
}

/* Audio control styling consistent across browsers */
audio::-webkit-media-controls-panel {
  background-color: var(--sm-ink-100);
}

/* ============ SOBRE ============ */
.sm-pod-sobre { background: var(--sm-green-050); }
.sm-pod-sobre-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
}
@media (max-width: 767px) { .sm-pod-sobre-grid { grid-template-columns: 1fr; gap: 1.5rem; } }
.sm-pod-sobre-grid p { max-width: none; }
.sm-pod-sobre .sm-drop-cap::first-letter { color: var(--sm-purple-700); }

/* ============ PLATAFORMAS ============ */
.sm-pod-platforms { background: var(--sm-ink-950); color: #fff; }
.sm-pod-platforms h2 { color: #fff; }
.sm-pod-platforms h2 em { color: var(--sm-amber-500); }
.sm-pod-platforms .sm-section-num { color: var(--sm-amber-500); }
.sm-pod-platforms .sm-section-head { border-bottom-color: rgba(255,255,255,.2); }
.sm-plat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
@media (max-width: 991px) { .sm-plat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .sm-plat-grid { grid-template-columns: 1fr; } }
.sm-plat-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.15);
  padding: 2rem;
  border-radius: var(--bs-border-radius-lg);
  color: #fff;
  text-decoration: none;
  transition: all var(--sm-dur-base) var(--sm-ease-out);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sm-plat-card:hover {
  background: rgba(255,255,255,.1);
  border-color: var(--sm-amber-500);
  transform: translateY(-4px);
  color: #fff;
}
.sm-plat-card > i:first-child {
  font-size: 2.5rem;
  color: var(--sm-amber-500);
}
.sm-plat-name {
  font-family: var(--sm-font-display);
  font-size: 1.25rem; font-weight: 700;
  letter-spacing: var(--sm-tracking-tight);
}
.sm-plat-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--sm-font-mono); font-size: var(--sm-fs-tag);
  text-transform: uppercase; letter-spacing: var(--sm-tracking-wider);
  color: var(--sm-amber-500);
  font-weight: 600;
  margin-top: auto;
}

/* ============ AJUSTES OBSERVACIONES (hero reducido, imágenes/plataformas más pequeñas) ============ */
.sm-pod-hero--sm { padding: clamp(2rem, 3.5vw, 3rem) 0; }
.sm-pod-hero--sm .sm-pod-hero-grid { gap: 2.5rem; }
.sm-pod-hero--sm .sm-pod-hero-cover { max-width: 300px; margin-inline: 0; }
.sm-pod-hero--sm .sm-pod-hero-title { font-size: var(--sm-fs-display-2); margin: .75rem 0 1rem; }

/* Episodios: cards más anchas para que el reproductor quepa completo */
.sm-pod-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Plataformas: tamaño más pequeño */
.sm-plat-card { padding: 1.25rem; gap: .6rem; }
.sm-plat-card > i:first-child { font-size: 1.9rem; }

/* ============ Slider "Otros episodios" (display podcast_episodios) ============ */
.sm-pod-slider { position: relative; }
.sm-pod-track {
  display: flex;
  gap: var(--sm-sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: .25rem .25rem 1rem;
  margin: 0 -.25rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.sm-pod-track::-webkit-scrollbar { display: none; }
/* 4 cards visibles en desktop; el resto se alcanza con las flechas. */
.sm-pod-track .sm-pod-card {
  flex: 0 0 calc((100% - 3 * var(--sm-sp-4)) / 4);
  min-width: 0;
  scroll-snap-align: start;
}
@media (max-width: 991px) {
  .sm-pod-track .sm-pod-card { flex-basis: calc((100% - var(--sm-sp-4)) / 2); }
}
@media (max-width: 575px) {
  .sm-pod-track .sm-pod-card { flex-basis: 82%; }
}
.sm-pod-snav {
  position: absolute;
  top: calc((100% - 2.5rem) * 0.34);
  transform: translateY(-50%);
  z-index: 3;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--sm-border);
  border-radius: 50%;
  background: var(--sm-paper-000);
  color: var(--sm-ink-900);
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: var(--sm-shadow-sm);
  transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.sm-pod-snav--prev { left: -10px; }
.sm-pod-snav--next { right: -10px; }
.sm-pod-snav:hover {
  background: var(--sm-green-700);
  border-color: var(--sm-green-700);
  color: var(--sm-paper-000);
}
.sm-pod-snav[disabled] { opacity: 0; pointer-events: none; }
.sm-pod-snav:focus-visible { outline: var(--sm-focus-ring); outline-offset: var(--sm-focus-offset); }
@media (max-width: 575px) {
  .sm-pod-snav--prev { left: 2px; }
  .sm-pod-snav--next { right: 2px; }
}

/* ============ FASE 4 — episodios dinámicos (vista podcast) ============ */
.sm-pod-card-img { position: relative; overflow: hidden; }
/* Oculta el label "Imagen" del field formatter por defecto. */
.sm-pod-card-img .field__label { display: none; }
.sm-pod-card-img > .field, .sm-pod-card-img > .field .field__item { position: absolute; inset: 0; width: 100%; height: 100%; }
.sm-pod-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sm-pod-card-body audio { width: 100%; margin-top: .5rem; }
.sm-pod-episodios .views-exposed-form, .sm-pod-episodios .view-header, .sm-pod-episodios nav.pager, .sm-pod-episodios .pager { display: none !important; }
.sm-pod-episodios .view .sm-pod-grid { margin: 0; }

/* ============ Reproductor de audio nativo (HTML5) ============ */
/* Se usa el formatter core file_audio (<audio controls>) por accesibilidad
   (teclado + lector). Reemplaza a SoundManager2, que generaba errores WCAG. */
.sm-pod-card-body .field--name-field-audio .field__label { display: none; }
.sm-pod-card-body audio { display: block; }