/* ==========================================================
   SINGLE STORY – polished hero, clean reading layout
   ========================================================== */

/* ── Page offset (match other templates) ──────────────── */
body .o-page main {
    padding-top: 3.5rem !important;
}

/* ── Hero ─────────────────────────────────────────────── */
.c-story-single__hero {
    background-color: var(--color-secondary);
    padding: 4rem 0 3rem;
    text-align: center;
    color: #fff;
}

.c-story-single__title {
    font-family: 'Playfair Display', serif;
    font-size: var(--font-size-h1);
    font-weight: 900;
    margin-bottom: 0.5rem;
    color: #fff;
}

.c-story-single__label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
}

/* ── Content area ─────────────────────────────────────── */
.c-story-single__content {
    padding: 3rem 0;
    background-color: var(--color-light);
}

.c-story-single__body {
    max-width: 750px;
    margin: 0 auto;
    font-size: var(--font-size-body);
    line-height: 1.8;
    color: var(--color-black);
}

/* WordPress image/alignment overrides for clean display */
.c-story-single__body img {
    max-width: 100%;
    height: auto;
    margin: 1.5rem auto;
    display: block;
    border-radius: 0.5rem;
}

.c-story-single__body p {
    margin-bottom: 1.5rem;
}

/* ── Back link ────────────────────────────────────────── */
.c-story-single__back {
    display: inline-block;
    margin-top: 2.5rem;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s;
}
.c-story-single__back:hover {
    color: var(--color-primary-hover);
}

/* ── Two‑column comment form (uses .c-comment-form-grid) ── */
.c-comment-form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
    align-items: start !important;
}

/* Full‑width notes / consent */
.c-comment-form-grid .comment-notes,
.c-comment-form-grid .comment-form-cookies-consent {
    grid-column: 1 / -1 !important;
}

/* LEFT: Comment + Email */
.c-comment-form-grid .comment-form-comment { grid-column: 1 !important; }
.c-comment-form-grid .comment-form-email   { grid-column: 1 !important; }

/* RIGHT: Name + Website */
.c-comment-form-grid .comment-form-author { grid-column: 2 !important; }
.c-comment-form-grid .comment-form-url    { grid-column: 2 !important; }

/* Submit – full width, right‑aligned */
.c-comment-form-grid .form-submit {
    grid-column: 1 / -1 !important;
    justify-self: end !important;
}

/* Mobile – single column */
@media (max-width: 600px) {
    .c-comment-form-grid {
        grid-template-columns: 1fr !important;
    }
    .c-comment-form-grid .comment-form-comment,
    .c-comment-form-grid .comment-form-email,
    .c-comment-form-grid .comment-form-author,
    .c-comment-form-grid .comment-form-url,
    .c-comment-form-grid .form-submit {
        grid-column: 1 !important;
    }
    .c-comment-form-grid .form-submit {
        justify-self: center !important;
    }
}