/**
 * IDOL TOKYO NEO
 * Responsive Layout & Grid System Styles
 */


/* ==========================================================================
   1. SECTION BASE PADDING & GRID LAYOUT (DESKTOP: 1600px / 1200px BASE)
   ========================================================================== */
.sec-pad {
    padding-top: 60px;
    padding-bottom: 60px;
    position: relative;
    box-sizing: border-box;
}


.cast-grid,
.schedule-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: var(--space-16);
    row-gap: 24px;
}


.review-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-24);
}


.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-24);
}


.grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-24);
}


/* ==========================================================================
   2. TABLET RESPONSIVE (BREAKPOINT: 1023px以下 / キャストカード4枚表示)
   ========================================================================== */
@media (max-width: 1023px) {
    .sec-pad {
        padding-top: 48px;
        padding-bottom: 48px;
    }


    .sec-title-en {
        font-size: 28px;
        line-height: 36px;
        letter-spacing: 6px;
    }


    .container {
        padding-left: var(--space-20);
        padding-right: var(--space-20);
    }


    .header-container {
        padding-left: var(--space-20);
        padding-right: var(--space-20);
    }


    .nav-menu {
        display: none;
    }


    .hamburger {
        display: block;
    }


    .hero {
        height: auto;
        min-height: 640px;
        padding-top: 100px;
        padding-bottom: 90px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }


    .hero-inner {
        position: relative;
        text-align: center;
    }


    .hero-catch-wrapper {
        width: 100%;
        max-width: 600px;
        padding: 0 var(--space-16);
        box-sizing: border-box;
        margin: 0 auto;
    }


    .hero-catch {
        font-size: 32px;
        line-height: 48px;
        letter-spacing: 4px;
        margin-bottom: var(--space-20);
        word-break: keep-all;
    }


    .hero-sub {
        font-size: 15px;
        letter-spacing: 4px;
        margin-bottom: var(--space-24);
    }


    .sp-fixed-bottom-bar {
        display: flex;
    }


    body {
        padding-bottom: 0;
    }


    /* タブレットサイズ：キャストカード4列表示 */
    .cast-grid,
    .schedule-grid {
        grid-template-columns: repeat(4, 1fr);
        column-gap: 12px;
        row-gap: 20px;
    }


    .review-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-16);
    }


    .form-grid,
    .grid-2col {
        grid-template-columns: 1fr;
        gap: var(--space-16);
    }


    .system-cards-container {
        justify-content: flex-start;
        margin: 0 calc(var(--space-20) * -1);
        padding: var(--space-24) var(--space-20);
    }


    .lc-card-wrapper {
        width: 380px;
    }


    .lc-cast-avatar-wrap {
        width: 130px;
    }


    .lc-carousel-container {
        height: 420px;
    }


    .scroll-container {
        padding: var(--space-16) var(--space-20) var(--space-24) var(--space-20);
        margin: 0 calc(var(--space-20) * -1);
    }
}


/* ==========================================================================
   3. SMALL TABLET & PHABLET (BREAKPOINT: 767px〜550px / キャストカード3列表示)
   ========================================================================== */
@media (max-width: 767px) {
    .sec-pad {
        padding-top: 36px;
        padding-bottom: 36px;
    }


    .container {
        padding-left: 12px;
        padding-right: 12px;
    }


    .header-container {
        padding-left: var(--space-16);
        padding-right: var(--space-16);
    }


    /* 767px〜550px：キャストカード3列表示へ最適化 */
    .cast-grid,
    .schedule-grid {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 10px;
        row-gap: 16px;
    }


    .review-grid {
        grid-template-columns: 1fr;
        gap: var(--space-16);
    }


    .hero {
        min-height: 520px;
        padding-top: 80px;
        padding-bottom: 80px;
    }


    .hero-catch-wrapper {
        max-width: 480px;
    }


    .hero-catch {
        font-size: 24px;
        line-height: 38px;
        letter-spacing: 2px;
        margin-bottom: var(--space-16);
        word-break: keep-all;
    }


    .hero-sub {
        font-size: 13px;
        letter-spacing: 3px;
        margin-bottom: var(--space-20);
    }


    .system-cards-container {
        margin: 0 -12px;
        padding: var(--space-16) 12px;
    }


    /* LAST CALL 3Dカルーセル スマホ最適化 (幅 330px 確保で文字崩れ防止) */
    .lc-card-wrapper {
        width: 330px;
    }


    .lc-cast-avatar-wrap {
        width: 105px;
    }


    .lc-carousel-container {
        height: 400px;
    }


    .scroll-container {
        padding: var(--space-12) 12px;
        margin: 0 -12px;
    }


    .diary-pho-wrapper.large {
        max-width: 100%;
    }


    .diary-pho-wrapper.large .pho-content-right {
        padding: var(--space-16);
    }


    .diary-pho-wrapper.large .diary-title {
        font-size: 15px;
        margin-bottom: 6px;
    }


    .diary-pho-wrapper.large .diary-desc {
        font-size: 11px;
        line-height: 17px;
        display: -webkit-box;
        display: box;
        -webkit-box-orient: vertical;
        box-orient: vertical;
        line-clamp: 3;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }


    .diary-meta {
        margin-bottom: 6px;
        padding-bottom: 4px;
        font-size: 10px;
    }


    .custom-nav-arrow-line {
        width: 28px;
    }


    .custom-nav-dots {
        gap: 6px;
    }


    .custom-nav-dot {
        width: 4px;
        height: 4px;
    }
}


/* ==========================================================================
   4. SP SPECIFIC (BREAKPOINT: 549px以下 / キャストカード2列表示 & 超小型端末対応)
   ========================================================================== */
@media (max-width: 549px) {
    /* 549px以下：キャストカード2列表示 */
    .cast-grid,
    .schedule-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 8px;
        row-gap: 14px;
    }


    .hero {
        min-height: 480px;
        padding-top: 70px;
        padding-bottom: 70px;
    }


    .hero-catch-wrapper {
        max-width: 320px;
        padding: 0 8px;
    }


    .hero-catch {
        font-size: 20px;
        line-height: 32px;
        letter-spacing: 1.5px;
        margin-bottom: var(--space-12);
    }


    .hero-sub {
        font-size: 12px;
        letter-spacing: 3px;
        margin-bottom: var(--space-16);
    }


    .sec-title-en {
        font-size: 22px;
        letter-spacing: 4px;
        line-height: 30px;
    }


    .sec-title-jp {
        font-size: 11px;
        letter-spacing: 1.5px;
    }


    .form-box {
        padding: var(--space-20) var(--space-12);
    }


    /* 549px〜小型スマホ用 LAST CALL カード幅 (310px確保で文字崩れ防止) */
    .lc-card-wrapper {
        width: 310px;
    }


    .lc-cast-avatar-wrap {
        width: 95px;
    }
}


/* ==========================================================================
   5. SPOKE FALLBACK CONTAINER (index.php 専用)
   ========================================================================== */
.spoke-fallback-container {
    padding: var(--space-80) var(--space-24);
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}