/* content.css — The pages that say what the game is: news, world, classes, the guide,
   contact, the rules and the character card. */

.main-narrow { max-width: 900px; }
.page-content > .panel { margin-bottom: 1.1rem; }

/* A place the designer and a lawyer will write. */
.to-fill {
    padding: 0.7rem 0.9rem;
    color: var(--amber);
    background: rgba(227, 176, 76, 0.07);
    border: 1px dashed rgba(227, 176, 76, 0.45);
}

/* ===== NEWS ===== */
.news-post .panel-head h2 a { color: var(--gold-bright); }
.news-post time { color: var(--text-dim); font-size: 0.84rem; }
.news-post-foot { margin-top: 0.8rem; font-size: 0.9rem; }
.forum-text { line-height: 1.7; overflow-wrap: anywhere; }
.forum-text ul { margin: 0.4rem 0 0.4rem 1.3rem; }
.forum-text a { text-decoration: underline; text-underline-offset: 3px; }
.forum-quote { margin: 0.4rem 0 0.7rem; padding: 0.6rem 0.9rem; color: var(--text-muted); background: var(--well); border-left: 3px solid var(--gold-deep); }
.forum-quote cite { display: block; margin-bottom: 0.25rem; color: var(--gold); font-style: normal; font-weight: 700; }
.page-links { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.25rem 0; color: var(--text-muted); font-size: 0.9rem; }

/* ===== WORLD AND CLASSES: a picture beside its words ===== */
.region-row { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 1.3rem; align-items: start; padding: 1.1rem; }
.region-row img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line-gold); }
.region-blank { display: block; aspect-ratio: 16 / 9; background: linear-gradient(180deg, var(--surface-3), var(--well)); border: 1px solid var(--line-gold); }
.region-row h2 { font-size: 1.5rem; color: var(--gold-bright); margin: 0; }
.region-levels { color: var(--gold); font-weight: 700; margin: 0.15rem 0 0.6rem; }
.class-weapons { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.6rem; }
.class-weapons span { padding: 0 0.45rem; font-size: 0.82rem; color: var(--text-muted); border: 1px solid var(--line-strong); }
.class-lines { color: var(--text-muted); font-size: 0.92rem; margin: 0.5rem 0 0.8rem; }
.content-note { margin-top: 0.5rem; }

/* ===== THE GUIDE ===== */
.guide-row { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 1.3rem; align-items: start; }
.guide-row img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 50%; border: 1px solid var(--line-gold); }
.guide-row p + p { margin-top: 0.7rem; }
.guide-keys { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0.5rem 1.5rem; }

/* ===== CONTACT ===== */
.contact-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }

/* ===== THE CHARACTER CARD ===== */
.character-card { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 1.4rem; align-items: start; max-width: 720px; }
.character-figure { width: 160px; height: 160px; }
.character-card h1 { font-size: 2rem; color: var(--gold-bright); }

@media (max-width: 760px) {
    .region-row, .guide-row { grid-template-columns: 1fr; }
    .guide-keys { grid-template-columns: 1fr; }
    .character-card { grid-template-columns: 96px minmax(0, 1fr); gap: 0.9rem; }
    .character-figure { width: 96px; height: 96px; }
}