/* ============================================
   Page-Specific Styles - WindCrewOrchestra
   Styles for individual pages using design tokens v1
============================================ */

/* ============================================
   Top Page - Hero Section
============================================ */
.hero-section {
    aspect-ratio: 2 / 1;
    max-height: 600px;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: var(--color-bg-section);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Text wrap: positioned above the image, no full overlay */
.hero-text-wrap {
    position: relative;
    z-index: 1;
    text-align: center;
}

/* Shared backdrop box — wraps hero title + catchphrase (spec §2.1 — same box #130) */
.hero-title-box {
    display: inline-block;
    text-align: center;
    color: var(--white);
    background: rgba(44, 49, 51, 0.45);
    padding: 0.25em 0.7em;
    border-radius: 12px;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: var(--fs-display);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: var(--lh-display);
}

/* 活動拠点キャッチ — 楽団名直下・同一下地ボックス内 (spec §2.1 / §3.4 #130) */
.hero-catchphrase {
    display: block;
    font-family: var(--font-body);
    font-size: var(--fs-caption); /* 14px — 楽団名より小さめ */
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: var(--lh-caption);
    color: inherit;
    margin-top: var(--space-8);
}

/* Hero: no image state — plain band, no backdrop box (spec §2.1) */
.hero-section--no-image {
    background: var(--color-bg-section);
}
.hero-section--no-image .hero-title-box {
    background: transparent;
    color: var(--color-text);
    padding: 0;
    border-radius: 0;
}

/* ============================================
   Top Page - Next Concert Section
============================================ */
/* .next-concert inherits padding from .section */

/* ============================================
   Top Page - SNS Section
============================================ */
.sns-section {
    background: var(--color-bg-section);
    padding: var(--space-64) 0;
}

.sns-section .section-title {
    margin-bottom: var(--space-32);
}

.sns-sidebar {
    max-width: 500px;
    margin: var(--space-32) auto 0; /* 上に余白: 誘導文/前要素との間隔 (#133) */
}

.sns-sidebar + .sns-sidebar {
    margin-top: var(--space-48); /* フィードとリンクの間隔は広め */
}

/* SNS リンクグリッドのコンテナ (フィードとは別クラスで幅制御) (#134) */
.sns-links {
    max-width: none; /* PC では全幅で4列を使う — .sns-sidebar の 500px 上書き */
}

.sns-sidebar iframe {
    max-width: 100%;
}

.sns-placeholder {
    display: grid;
    /* SP: 2列×2段 (デフォルト。PC で上書き) */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-24);
}

.sns-placeholder-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-16);
    padding: var(--space-24);
    background: var(--color-bg);
    border-radius: var(--radius-16);
    border: 1px solid var(--color-border);
    transition: border-color var(--duration) var(--easing), box-shadow var(--duration) var(--easing), transform var(--duration) var(--easing);
    min-width: 0;
    text-decoration: none;
    color: var(--color-text);
}

.sns-placeholder-item:hover {
    border-color: var(--sky-500);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
    color: var(--color-text);
}

.sns-placeholder-icon {
    color: currentColor;
    flex-shrink: 0;
}

.sns-placeholder-icon svg {
    width: 32px;
    height: 32px;
}

.sns-placeholder-name {
    font-size: var(--fs-body);
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
}

/* ============================================
   About Page - 楽団紹介
============================================ */
.page-about {
    background-color: var(--color-bg);
}

/* Page title area: provides top spacing before the first section */
.page-about > .container {
    padding-top: var(--space-64);
}

/* Each section spans full viewport width so its bg colour reaches the edges (§2.2 / §2.3) */
.about-section,
.recruit-band-section {
    padding: var(--space-64) 0;
    background-color: var(--color-bg);
}

/* Alternating bg: odd-indexed sections get sky-50 (spec §2.2 / §2.3) */
.about-section--alt,
.recruit-band-section--alt {
    background-color: var(--color-bg-section);
}

/* Two-column layout: text + image side by side (PC only — spec §2.2) */
.about-section-body--has-image {
    display: flex;
    align-items: flex-start;
    gap: var(--space-48);
}

/* Text-only sections: constrain body to readable line length (design-system.md ③ — 640px = 40 chars/line) */
.about-section-body:not(.about-section-body--has-image) {
    max-width: var(--measure);
    margin: 0 auto;
}

.about-text,
.about-image {
    flex: 1 1 0;
    min-width: 0;
}

/* Image on left: shift image before text via flex order.
   HTML order remains text-first so mobile stacks correctly (spec §2.2). */
