/* ============================================================================
   DICE — CHANNEL ART · aspect-aware treatment (landing + browse-all + detail)
   Ported from cd-b3-p2-export/channel-art.css (DICE Design System_4).
   Reconciles the OFF-7 cream-band fix AND the wide-logo crop (Deluxe Lounge HD
   2048x1230 was clipping under object-fit:cover):
     · Wide/landscape logo (ratio > ~1.2): CONTAIN the whole logo (<=86%w/62%h,
       no crop) over a blurred, scaled copy of the same art (no cream band).
     · Portrait/poster art (<= ~1.2):      COVER (fill), blur layer hidden.
   Mode is set by channel-art.js from the image's natural ratio (data-auto),
   or per-asset via .ca-tile--wide / .ca-tile--cover. Sits absolute inside the
   existing positioned frame (.bc-poster on cards, .lst-art on the detail hero).
   Namespaced .ca-* so it only touches the channel tiles it is applied to.
   Token values carry hex fallbacks so the tint holds even if tokens are absent.
   ========================================================================== */

.ca-tile { position: absolute; inset: 0; overflow: hidden; }

/* pillar-accent tint = base fallback behind the fill (covers transparent PNGs) */
.ca-tile--sports   { background: linear-gradient(160deg, #eafaf6 0%, var(--pillar-sports-fill, #D7F0EC) 100%); }
.ca-tile--ent      { background: linear-gradient(160deg, #f5eefc 0%, var(--pillar-entertainment-fill, #ECE3F7) 100%); }
.ca-tile--channels { background: linear-gradient(160deg, #fdf6e2 0%, var(--pillar-channels-fill, #FBEFCC) 100%); }

/* blurred, dimmed, scaled copy of the same art fills the frame (no cream band) */
.ca-tile__fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(26px) brightness(0.94) saturate(1.08); transform: scale(1.35); opacity: 0.9; }

/* the sharp art on top.
   Base carries a SAFE bounded-contain default so a tile that never gets a
   JS-assigned --wide/--cover mode (e.g. endless-appended pages the load-time
   pass didn't see) letterboxes inside the tile instead of rendering the img at
   natural size and magnifying/overflowing. --wide restates this; --cover and
   --tint fully override it, so this changes nothing for processed tiles. */
.ca-tile__art { position: absolute; inset: 0; margin: auto; max-width: 86%; max-height: 62%; object-fit: contain; }

/* WIDE / LANDSCAPE logo -> contain, whole logo, generous but bounded box */
.ca-tile--wide .ca-tile__art { width: auto; height: auto; max-width: 86%; max-height: 62%; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(7,30,50,0.28)); }

/* PORTRAIT / square poster art -> cover (fill), the fill layer is hidden */
.ca-tile--cover .ca-tile__art  { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.ca-tile--cover .ca-tile__fill { display: none; }

/* art-less fallback: pillar tint alone */
.ca-tile--tint .ca-tile__fill, .ca-tile--tint .ca-tile__art { display: none; }