/* ==========================================================================
   CONTENT CARD GRID
   Shared by dungeons-raids.html and battlegrounds-arenas.html — a labeled
   group of cards (icon + badge + title + description).
   ========================================================================== */

.content-groups{max-width:1100px; margin:0 auto; padding:0 5% var(--block-gap);}
.content-group{margin-bottom:70px;}
.content-group:last-child{margin-bottom:0;}
.content-group-title{
  display:flex; align-items:baseline; gap:14px; margin-bottom:26px;
  font-family:var(--font-display); font-size:1.3rem; letter-spacing:0.5px;
  padding-bottom:14px; border-bottom:1px solid var(--border);
}
.content-group-title .content-group-icon{
  height:16px; width:auto; align-self:center; flex-shrink:0;
}
.content-group-title .content-group-sub{
  font-family:var(--font-body); font-size:0.78rem; letter-spacing:0.5px;
  color:var(--text-dim); text-transform:none; font-weight:400;
}

.content-card-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:20px;}
.content-card{
  padding:22px; border-radius:12px; border:1px solid var(--border);
  background:linear-gradient(160deg, var(--panel), var(--bg-alt));
  transition:border-color .25s ease, transform .25s ease;
}
.content-card:hover{border-color:var(--frost-dim); transform:translateY(-3px);}
.content-card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.content-card-icon{width:34px; height:auto; filter:drop-shadow(0 0 2px rgba(111,216,255,0.55));}
.content-card-badge{
  font-size:0.66rem; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
  padding:4px 12px; border-radius:20px; color:var(--frost-glow);
  border:1px solid var(--frost-dim); background:rgba(111,216,255,0.08); white-space:nowrap;
}
.content-card h3{font-family:var(--font-display); font-size:1rem; margin-bottom:8px;}
.content-card p{color:var(--text-dim); font-size:0.85rem; line-height:1.7;}

@media(max-width:600px){
  .content-card-grid{grid-template-columns:1fr;}
}

/* ---------- Clickable instance card + detail modal (dungeons-raids.html) ---------- */
.content-card--open{cursor:pointer;}
.content-card--open:hover{border-color:var(--frost-dim); transform:translateY(-3px);}
.content-card-more{
  display:inline-block; margin-top:14px;
  font-size:0.74rem; letter-spacing:0.5px; color:var(--frost-glow);
  border-bottom:1px solid var(--frost-dim); padding-bottom:2px;
  transition:border-color .2s ease;
}
.content-card--open:hover .content-card-more{border-color:var(--frost-glow);}

/* Faint loading-screen art behind a clickable instance card.
   The image itself is set inline (background-image:url(...)) so its path
   resolves against the page, not this stylesheet. */
.content-card--art{
  position:relative;
  overflow:hidden;
  background-size:cover;
  background-position:center;
}
.content-card--art::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(160deg, rgba(13,20,34,0.80), rgba(8,12,22,0.86));
  transition:opacity .25s ease;
}
.content-card--art:hover::before{opacity:0.82;}
.content-card--art > *{position:relative; z-index:1;}

.dungeon-modal{position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:5vh 5vw;}
.dungeon-modal[hidden]{display:none;}
.dungeon-modal-backdrop{position:absolute; inset:0; background:rgba(3,5,10,0.78); backdrop-filter:blur(6px);}
.dungeon-modal-card{
  position:relative; z-index:1; width:100%; max-width:620px; max-height:90vh; overflow-y:auto;
  border:1px solid var(--frost-dim); border-radius:16px; padding:32px 34px;
  background:linear-gradient(160deg, var(--panel), var(--bg-alt));
  box-shadow:0 30px 80px rgba(0,0,0,0.55);
  animation:dm-in .28s cubic-bezier(.2,.7,.2,1);
}
@keyframes dm-in{from{opacity:0; transform:translateY(14px) scale(0.98);} to{opacity:1; transform:none;}}
.dungeon-modal-close{
  position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--border); background:rgba(5,8,16,0.6); color:var(--text-dim);
  cursor:pointer; font-size:0.9rem; transition:border-color .2s ease, color .2s ease;
}
.dungeon-modal-close:hover{border-color:var(--frost-dim); color:var(--frost-glow);}
.dungeon-modal-head{display:flex; gap:16px; align-items:center; margin-bottom:22px; padding-right:34px;}
.dungeon-modal-icon{width:44px; height:auto; flex-shrink:0; filter:drop-shadow(0 0 2px rgba(111,216,255,0.55));}
.dungeon-modal-kicker{font-size:0.7rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--frost-glow);}
.dungeon-modal-head h2{font-family:var(--font-display); font-size:1.5rem; margin-top:4px;}
.dungeon-modal-body h3{
  font-family:var(--font-display); font-size:0.95rem; letter-spacing:0.5px;
  margin:22px 0 10px; padding-bottom:8px; border-bottom:1px solid var(--border);
}
.dm-facts{display:flex; flex-wrap:wrap; gap:10px 26px; font-size:0.84rem; color:var(--text);}
.dm-facts span{display:block; font-size:0.64rem; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-dim); margin-bottom:3px;}
.dm-summary{color:var(--text-dim); font-size:0.9rem; line-height:1.8; margin-top:16px;}
.dungeon-modal-body ul{display:flex; flex-direction:column; gap:9px;}
.dungeon-modal-body li{font-size:0.85rem; line-height:1.65; color:var(--text-dim); padding-left:16px; position:relative;}
.dungeon-modal-body li::before{content:"›"; position:absolute; left:0; color:var(--frost-glow); font-weight:700;}
.dm-bosses strong{color:var(--text);}
.dm-changes{
  margin-top:24px; padding:18px 20px; border-radius:12px;
  border:1px solid var(--frost-dim); background:rgba(111,216,255,0.06);
}
.dm-changes h3{border-color:rgba(111,216,255,0.3); margin-top:0;}

/* Loot list — icon rendered from stored data, link opens on wotlk.evowow.com,
   hover tooltip lazy-loaded by power.js */
.dm-loot li{padding-left:0; display:flex; align-items:flex-start; gap:9px; flex-wrap:wrap;}
.dm-loot li::before{display:none;}
.dm-loot-ico{
  flex-shrink:0; width:22px; height:22px; margin-top:1px; border-radius:4px;
  background-size:cover; background-position:center; background-color:rgba(8,13,24,0.8);
  border:1px solid rgba(0,0,0,0.5); box-shadow:0 0 8px rgba(111,216,255,0.18);
}
.dm-loot-ico--blank{box-shadow:none; opacity:0.35;}
.dm-loot a{
  font-weight:400; text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .15s ease;
}
.dm-loot a:hover{border-bottom-color:currentColor;}
.dm-loot-note{color:var(--text-dim); font-size:0.8rem; width:100%; padding-left:31px;}
.dm-loot-plain{color:var(--text);}