.about-section-body--image-left .about-image {
    order: -1;
}

.about-section h2,
.recruit-band-section h2 {
    color: var(--color-text);
    margin-bottom: var(--space-24);
}

.about-section ul {
    margin-left: var(--space-32);
}

.about-section li {
    margin-bottom: var(--space-8);
}

.about-image img {
    width: 100%;
    border-radius: var(--radius-16);
}

.about-image-placeholder {
    width: 100%;
    height: 250px;
    background: var(--ink-50);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    color: var(--color-text-muted);
    font-size: var(--fs-body);
    border-radius: var(--radius-16);
}

.about-image-placeholder svg {
    opacity: 0.4;
}

.page-about .entry-content {
    max-width: var(--measure);
    margin: 0 auto;
}

/* ============================================
   Recruit Page - 団員募集
   Full-width alternating section bands (spec §2.3 — §2.2 楽団紹介と同方式)
============================================ */

/* Page wrapper: no padding — section bands handle vertical spacing */
.page-recruit {
    background-color: var(--color-bg);
}

/* Page title area: spacing above the first section band */
.page-recruit > .container {
    padding-top: var(--space-64);
}

/* Recruit CTA: standard orange btn centered, no background wrapper (spec §2.3 — 独自の背景帯は敷かない) */
.recruit-cta {
    text-align: center;
}

.recruit-cta p {
    margin-bottom: var(--space-24);
    color: var(--color-text-sub);
}

/* ============================================
   Contact Page - お問い合わせ
============================================ */
.page-contact {
    padding: var(--space-64) 0;
    background-color: var(--color-bg);
}

.contact-form {
    max-width: var(--measure);
    margin: 0 auto;
}

.form-intro {
    text-align: center;
    margin-bottom: var(--space-48);
    color: var(--color-text-sub);
}

/* Google Form embed */
.gform-embed {
    max-width: 700px;
    margin: 0 auto;
    padding: var(--space-32) 0;
}

.gform-embed iframe {
    width: 100%;
    border: 0;
}

/* ============================================
   Concert Archive Page - 演奏会一覧
============================================ */
.page-concert {
    padding: var(--space-64) 0;
    background-color: var(--color-bg);
}

.concert-section {
    margin-bottom: var(--space-48);
}

.concert-section h2 {
    color: var(--color-text);
    margin-bottom: var(--space-24);
}

/* ============================================
   Concert Detail Page - 演奏会詳細 (spec §2.5)
   2-col layout: flyer (left ~40%) + sidebar (right) on PC
   Mobile-first stacked; guide/CTA duplicated for mobile reorder
============================================ */
.single-concert {
    padding: var(--space-64) 0;
    background-color: var(--color-bg);
}

/* Full container width — 2-col needs more than --measure */
.concert-detail {
    max-width: var(--container);
    margin: 0 auto;
}

/* Title: full width, centered (spec §2.5 — タイトル先頭・全幅) */
/* Scoped to .concert-detail to avoid overriding .concert-title card heading in components.css */
.concert-detail .concert-title {
    text-align: center;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    font-weight: 400;
    margin-bottom: var(--space-48);
}

/* ── 2-col body ───────────────────────────── */

/* Mobile-first: stacked column */
.concert-body {
    margin-bottom: var(--space-48);
}

.concert-body--has-flyer {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
}

/* Flyer: shown after sidebar in DOM order on mobile (spec §2.5 — 情報→チラシ縦積み) */
/* spec §2.5 — チラシは切り抜かず全体表示・クリックで原寸 */
.concert-flyer {
    align-self: center; /* center on mobile */
    width: 76vw; /* spec §2.5 — 画面幅の7〜8割 */
}

.concert-flyer a {
    display: block;
    border-radius: var(--radius-16);
    overflow: hidden;
}

/* Flyer image: no cropping (design-system.md — 「貼ってある紙」) */
.concert-flyer-img {
    width: 100%;
    height: auto;
    display: block;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-16);
}


/* Concert Meta: stacked items in sidebar */
.concert-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    font-size: var(--fs-body);
    margin-bottom: var(--space-32);
}

/* Meta item: icon + label/value block */
.meta-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
}

/* Scoped to .concert-meta to avoid polluting archive-concert.php .meta-icon */
.concert-meta .meta-icon {
    flex-shrink: 0;
    color: var(--color-text-sub);
}

/* Stacked label + value(s) */
.meta-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.meta-label {
    font-size: var(--fs-caption);
    color: var(--color-text-sub);
    font-weight: 700;
}

