sechskies/assets/css/tablet.css

/* iPad／平板 RWD — max-width ≤1180px（含 iPad 直／橫與小平板／小筆電） */

/* 頂欄漢堡：與 style.css 992 斷點一致，避免本檔 1180 規則把選單列壓回橫排 */
@media (max-width: 991px) {

    .portal-nav>ul {
        flex: none;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
    }

    .portal-nav>ul>li>a {
        flex-direction: row;
    }
}

@media (max-width: 1180px) {

    html:has(.portal-nav) {
        scroll-padding-top: clamp(52px, 12vw, 76px);
    }

    nav:not(.portal-nav) {
        padding-left: clamp(14px, 2vw + 10px, 32px) !important;
        padding-right: clamp(14px, 2vw + 10px, 32px) !important;
    }

    .portal-nav {
        padding-left: clamp(14px, 2vw + 10px, 32px) !important;
        padding-right: clamp(14px, 2vw + 10px, 32px) !important;
        row-gap: 12px;
        flex-wrap: wrap;
        align-items: center;
    }

    .portal-nav>ul {
        align-items: center;
    }

    .portal-nav .logo {
        width: min(240px, 38vw);
        max-width: 100%;
        flex-shrink: 0;
    }

    .portal-nav>ul {
        flex-wrap: wrap;
        gap: clamp(12px, 2vw, 18px);
        justify-content: flex-end;
        min-width: 0;
        flex: 1 1 280px;
    }

    .portal-nav>ul>li>a {
        min-height: 44px;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    nav:not(.portal-nav):not(.bilivideo-episode-nav) ul {
        gap: clamp(12px, 2vw, 20px);
    }

    header {
        background-size: cover;
        background-position: center center;
    }

    header#origin .hero .site-header-inner .main-title {
        font-size: clamp(1.75rem, 2.25vw + 1rem, 2.35rem);
    }

    .hero p {
        font-size: clamp(1rem, 1.5vw + 0.65rem, 1.15rem);
    }

    .container,
    .content-container {
        padding-left: clamp(14px, 1.5vw + 10px, 22px);
        padding-right: clamp(14px, 1.5vw + 10px, 22px);
    }

    .home-page .container {
        padding-left: clamp(14px, 1.5vw + 10px, 22px);
        padding-right: clamp(14px, 1.5vw + 10px, 22px);
    }

    section {
        padding: clamp(26px, 3vw + 18px, 36px) clamp(16px, 2.5vw + 12px, 28px) !important;
    }

    .story-grid {
        gap: clamp(18px, 4vw, 28px);
        grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    }

    .card {
        padding: clamp(18px, 4vw, 26px);
    }

    table {
        font-size: 0.92rem;
    }

    table th,
    table td {
        padding: clamp(10px, 2vw, 14px);
    }

    /* 首頁／跨時空軌跡：鑽石主軸在平板改左側縱線（對齊舊 ≤900px 邏輯） */
    .merged-storyline::before {
        left: 18px;
        transform: none;
    }

    .merged-storyline .story-node {
        width: calc(100% - 44px);
        margin-left: 44px;
        margin-right: 0;
    }

    .merged-storyline .story-node:nth-of-type(odd),
    .merged-storyline .story-node:nth-of-type(even) {
        margin-left: 44px;
        margin-right: 0;
    }

    .merged-storyline .story-node::before {
        left: -39px;
        right: auto;
    }

    .merged-storyline .story-node::after,
    .merged-storyline .story-node:nth-of-type(odd)::after,
    .merged-storyline .story-node:nth-of-type(even)::after {
        left: 14px;
        right: auto;
        top: -14px;
        transform: rotate(-8deg);
    }

    .merged-storyline .story-node:nth-of-type(odd)::before,
    .merged-storyline .story-node:nth-of-type(even)::before {
        left: -39px;
        right: auto;
    }

    .merged-storyline .story-node:nth-of-type(odd),
    .merged-storyline .story-node:nth-of-type(even) {
        margin-top: 28px;
    }

    /* 紀實長卷／pillar 段落 */
    .chronicle-reader,
    .chronicle-pager {
        max-width: min(920px, 100%);
    }

    .variety-block {
        padding: clamp(18px, 4vw, 22px);
    }

    .site-header-inner .main-title {
        letter-spacing: clamp(3px, 1vw, 6px);
    }

    .map-layout {
        grid-template-columns: minmax(280px, 42%) minmax(0, 1fr);
        gap: clamp(16px, 3vw, 22px);
    }

    .map-my-maps-frame {
        height: min(52vh, 520px);
        min-height: 360px;
    }

    .map-embed-all {
        gap: 12px;
    }

    /* 重逢區兩張演唱會大卡之間留白 */
    #stage-now {
        gap: clamp(36px, 5vw, 50px);
    }

    /* 演唱會卡片內距 */
    .con-1,
    .con-2,
    .con-3,
    .con-4,
    #yellownote-stage {
        padding: clamp(32px, 5vw, 44px) clamp(22px, 5vw, 48px) !important;
    }

    .title {
        margin: clamp(24px, 5vw, 40px) !important;
        font-size: clamp(1.15rem, 2.8vw, 1.45rem);
    }

    .concert-container {
        padding-left: clamp(12px, 3vw, 20px);
        padding-right: clamp(12px, 3vw, 20px);
    }

    .search-input:focus {
        max-width: 100%;
    }

    .concert-page .search-input:focus {
        width: min(100%, 440px);
    }

    .concert-page img[src*="assets/images/concert/"] {
        width: min(560px, 88%);
        max-width: 100%;
    }

    /* 歌詞頁 */
    body.lyrics-page {
        margin: clamp(24px, 5vw, 56px) !important;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    html:has(body.lyrics-page) {
        font-size: 118.75% !important;
    }

    body.lyrics-page .lyrics-main-table {
        border-spacing: clamp(12px, 3vw, 24px) !important;
        max-width: 100%;
    }

    body.lyrics-page .main-left {
        width: 100% !important;
        display: block;
        box-sizing: border-box;
    }

    body.lyrics-page .lyrics-main-table p {
        font-size: 1.2rem !important;
        max-width: none;
    }

    body.lyrics-page h1 {
        font-size: clamp(1.6rem, 5vw, 2.1rem) !important;
    }
}