/* Dungeons & Raids page (raids.html): art header, Tier 0.5 card, raid ladder. */

/* header: the Ragnaros key art on its own, full width; 420px tall like the other page headers */
.raids-head{ position:relative; overflow:hidden; background:var(--bg); padding:0; width:100%; height:min(40vw, 420px); }
.raids-head > .wrap{ position:relative; z-index:3; }
.raids-art{
  position:absolute; inset:0; z-index:0;
  background:url("art/raids-ragnaros.webp") center 20% / cover no-repeat;
}
.raids-head .bg-veil{ background:linear-gradient(180deg, rgba(9,11,12,0) 70%, rgba(9,11,12,.5) 90%, var(--bg) 100%); }

/* raid ladder: one card per raid, in roadmap order */
.raid-ladder{ list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:repeat(7,1fr); gap:12px; position:relative; }
.raid-ladder::before{ content:""; position:absolute; left:4%; right:4%; top:62px; height:1px; background:linear-gradient(90deg, var(--brass), var(--line-hard) 35%, var(--line-soft)); z-index:0; }
.raid-card{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  padding:14px 8px 16px; border:1px solid var(--line-soft); border-radius:var(--r); background:var(--surface);
}
.raid-card img{ width:54px; height:54px; border-radius:8px; border:1px solid #000; box-shadow:0 0 0 1px var(--line-hard), 0 10px 22px -12px #000; }
.raid-card b{ font-family:var(--display); font-size:16px; font-weight:600; line-height:1.2; color:var(--cream); }
.raid-ph{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); line-height:1.4; }
.raid-ph i{ display:block; font-style:normal; color:var(--muted); opacity:.75; }
.raid-tier{ font-size:12.5px; color:var(--brass); }
.raid-card.is-next{ border-color:var(--brass-line); background:linear-gradient(180deg, var(--brass-wash), transparent 80%), var(--surface); }
.raid-card.is-next .raid-ph, .raid-card.is-next .raid-ph i{ color:var(--brass-hi); opacity:1; }
.raid-card.is-next img{ box-shadow:0 0 0 1px var(--brass), 0 0 22px -6px rgba(217,169,78,.6); }

/* Heroic raids: eyebrow + "after launch" badge on one row */
.sec-head-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.sec-head-row .eyebrow{ margin:0; }
.soon{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ember); border:1px solid rgba(224,118,74,.4); background:rgba(224,118,74,.08); border-radius:999px; padding:4px 12px;
}

/* Tier 0.5 */
.t05-card{ display:grid; grid-template-columns:1.4fr 1fr; gap:36px; align-items:center; }
.t05-classes-mini{ display:grid; grid-template-columns:repeat(3,56px); gap:12px; justify-content:center; }
.t05-classes-mini img{ width:56px; height:56px; border-radius:50%; border:1px solid #000; box-shadow:0 0 0 1px var(--line-hard), 0 10px 22px -12px #000; }

@media (max-width:1040px){
  .raid-ladder{ grid-template-columns:repeat(4,1fr); }
  .raid-ladder::before{ display:none; }
  .t05-card{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .raid-ladder{ grid-template-columns:repeat(2,1fr); }
}