.meta-value {
    font-weight: 700;
    color: var(--color-text);
}

/* Time: secondary info, slightly lighter */
.meta-time {
    font-weight: 400;
    color: var(--color-text-sub);
}

/* Guide + CTA inside sidebar: PC only (hidden on mobile; mobile version below) */
.concert-sidebar-guide {
    display: none;
}

/* Guide box (shared by sidebar and mobile versions) */
.concert-guide {
    background: var(--sky-100);
    padding: var(--space-24);
    border-radius: var(--radius-16);
    margin-bottom: var(--space-24);
}

/* h2 tag but visually h3 size (heading hierarchy: title h1 → guide h2, visual size maintained) */
.concert-guide-heading {
    font-size: var(--fs-h3);
    font-family: var(--font-heading);
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: var(--space-16);
}

.concert-guide-body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
}

/* CTA block (shared) */
.concert-cta {
    text-align: center;
    padding-top: var(--space-8);
}

.concert-cta p {
    margin-bottom: var(--space-16);
    color: var(--color-text-sub);
    font-size: var(--fs-body);
}

/* Guide + CTA: mobile only section (shown below program on mobile) */
.concert-guide-mobile {
    display: block;
    margin: var(--space-48) 0;
}

/* ── Full-width sections below the 2-col body ─ */

/* Concert Content: 1行40字ルール (design-system §③) */
.concert-content {
    max-width: var(--measure);
    margin-left: auto;
    margin-right: auto;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    margin-bottom: var(--space-48);
}

.concert-content h2 {
    color: var(--color-text);
    margin: var(--space-32) 0 var(--space-24);
}

/* Program Section: 1行40字ルール (design-system §③) */
.concert-program-section {
    max-width: var(--measure);
    margin-left: auto;
    margin-right: auto;
    background-color: var(--sky-100);
    padding: var(--space-32);
    border-radius: var(--radius-16);
    margin-top: var(--space-48);
    margin-bottom: var(--space-48);
}

.concert-program-section h2 {
    color: var(--color-text);
    margin-bottom: var(--space-24);
}

.program-list ol {
    margin-left: var(--space-32);
}

.program-list li {
    margin-bottom: var(--space-8);
    line-height: var(--lh-caption);
}

/* Concert Navigation: 1行40字ルール (design-system §③) */
.concert-navigation {
    max-width: var(--measure);
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--space-64);
    padding-top: var(--space-48);
    border-top: 1px solid var(--color-border);
}

.nav-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-32);
    margin-bottom: var(--space-32);
}

.nav-previous,
.nav-next {
    padding: var(--space-24);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-16);
    transition: background-color var(--duration) var(--easing);
}

.nav-previous:hover,
.nav-next:hover {
    background-color: var(--color-bg-section);
}

.nav-next {
    text-align: right;
}

.nav-label {
    display: block;
    font-size: var(--fs-caption);
    color: var(--color-text-sub);
    margin-bottom: var(--space-8);
}

.nav-previous a,
.nav-next a {
    color: var(--color-text);
    font-weight: 700;
    text-decoration: none;
}

/* Back to list: 1行40字ルール (design-system §③) */
.back-to-list {
    max-width: var(--measure);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ============================================
   404 Error Page
============================================ */
.page-404 {
    padding: var(--space-64) 0;
    text-align: center;
}

.error-content {
    max-width: var(--measure);
    margin: 0 auto;
}

.error-title {
    font-size: var(--fs-h1);
    font-family: var(--font-heading);
    font-weight: 400;
    color: var(--sky-800);
    line-height: 1;
    margin-bottom: var(--space-16);
}

.error-subtitle {
    color: var(--color-text);
    margin-bottom: var(--space-16);
}

.error-message {
    color: var(--color-text-muted);
    margin-bottom: var(--space-48);
    font-size: var(--fs-body);
}

.error-links {
    display: flex;
    gap: var(--space-16);
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================
   Default Page
============================================ */
.page-default {
    padding: var(--space-64) 0;
    background-color: var(--color-bg);
}

.page-default .entry-content {
    max-width: var(--measure);
    margin: 0 auto;
}

/* ============================================
   News Archive Page - お知らせ一覧
============================================ */
.page-news {
    padding: var(--space-64) 0;
    background-color: var(--color-bg);
}

/* Top Page News Section (inherits .section padding) */
/* .news-section uses .section styles */

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-32);
    margin-bottom: var(--space-48);
}

.news-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.news-card-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--radius-16) var(--radius-16) 0 0;
}

