/*
 * Lamari Diarios Core 1.40.710
 * CEPAS · halo fotográfico visible en los cuatro lados + esquinas reales.
 *
 * Cierre visual posterior a v1.40.709. En <=1100 px la fotografía principal
 * vuelve a participar en el flujo flex del panel con sus dimensiones reales,
 * limitada únicamente por max-width/max-height. Así border-radius recorta la
 * fotografía visible (no una caja de letterbox mayor que la foto).
 *
 * El halo reutiliza la misma URL del backdrop, con background-size:contain y
 * exactamente el mismo rectángulo útil que la foto. El blur se expande arriba,
 * abajo, izquierda y derecha. La foto principal permanece SIN blur, máscara,
 * transform, animación ni JS. Escritorio >1100 px permanece intacto.
 */

@media (max-width:1100px) {
  body.kd-strains-page .kd-strain-detail-app .kd-strain-premium-media,
  body.kd-standalone-strains-template .kd-strain-detail-app .kd-strain-premium-media,
  .kd-strain-detail-app .kd-strain-premium-media {
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    padding:22px 28px !important;
    overflow:hidden !important;
    isolation:isolate !important;
    background:#0a1810 !important;
  }

  /* La misma foto, desenfocada detrás y con la MISMA geometría contain.
   * Al no usar cover el halo nace de los cuatro bordes reales de la imagen. */
  body.kd-strains-page .kd-strain-detail-app .kd-strain-premium-media > .kd-strain-premium-media-backdrop,
  body.kd-standalone-strains-template .kd-strain-detail-app .kd-strain-premium-media > .kd-strain-premium-media-backdrop,
  .kd-strain-detail-app .kd-strain-premium-media > .kd-strain-premium-media-backdrop {
    display:block !important;
    position:absolute !important;
    inset:22px 28px !important;
    z-index:1 !important;
    margin:0 !important;
    opacity:.62 !important;
    visibility:visible !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-size:contain !important;
    border-radius:30px !important;
    filter:blur(26px) saturate(.88) brightness(.80) !important;
    transform:none !important;
    -webkit-transform:none !important;
    pointer-events:none !important;
    animation:none !important;
    transition:none !important;
    -webkit-mask:none !important;
    mask:none !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
    mix-blend-mode:normal !important;
  }

  /* La caja del IMG coincide ahora con la fotografía renderizada. El radio se
   * ve realmente en sus cuatro esquinas incluso con fotos cuadradas/verticales. */
  body.kd-strains-page .kd-strain-detail-app .kd-strain-premium-media > img.kd-strain-premium-photo,
  body.kd-standalone-strains-template .kd-strain-detail-app .kd-strain-premium-media > img.kd-strain-premium-photo,
  .kd-strain-detail-app .kd-strain-premium-media > img.kd-strain-premium-photo {
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    z-index:3 !important;
    display:block !important;
    flex:0 1 auto !important;
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:100% !important;
    max-height:100% !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:contain !important;
    object-position:center center !important;
    border:0 !important;
    border-radius:22px !important;
    overflow:hidden !important;
    background:transparent !important;
    box-shadow:0 12px 30px rgba(0,0,0,.24) !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
    transform:none !important;
    -webkit-transform:none !important;
    -webkit-mask:none !important;
    mask:none !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
    clip-path:none !important;
    mix-blend-mode:normal !important;
    animation:none !important;
    transition:none !important;
    will-change:auto !important;
    backface-visibility:visible !important;
    content-visibility:visible !important;
    contain:none !important;
  }

  /* El control de ampliación siempre queda sobre foto + halo. */
  .kd-strain-detail-app .kd-strain-premium-hero > .kd-strain-photo-zoom {
    z-index:30 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
}

@media (max-width:699px) {
  body.kd-strains-page .kd-strain-detail-app .kd-strain-premium-media,
  body.kd-standalone-strains-template .kd-strain-detail-app .kd-strain-premium-media,
  .kd-strain-detail-app .kd-strain-premium-media {
    padding:18px 20px !important;
  }

  body.kd-strains-page .kd-strain-detail-app .kd-strain-premium-media > .kd-strain-premium-media-backdrop,
  body.kd-standalone-strains-template .kd-strain-detail-app .kd-strain-premium-media > .kd-strain-premium-media-backdrop,
  .kd-strain-detail-app .kd-strain-premium-media > .kd-strain-premium-media-backdrop {
    inset:18px 20px !important;
    opacity:.58 !important;
    border-radius:26px !important;
    filter:blur(22px) saturate(.88) brightness(.82) !important;
  }

  body.kd-strains-page .kd-strain-detail-app .kd-strain-premium-media > img.kd-strain-premium-photo,
  body.kd-standalone-strains-template .kd-strain-detail-app .kd-strain-premium-media > img.kd-strain-premium-photo,
  .kd-strain-detail-app .kd-strain-premium-media > img.kd-strain-premium-photo {
    border-radius:18px !important;
    box-shadow:0 10px 24px rgba(0,0,0,.22) !important;
  }
}