/* ---------- yoga-template.css (VERSIÓN CORRECTIVA - podcast overlay forzado) ----------
   Ruta: wp-content/themes/tu-tema-hijo/assets/css/yoga-template.css
   Reemplaza por completo el archivo anterior por este.
   -------------------------------------------------------------------------- */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,700&family=Poppins:wght@300;400;600&display=swap');

:root{
  --max-width:1200px;
  --gutter:24px;
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Poppins', sans-serif;
  --overlay-dark: rgba(0,0,0,0.46);
  --overlay-podcast: rgba(0,0,0,0.36);
  --card-bg: rgba(255,255,255,0.90);
  --card-shadow: 0 8px 28px rgba(0,0,0,0.14);
  --radius-lg: 22px;
  --transition: 180ms ease;
  --service-bg: #F5F0EA;
  --chip: #CEC7BE;
}

/* Basic reset and base */
.yoga-home-template, .yoga-home-template * { box-sizing:border-box; -webkit-font-smoothing:antialiased; }
.yoga-home-template { font-family:var(--font-body); color:#222; line-height:1.45; }
.yoga-home-template img { display:block; max-width:100%; height:auto; }
.container { max-width:var(--max-width); margin:0 auto; padding:0 var(--gutter); }

/* -------------------------------
   HERO (kept)
   ------------------------------- */
.yoga-hero { position:relative !important; overflow:hidden !important; }
.hero-swiper { height:80vh; min-height:420px; width:100%; position:relative; }
.hero-swiper .swiper-slide { background-position:center !important; background-size:cover !important; }
.yoga-hero::after { content:""; position:absolute; inset:0; z-index:120 !important; background: linear-gradient(180deg, rgba(0,0,0,0.24), rgba(0,0,0,0.14)); pointer-events:none; }
.yoga-hero .hero-caption { position:relative; z-index:130 !important; }

/* hero pagination small centered */
body .yoga-home-template .hero-swiper .swiper-pagination { bottom:18px !important; z-index:140 !important; }

/* -------------------------------
   SERVICES / CARDS
   ------------------------------- */
.yoga-services { background:var(--service-bg); padding:60px 0; }
.services-swiper { padding:12px 0 36px; width:100%; position:relative; }
.service-card {
  display:flex; flex-direction:column; width:320px; background:#fff; border-radius:10px; overflow:hidden;
  text-decoration:none; color:inherit; box-shadow: 0 6px 18px rgba(0,0,0,0.08); transition: transform var(--transition), box-shadow var(--transition);
  min-height:480px;
}
.service-card:hover { transform: translateY(-6px); box-shadow: 0 10px 28px rgba(0,0,0,0.12); }
.service-card__media { width:100%; height:320px; overflow:hidden; background:#eaeaea; display:block; }
.service-card__media img { width:100%; height:100%; object-fit:cover; display:block; }
.service-card__body { padding:18px; text-align:center; display:flex; flex-direction:column; justify-content:flex-start; gap:8px; flex:1; }
.service-card__title { display:inline-block; background:var(--chip); padding:8px 18px; border-radius:999px; font-weight:700; font-size:15px; color:#1e1e1e; margin: 0 auto 6px; }
.service-card__desc { font-size:14px; color:var(--text-dark); line-height:1.6; margin-top:6px; }

/* default services pagination position */
body .yoga-home-template .services-swiper .swiper-pagination { bottom: 10px !important; z-index:130 !important; }

/* -------------------------------
   EVENTS (kept)
   ------------------------------- */
.yoga-events { position:relative !important; overflow:hidden !important; padding:92px 0; color:#fff; background-position:center; background-size:cover; }
.yoga-events::before { content:""; position:absolute; inset:0; z-index:100 !important; background: var(--overlay-dark); pointer-events:none; }
.yoga-events .events-inner { position:relative; z-index:110 !important; max-width:var(--max-width); margin:0 auto; padding:0 var(--gutter); }

.yoga-events .events-title { font-family:var(--font-heading); font-weight:700; font-size:56px; margin:0 0 18px; color:#ffffff !important; text-shadow:0 6px 14px rgba(0,0,0,0.22); line-height:0.98; }
.yoga-events .events-title em { font-style:italic; }
.yoga-events .events-title-underline { width:80px; height:4px; background:rgba(255,255,255,0.9); border-radius:3px; margin:18px 0 26px; }

/* grid columns */
.events-grid { display:flex; gap:48px; align-items:flex-start; justify-content:space-between; }
.events-col { flex:1; min-width:260px; }

/* year grid forcing vertical stack */
.events-year-block { display: grid !important; grid-template-columns: 72px 1fr; grid-auto-rows: min-content; gap: 18px; align-items:start; width:100%; }
.events-year-label {
  grid-column: 1 / 2 !important;
  grid-row: 1 / -1 !important;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-heading);
  font-weight:800;
  font-size:28px;
  color:#fff;
  letter-spacing:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:120px;
}
.events-list { grid-column: 2 / 3 !important; display:flex; flex-direction:column; gap:18px; }
.event-card {
  background: var(--card-bg) !important;
  border-radius: var(--radius-lg) !important;
  padding:16px 18px !important;
  box-shadow: var(--card-shadow) !important;
  color:#111 !important;
  transition: transform var(--transition), box-shadow var(--transition);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.event-card__meta { font-family:var(--font-body); font-size:14px; color:#6c6c6c; font-weight:600; margin-bottom:8px; }
.event-card__title { font-family: var(--font-heading); font-size:20px; font-weight:800; color:#111; margin-bottom:6px; line-height:1.06; }
.event-card__place { font-family:var(--font-body); font-size:15px; color:#333; }
.event-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(0,0,0,0.20); }

/* -------------------------------
   PODCAST - FIX for overlay and icon backgrounds (FORCED)
   ------------------------------- */

/*
  Important: This CSS forces the overlay and the icon backgrounds for the podcast
  section. It uses high specificity and !important to override theme rules.
  The template should set the background image *on the section* using inline style:
    <section class="yoga-podcast" style="background-image:url('...')">
  This CSS will then:
    - ensure the overlay covers entire section
    - ensure podcast content sits above overlay
    - remove icon backgrounds (force transparency)
*/

body .yoga-home-template .yoga-podcast {
  position: relative !important;
  overflow: hidden !important;
  padding: 100px 0 !important;
  color: #fff !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  z-index: 80 !important;
}

/* overlay layer: always above background image */
body .yoga-home-template .yoga-podcast::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 85 !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.36) 0%, rgba(0,0,0,0.24) 30%, rgba(0,0,0,0.12) 100%) !important;
  pointer-events: none !important;
  mix-blend-mode: normal !important;
}

/* ensure background image itself is fully visible behind overlay */
body .yoga-home-template .yoga-podcast {
  /* if theme had applied some filter or opacity to background, remove it */
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
}

/* content containers above overlay */
body .yoga-home-template .yoga-podcast .podcast-overlay { position: relative !important; z-index: 90 !important; padding: 36px 0 !important; }
body .yoga-home-template .yoga-podcast .podcast-inner { position: relative !important; z-index: 95 !important; text-align:center !important; color:#fff !important; max-width:var(--max-width); margin:0 auto; padding:0 var(--gutter); }

/* title image and text */
body .yoga-home-template .podcast-title-img { margin: 0 auto 12px !important; display:block !important; width:100% !important; max-width:520px !important; }
body .yoga-home-template .podcast-title-img img { width:100% !important; display:block !important; height:auto !important; object-fit:contain !important; }
body .yoga-home-template .podcast-text { color:#fff !important; max-width:780px !important; margin: 0 auto 24px !important; font-size:18px !important; line-height:1.6 !important; }

/* ICONS: remove any background and shadows coming from the theme */
body .yoga-home-template .podcast-icons { display:flex !important; gap:18px !important; justify-content:center !important; align-items:center !important; flex-wrap:wrap !important; margin-top:6px !important; z-index:96 !important; position:relative !important; }
body .yoga-home-template .podcast-icon {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important; /* no extra padding */
  border-radius:0 !important; /* no chip */
  background: transparent !important; /* force transparent */
  box-shadow: none !important;
  transition: transform var(--transition) !important, opacity var(--transition) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* icon images: display as-is, add subtle drop-shadow for legibility */
body .yoga-home-template .podcast-icon img {
  width:120px !important;
  height:auto !important;
  display:block !important;
  object-fit:contain !important;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.12)) !important; /* sutle shadow for legibility */
}

/* hover: slight lift */
body .yoga-home-template .podcast-icon:hover { transform: translateY(-6px) scale(1.03) !important; opacity:0.98 !important; }

/* ALTERNATIVE: If you want a subtle chip for icons, uncomment and use this (comment above rules) */
/*
body .yoga-home-template .podcast-icon {
  padding:8px !important;
  border-radius:12px !important;
  background: rgba(255,255,255,0.85) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
}
body .yoga-home-template .podcast-icon img { width:110px !important; }
*/

/* -------------------------------
   FULL IMAGE (kept)
   ------------------------------- */
.yoga-fullimage { width:100% !important; display:block !important; margin:0; padding:0; }
.yoga-fullimage picture, .yoga-fullimage img { display:block; width:100%; height:auto; object-fit:cover; }

/* -------------------------------
   RESPONSIVE
   ------------------------------- */
@media (max-width: 1200px) {
  .events-grid { gap:32px; }
  .events-title { font-size:48px; }
  .events-year-label { font-size:24px; min-height:100px; }
  .event-card__title { font-size:18px; }
  body .yoga-home-template .podcast-title-img { max-width:420px !important; }
  body .yoga-home-template .podcast-text { font-size:16px !important; }
  body .yoga-home-template .podcast-icon img { width:100px !important; }
}
@media (max-width: 980px) {
  .events-grid { gap:28px; }
  .events-year-block { grid-template-columns: 1fr; }
  .events-year-label {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    writing-mode: horizontal-tb;
    transform: none;
    align-self:flex-start;
    letter-spacing:0;
    font-size:22px;
    margin-bottom:8px;
  }
  .events-list { gap:16px; }
  body .yoga-home-template .podcast-icon img { width:96px !important; }
}
@media (max-width: 480px) {
  .events-grid { flex-direction:column; gap:28px; }
  .events-col { width:100%; min-width:0; }
  .events-year-block { display:grid !important; grid-template-columns: 48px 1fr; gap:14px; }
  .events-year-label {
    grid-column: 1 / 2 !important;
    grid-row: 1 / -1 !important;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size:20px; min-height:auto; align-self:flex-start; margin-left:6px;
  }
  .events-year-block > .events-list { grid-column: 2 / 3 !important; }
  .event-card { padding:14px 16px; border-radius:18px; }
  .events-title { font-size:36px; }
  .event-card__title { font-size:16px; }
  .event-card__meta { font-size:13px; }

  /* Podcast mobile */
  body .yoga-home-template .podcast-title-img { max-width:320px !important; }
  body .yoga-home-template .podcast-text { font-size:15px !important; padding:0 8px !important; }
  body .yoga-home-template .podcast-icon img { width:84px !important; }
}

/* Accessibility focus */
.event-card:focus-within, .event-card:focus { outline: 3px solid rgba(0,0,0,0.08); outline-offset:4px; }

/* -------------------------------
   Swiper arrows & bullets (kept)
   ------------------------------- */
body .yoga-home-template .swiper-button-prev,
body .yoga-home-template .swiper-button-next {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border: none !important;
  opacity: 0.98 !important;
  transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
  z-index: 200 !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
}
body .yoga-home-template .swiper-button-prev::after,
body .yoga-home-template .swiper-button-next::after {
  font-size: 18px !important;
  color: #fff !important;
  opacity: 1 !important;
  text-shadow: 0 4px 12px rgba(0,0,0,0.28);
}
body .yoga-home-template .swiper-button-prev svg,
body .yoga-home-template .swiper-button-next svg,
body .yoga-home-template .swiper-button-prev path,
body .yoga-home-template .swiper-button-next path {
  fill: #fff !important;
  stroke: none !important;
}
body .yoga-home-template .swiper-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
  margin: 0 6px !important;
  background: rgba(255,255,255,0.95) !important;
  opacity: 0.95 !important;
  box-shadow: none !important;
  border-radius: 999px !important;
}
body .yoga-home-template .swiper-pagination-bullet-active {
  width: 12px !important;
  height: 12px !important;
  background: #ffffff !important;
  opacity: 1 !important;
  transform: scale(1.02) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.06) !important;
}

/* Fix services bullets on mobile */
@media (max-width: 768px) {
  body .yoga-home-template .services-swiper .swiper-pagination {
    position: relative !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: 18px !important;
    display:flex !important;
    justify-content:center !important;
    z-index: 210 !important;
  }
  body .yoga-home-template .services-swiper { padding-bottom: 46px !important; }
}

/* End of file */