.news-card-body {
    padding: var(--space-24);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.news-card-date {
    font-size: var(--fs-caption);
    color: var(--color-text-muted);
}

.news-card-title {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 700;
    color: var(--color-text);
    flex: 1;
}

.news-card-title a {
    color: inherit;
    text-decoration: none;
}

.news-card-title a:hover {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.news-card-excerpt {
    font-size: var(--fs-body);
    color: var(--color-text-sub);
    line-height: var(--lh-body);
}

/* ============================================
   News Single Page - お知らせ詳細
============================================ */
.single-news {
    padding: var(--space-64) 0;
    background-color: var(--color-bg);
}

.news-detail {
    max-width: var(--measure);
    margin: 0 auto;
}

.news-thumbnail {
    margin-bottom: var(--space-48);
    border-radius: var(--radius-16);
    overflow: hidden;
}

.news-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.news-header {
    margin-bottom: var(--space-48);
    text-align: center;
}

.news-title {
    color: var(--color-text);
    margin-bottom: var(--space-16);
}

.news-date {
    color: var(--color-text-muted);
    font-size: var(--fs-caption);
}

.news-content {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    margin-bottom: var(--space-64);
}

/* ============================================
   Posts Navigation (archive pagination)
============================================ */
.posts-navigation {
    text-align: center;
    padding: var(--space-32) 0;
}

.posts-navigation .nav-links {
    display: flex;
    justify-content: center;
    gap: var(--space-24);
    flex-wrap: wrap;
}

.posts-navigation .nav-links a {
    color: var(--color-link);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* ============================================
   Top Page SNS - PC (min-width: 768px)
   PC: SNS リンクを横1列4枚均等に (spec §2.1 #134)
============================================ */
@media (min-width: 768px) {
    /* SNS リンクグリッド: PC=4列×1行 */
    .sns-placeholder {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ============================================
   Concert Detail - PC (min-width: 768px)
   Switch to 2-col layout; show sidebar guide, hide mobile guide
============================================ */
@media (min-width: 768px) {
    /* 2-col body: sidebar first in DOM, row-reverse puts flyer on left visually */
    /* spec §2.5 — PC: チラシ左・情報右。DOM順: sidebar先 (a11y/tab順 = 視覚順) */
    .concert-body--has-flyer {
        flex-direction: row-reverse;
        align-items: flex-start;
        gap: var(--space-48);
    }

    /* Flyer: visual left (row-reverse puts last DOM child on left), ~40% of body */
    .concert-flyer {
        flex: 0 0 40%;
        width: auto;
        align-self: flex-start;
    }

    /* Sidebar: visual right (row-reverse puts first DOM child on right), remaining space */
    .concert-sidebar {
        flex: 1 1 0;
        min-width: 0;
    }

    /* No-flyer: sidebar spans full width (spec §2.5 — チラシ未設定→情報を全幅) */
    .concert-body:not(.concert-body--has-flyer) .concert-sidebar {
        max-width: var(--measure);
        margin: 0 auto;
    }

    /* Show guide+CTA in sidebar on PC */
    .concert-sidebar-guide {
        display: block;
        margin-top: var(--space-32);
    }

    /* Hide the mobile guide+CTA block on PC */
    .concert-guide-mobile {
        display: none;
    }
}

/* ============================================
   Responsive - Mobile (max-width: 767px)
============================================ */
@media (max-width: 767px) {
    /* Concert Archive */
    .page-concert .page-title {
        font-size: var(--fs-h1);
    }

    /* Nav links: single column on mobile */
    .nav-links {
        grid-template-columns: 1fr;
    }

    .concert-program-section {
        padding: var(--space-24);
    }

    .error-links {
        flex-direction: column;
        align-items: center;
    }

    /* Page sections */
    .page-contact,
    .page-concert,
    .single-concert,
    .page-default,
    .sns-section,
    .page-404 {
        padding: var(--space-48) 0;
    }

    /* Recruit page: title area + section bands use space-48 on SP */
    .page-recruit > .container {
        padding-top: var(--space-48);
    }

    /* About page mobile: header area + each section use space-48 */
    .page-about > .container {
        padding-top: var(--space-48);
    }

    .about-section,
    .recruit-band-section {
        padding: var(--space-48) 0;
    }

    /* Mobile: revert to single-column — text then image stacked (spec §2.2) */
    .about-section-body--has-image {
        display: block;
    }

    .about-section .about-image {
        margin-top: var(--space-32);
    }

    .news-grid {
        grid-template-columns: 1fr;
    }

    .single-news,
    .page-news {
        padding: var(--space-48) 0;
    }
}