/* ==========================================================================
   ZONES PAGE STYLES
   Extends css/style.css. `.zone-row` is one repeatable unit per zone,
   grouped under `.zone-continent` — meant to become a PHP loop over a
   zones table (continent, name, status, description, thumbnail) later.
   ========================================================================== */

.zone-groups{max-width:1100px; margin:0 auto; padding:0 5% 150px;}
.zone-continent{margin-bottom:50px;}
.zone-continent:last-child{margin-bottom:0;}
.zone-continent-title{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--font-display); font-size:1.15rem; letter-spacing:1px;
  color:var(--text); padding-bottom:14px; margin-bottom:4px;
  border-bottom:1px solid var(--border);
}
.zone-continent-title .zone-count{
  color:var(--text-dim); font-size:0.7rem; letter-spacing:1.5px; text-transform:uppercase; font-weight:400;
}
.zone-list{border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--panel);}

.zone-row{
  display:grid; grid-template-columns:56px 1fr 150px; align-items:center; gap:22px;
  padding:22px 24px; border-bottom:1px solid var(--border);
  transition:background .25s ease;
}
.zone-row:last-child{border-bottom:none;}
.zone-row:hover{background:rgba(111,216,255,0.04);}
.zone-icon{width:52px; height:52px; border-radius:10px; overflow:hidden; border:1px solid var(--border); flex-shrink:0;}
.zone-icon img{width:100%; height:100%; object-fit:cover; display:block;}
.zone-info h3{font-family:var(--font-display); font-size:1.02rem; font-weight:600; letter-spacing:0.3px;}
.zone-info p{color:var(--text-dim); font-size:0.85rem; margin-top:6px; line-height:1.6;}
.zone-status{justify-self:end;}

.zone-status-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 14px; border-radius:20px; border:1px solid;
  font-size:0.68rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; white-space:nowrap;
}
.zone-status-badge::before{content:"●"; font-size:0.5rem;}
.zone-status-badge.in-dev{color:var(--frost-glow); border-color:var(--frost-dim); background:rgba(111,216,255,0.08);}
.zone-status-badge.planned{color:var(--text-dim); border-color:var(--border); background:rgba(142,162,179,0.06);}
.zone-status-badge.live{color:#8fe0a8; border-color:rgba(143,224,168,0.4); background:rgba(143,224,168,0.08);}

.zone-empty-row{padding:28px 24px; color:var(--text-dim); font-size:0.85rem; font-style:italic; text-align:center;}

.zone-row-hidden{display:none;}
.zone-load-more{text-align:center; margin-top:22px;}

@media(max-width:700px){
  .zone-row{grid-template-columns:44px 1fr; grid-template-areas:"icon info" "icon status";}
  .zone-icon{grid-area:icon;}
  .zone-info{grid-area:info;}
  .zone-status{grid-area:status; justify-self:start; margin-top:8px;}
}

/* ---------- ZONE DETAIL PAGE ---------- */
.breadcrumb{
  max-width:1000px; margin:0 auto; padding:0 5% 0;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  font-size:0.8rem; letter-spacing:0.5px; color:var(--text-dim);
}
.breadcrumb a{color:var(--text-dim); transition:color .2s;}
.breadcrumb a:hover{color:var(--frost-glow);}
.breadcrumb .sep{color:var(--border); opacity:0.8;}
.breadcrumb .current{color:var(--frost-glow);}

.zone-detail{max-width:1000px; margin:0 auto; padding:40px 5% 150px;}
.zone-detail-head{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:40px;}
.zone-detail-head h1{font-family:var(--font-display); font-size:clamp(1.9rem,4vw,2.6rem); letter-spacing:0.5px;}
.zone-detail-head p{color:var(--text-dim); margin-top:12px; max-width:560px; line-height:1.8;}

.zone-progress{margin:30px 0 44px;}
.zone-progress-head{display:flex; justify-content:space-between; align-items:baseline; font-size:0.85rem; color:var(--text-dim); margin-bottom:10px;}
.zone-progress-head strong{color:var(--frost-glow); font-family:var(--font-display); font-size:1rem;}
.zone-progress-bar{height:10px; border-radius:20px; background:var(--panel); border:1px solid var(--border); overflow:hidden;}
.zone-progress-fill{height:100%; border-radius:20px; background:linear-gradient(90deg, var(--frost-dim), var(--frost)); box-shadow:0 0 16px rgba(111,216,255,0.4);}

.zone-focus-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px; margin-top:20px;}
.zone-focus-card{
  border:1px solid var(--border); border-radius:12px; padding:26px;
  background:linear-gradient(160deg, var(--panel), var(--bg-alt));
  transition:border-color .25s ease, transform .25s ease;
}
.zone-focus-card:hover{border-color:var(--frost-dim); transform:translateY(-4px);}
.zone-focus-card h3{font-family:var(--font-display); font-size:1.02rem; margin-bottom:10px; letter-spacing:0.3px;}
.zone-focus-card p{color:var(--text-dim); font-size:0.85rem; line-height:1.7;}

.zone-detail-section{margin-top:56px;}
.zone-detail-section > .eyebrow{color:var(--frost-glow); letter-spacing:3px; text-transform:uppercase; font-size:0.78rem;}
.zone-detail-section h2{font-family:var(--font-display); font-size:1.5rem; margin-top:12px; margin-bottom:18px; letter-spacing:0.3px;}
.zone-detail-section p{color:var(--text-dim); line-height:1.85;}