/* Bencefalo v94 — final course imagery
   Uses the four approved editorial images supplied for Taller Brujo.
   The image remains visually secondary to the course copy and blends into
   each course's established color identity. */

/* ---------- Course cards on /taller-brujo ---------- */
.course-overview-art{
  background-color:#070711!important;
}
.course-overview-image{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.course-overview-art::before{
  z-index:1!important;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      var(--art-blend,#0b0913) 0%,
      rgba(5,5,12,.86) 9%,
      rgba(5,5,12,.54) 24%,
      rgba(5,5,12,.16) 46%,
      transparent 66%),
    linear-gradient(180deg,
      rgba(3,3,9,.16) 0%,
      transparent 48%,
      rgba(3,3,9,.48) 100%)!important;
}
.course-overview-art::after{
  z-index:2!important;
  pointer-events:none;
  background:
    radial-gradient(34rem 25rem at 78% 46%,transparent 35%,rgba(4,4,11,.22) 88%),
    linear-gradient(135deg,rgba(255,255,255,.015),transparent 42%)!important;
}

/* The generated editorial imagery already carries the symbolism, so the
   placeholder glyph/orbit from the previous version is no longer needed. */
.course-overview-art .art-mark,
.course-overview-art .art-orbit{
  display:none!important;
}

.sendero-art{--art-blend:#20152d}
.sendero-art .course-overview-image{object-position:center 50%}
.lab-art{--art-blend:#082024}
.lab-art .course-overview-image{object-position:center 48%}
.divination-art{--art-blend:#211118}
.divination-art .course-overview-image{object-position:center 48%}
.tarot-art{--art-blend:#151126}
.tarot-art .course-overview-image{object-position:center 48%}

/* ---------- Course detail heroes ---------- */
.course-detail-page .course-hero-art{
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-color:#080812!important;
  border-color:rgba(var(--course-accent-rgb),.10)!important;
  box-shadow:
    0 30px 80px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.012)!important;
}
.course-detail-page .course-hero-art::before{
  z-index:1!important;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      #070611 0%,
      rgba(7,6,17,.78) 10%,
      rgba(7,6,17,.36) 28%,
      transparent 52%),
    linear-gradient(180deg,
      rgba(3,3,9,.16) 0%,
      transparent 48%,
      rgba(3,3,9,.58) 100%),
    radial-gradient(30rem 23rem at 72% 48%,
      transparent 42%,
      rgba(3,3,9,.24) 100%)!important;
}
.course-detail-page .course-hero-symbol{
  display:none!important;
}
.course-detail-page .course-hero-art small{
  z-index:2;
  padding:7px 10px;
  border:1px solid rgba(var(--course-accent-rgb),.14);
  border-radius:999px;
  background:rgba(4,4,11,.52);
  color:#b6b0bc;
  backdrop-filter:blur(7px);
  text-shadow:0 1px 12px rgba(0,0,0,.72);
}

.course-sendero-page .course-hero-art{
  background-image:url('/assets/course-el-sendero-sagrado.png')!important;
  background-position:center 50%!important;
}
.course-lab-page .course-hero-art{
  background-image:url('/assets/course-laboratorio-magico.png')!important;
  background-position:center 47%!important;
}
.course-divination-page .course-hero-art{
  background-image:url('/assets/course-taller-adivinacion.png')!important;
  background-position:center 47%!important;
}
.course-tarot-page .course-hero-art{
  background-image:url('/assets/course-tarot-para-todos.png')!important;
  background-position:center 47%!important;
}

/* Keep the imagery crisp while the course color stays present as a restrained
   photographic tint rather than an opaque overlay. */
.course-sendero-page .course-hero-art::after,
.course-lab-page .course-hero-art::after,
.course-divination-page .course-hero-art::after,
.course-tarot-page .course-hero-art::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(145deg,rgba(var(--course-accent-rgb),.035),transparent 52%)!important;
}

/* ---------- Mobile-first crop/blend ---------- */
@media(max-width:820px){
  .course-overview-art{
    min-height:230px!important;
    background-size:cover!important;
  }
  .course-overview-art::before{
    background:
      linear-gradient(180deg,
        rgba(4,4,10,.06) 0%,
        transparent 42%,
        rgba(5,5,12,.38) 68%,
        var(--art-blend,#0b0913) 100%)!important;
  }
  .course-overview-art::after{
    background:
      linear-gradient(90deg,rgba(4,4,10,.20),transparent 24%,transparent 76%,rgba(4,4,10,.12)),
      radial-gradient(25rem 18rem at 60% 42%,transparent 42%,rgba(4,4,10,.18) 100%)!important;
  }
  .sendero-art .course-overview-image{object-position:center 52%!important}
  .lab-art .course-overview-image{object-position:center 50%!important}
  .divination-art .course-overview-image{object-position:center 49%!important}
  .tarot-art .course-overview-image{object-position:center 50%!important}

  .course-detail-page .course-hero-art{
    min-height:300px!important;
  }
  .course-detail-page .course-hero-art::before{
    background:
      linear-gradient(180deg,
        rgba(5,5,12,.05) 0%,
        transparent 46%,
        rgba(5,5,12,.62) 100%),
      radial-gradient(24rem 18rem at 60% 44%,transparent 40%,rgba(4,4,10,.18) 100%)!important;
  }
  .course-detail-page .course-hero-art small{
    right:14px!important;
    bottom:14px!important;
    max-width:80%!important;
  }
}

@media(max-width:480px){
  .course-overview-art{min-height:218px!important}
  .course-detail-page .course-hero-art{min-height:272px!important}
}