/* アーカイブ一覧・検索結果・単一記事のスタイル
   functions.php: is_archive / is_home / is_search / is_singular(post, news, achievements) で読み込み */

/* ============================================================
   1. アーカイブ一覧
   ============================================================ */
/* auto-fill で空トラックを残し、記事が少なくてもカードが全幅に伸びないようにする */
.q-posts--archive {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.q-archive__empty {
    text-align: center;
    color: var(--q-text-muted);
    padding-block: var(--q-space-lg);
}

/* ============================================================
   2. ページネーション
   ============================================================ */
.q-pagination {
    margin-top: var(--q-space-lg);
}

.q-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    justify-content: center;
}

.q-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.8em;
    border: 1px solid var(--q-beige-dark);
    border-radius: 4px;
    background-color: var(--q-white);
    color: var(--q-navy);
    text-decoration: none;
}

.q-pagination a.page-numbers:hover {
    background-color: var(--q-beige);
}

.q-pagination .page-numbers.current {
    background-color: var(--q-navy);
    border-color: var(--q-navy);
    color: var(--q-white);
}

.q-pagination .page-numbers.dots {
    border: none;
    background: none;
}

/* ============================================================
   3. 単一記事
   ============================================================ */
.q-single-hero__meta {
    display: flex;
    align-items: center;
    gap: 1.2em;
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}

.q-single-hero__cat {
    color: var(--q-gold);
    letter-spacing: 0.05em;
}

.q-single__article {
    padding-block: var(--q-space-lg);
}

/* 1行が長すぎると読みにくいため本文は可読幅に制限して中央寄せ */
.q-single__measure {
    max-width: 740px;
    margin-inline: auto;
}

.q-single .entry-content img {
    max-width: 100%;
    height: auto;
}

/* 前後記事ナビ */
.q-single-nav__inner {
    display: flex;
    justify-content: space-between;
    gap: var(--q-space-sm);
    max-width: 740px;
}

.q-single-nav__item {
    max-width: 48%;
}

.q-single-nav__item--next {
    margin-left: auto;
    text-align: right;
}

.q-single-nav a {
    color: var(--q-gold-deep);
    text-decoration: none;
}

.q-single-nav a:hover {
    color: var(--q-navy);
    text-decoration: underline;
}

.q-single__back {
    text-align: center;
    margin-block: var(--q-space-md) var(--q-space-lg);
}

@media (max-width: 689.98px) {
    .q-single-nav__inner {
        flex-direction: column;
    }

    .q-single-nav__item {
        max-width: 100%;
    }

    .q-single-nav__item--next {
        margin-left: 0;
        text-align: left;
    }
}

/* ============================================================
   4. 吹き出し（移行済み旧記事 + 新規記事の balloon パターン共用）
   ============================================================ */
.q-balloon {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-block: var(--q-space-md);
}

.q-balloon__icon {
    flex: 0 0 72px;
    margin: 0;
    text-align: center;
}

.q-balloon__icon img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 2px solid var(--q-gold);
    border-radius: 50%;
}

/* 名前キャプション（移行記事は .q-balloon__name、パターンは素の figcaption） */
.q-balloon__icon figcaption {
    margin-top: 4px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--q-text-muted);
}

.q-balloon__body {
    position: relative;
    flex: 1;
    min-width: 0;
    /* アイコン円の中心と吹き出し口の高さを揃える */
    margin-top: 12px;
    padding: 16px 20px;
    background-color: var(--q-beige-light);
    border: 1px solid var(--q-beige-dark);
    border-radius: var(--q-radius);
    line-height: 1.9;
}

/* 尻尾: 枠線色と地色の三角を重ねて縁取りを再現 */
.q-balloon__body::before,
.q-balloon__body::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

.q-balloon__body::before {
    top: 14px;
    left: -13px;
    border-width: 9px 13px 9px 0;
    border-color: transparent var(--q-beige-dark) transparent transparent;
}

.q-balloon__body::after {
    top: 15px;
    left: -11px;
    border-width: 8px 12px 8px 0;
    border-color: transparent var(--q-beige-light) transparent transparent;
}

.q-balloon__body > p {
    margin: 0 0 0.7em;
}

.q-balloon__body > p:last-child {
    margin-bottom: 0;
}

@media (max-width: 599.98px) {
    .q-balloon {
        gap: 10px;
    }

    .q-balloon__icon {
        flex-basis: 52px;
    }

    .q-balloon__icon img {
        width: 52px;
        height: 52px;
    }
}

/* ============================================================
   5. マーカー（蛍光ペン風・下線 — エディタの「マーカー」書式と移行記事で共用）
   ============================================================ */
/* <mark> のUAデフォルト黄色背景を打ち消し、変種クラスで上書きする */
.q-marker {
    background: none;
    color: inherit;
}

.q-marker--gold {
    background: linear-gradient(transparent 62%, rgba(184, 155, 94, 0.35) 62%);
}

.q-marker--terracotta {
    background: linear-gradient(transparent 62%, rgba(193, 102, 80, 0.28) 62%);
}

.q-marker--navy {
    background: linear-gradient(transparent 62%, rgba(27, 42, 74, 0.18) 62%);
}

.q-marker--line {
    border-bottom: 2px solid var(--q-gold);
}