/* Weraiko — Guides styling (shared across all topic pages) */
:root {
  --navy:#003366; --navy-soft:#eaf0f7;
  --orange:#ff5500; --orange-soft:#fff3ec;
  --bg:#f4f6f9; --border:#e2e8f0; --muted:#64748b;
}
* { box-sizing:border-box; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); margin:0; color:#0f172a;
  min-height:100vh; display:flex; flex-direction:column;
}
a { text-decoration:none; color:inherit; }
.container-weraiko { max-width:1400px; margin:0 auto; padding:2rem 2rem 3rem; width:100%; flex:1; }

.cat-hero {
  background: linear-gradient(135deg, #002347 0%, #003366 55%, #004b82 100%);
  color:#fff; border-radius:16px; padding:2.5rem 2rem; margin-bottom:1.75rem;
  position:relative; overflow:hidden;
}
.cat-hero::after {
  content:""; position:absolute; width:340px; height:340px; right:-90px; top:-90px;
  border-radius:50%; background: radial-gradient(circle, rgba(255,85,0,.32), transparent 60%);
  pointer-events:none;
}
.cat-hero-inner { position:relative; z-index:1; max-width:780px; }
.cat-hero-badge {
  display:inline-block; padding:.3rem .8rem; border-radius:999px;
  background: rgba(255,85,0,.18); color:#ffd6c2;
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  margin-bottom:1rem;
}
.cat-hero h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight:800; margin:0 0 .5rem; }
.cat-hero p { color:rgba(255,255,255,.85); margin:0; font-size:1rem; line-height:1.65; }

.cat-nav { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2rem; }
.cat-nav a {
  padding:.5rem 1.05rem; border-radius:999px; border:1px solid var(--navy);
  background:#fff; color:var(--navy); font-weight:600; font-size:.85rem;
  transition: all .15s; white-space:nowrap;
}
.cat-nav a:hover { background: var(--navy-soft); transform: translateY(-1px); }
.cat-nav a.active { background: var(--orange); border-color: var(--orange); color:#fff; box-shadow: 0 4px 12px rgba(255,85,0,.25); }

.article {
  font-size:1.02rem; line-height:1.75; color:#1e293b;
  background:#fff; padding:2rem 2.25rem; border-radius:14px;
  border:1px solid var(--border); box-shadow: 0 4px 14px rgba(15,23,42,.04);
}
.article h2 { color:var(--navy); font-size:1.35rem; margin:2rem 0 1rem; }
.article h2:first-child { margin-top:0; }
.article h3 { color:var(--navy); font-size:1.1rem; margin:1.5rem 0 .75rem; }
.article p { margin:0 0 1.25rem; }
.article ul, .article ol { margin:0 0 1.25rem; padding-left:1.5rem; line-height:1.8; }
.article li { margin-bottom:.4rem; }
.article a { color: var(--orange); text-decoration:underline; font-weight:600; }
.article strong { color: var(--navy); }

.guide-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:1.15rem; }
.guide-card {
  background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden;
  transition: transform .25s, box-shadow .25s; display:flex; flex-direction:column;
  box-shadow: 0 4px 14px rgba(15,23,42,.045);
}
.guide-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(15,23,42,.12); }
.guide-card-img {
  aspect-ratio: 16/9; background: linear-gradient(135deg, #003366, #004b82);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.5); font-size:2.5rem; overflow:hidden;
}
.guide-card-img img { width:100%; height:100%; object-fit:cover; }
.guide-card-body { padding:1.25rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.guide-card h3 { font-size:1.1rem; font-weight:800; color:var(--navy); margin:0 0 .5rem; line-height:1.3; }
.guide-card p { color:var(--muted); font-size:.9rem; line-height:1.6; margin:0 0 1rem; }
.guide-meta {
  display:flex; justify-content:space-between; align-items:center;
  font-size:.78rem; color:var(--muted); margin-top:auto;
  padding-top:.75rem; border-top:1px solid var(--border);
}
.guide-meta i { color:var(--orange); margin-right:.25rem; }

.empty { grid-column: 1/-1; text-align:center; padding:4rem 1rem; color:var(--muted); }
.empty i { font-size:3rem; color:var(--border); display:block; margin-bottom:.85rem; }

@media (max-width: 900px) {
  .container-weraiko { padding: 1.25rem 1rem 2rem; }
  .article { padding: 1.5rem 1.25rem; }
}