/* ============================================================
   2026 夏日探索計劃 Landing
   ------------------------------------------------------------
   色票 / 圓角 tokens 在 css/tokens.css（prefix: --sc-*）。
   對應 utility class 在 css/utilities.css（活動色 token-backed）。
   ============================================================ */

/* ============================================================
   Section 1 — Hero
   ============================================================ */
.sc-hero {
    aspect-ratio: 393 / 576;
}

/* Mobile baseline 393×576（design 1:1 對位） */
.sc-hero__maintext {
    left: 4.07%;
    top: 8.85%;
    width: 91.71%;
}

.sc-hero__bird {
    left: 11.45%;
    top: 9.72%;
    width: 9.41%;
}

.sc-hero__balloon {
    left: 74.30%;
    top: 3.30%;
    width: 13.49%;
}

.sc-hero__cloud--tr {
    right: -0.76%;
    top: 4.86%;
    width: 12.21%;
}
.sc-hero__cloud--ml {
    left: -0.51%;
    top: 15.10%;
    width: 10.94%;
}
.sc-hero__cloud--bl {
    left: 18.07%;
    top: 73.44%;
    width: 10.18%;
}

.sc-hero__tagline {
    top: 33.33%;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 3px 4px 0 var(--sc-c-sky-vivid);
}

.sc-hero__desc {
    top: 39.76%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 90%;
}
.sc-hero__desc p + p {
    margin-top: 1.5em;
}

.sc-hero__village {
    left: 0;
    top: 72.92%;
}

/* Tablet overrides 834×760（design 1:1 對位） */
@media (min-width: 768px) {
    .sc-hero {
        aspect-ratio: 834 / 760;
    }
    .sc-hero__maintext {
        left: 50%;
        top: 6.32%;
        transform: translateX(-50%);
        width: 50.12%;
    }
    .sc-hero__bird {
        left: 10.79%;
        top: 13.82%;
        width: 9.35%;
    }
    .sc-hero__balloon {
        left: 74.34%;
        top: 5%;
        width: 13.43%;
    }
    .sc-hero__cloud--tr {
        right: -0.60%;
        top: 6.97%;
        width: 11.99%;
    }
    .sc-hero__cloud--ml {
        left: 0;
        top: 22.50%;
        width: 10.55%;
    }
    .sc-hero__cloud--bl {
        left: 18.46%;
        top: 58.95%;
        width: 10.07%;
    }
    .sc-hero__tagline {
        top: 28.55%;
    }
    .sc-hero__desc {
        top: 36.97%;
        max-width: 60%;
    }
    .sc-hero__village {
        top: 56.32%;
    }
}

/* Desktop overrides 1920×1512（design 1:1 對位） */
@media (min-width: 992px) {
    .sc-hero {
        aspect-ratio: 1920 / 1512;
    }
    .sc-hero__maintext {
        left: 50%;
        top: 5.29%;
        transform: translateX(-50%);
        width: 50.23%;
    }
    .sc-hero__bird {
        left: 10.47%;
        top: 10.38%;
        width: 9.38%;
    }
    .sc-hero__balloon {
        left: 74.32%;
        top: 2.18%;
        width: 13.39%;
    }
    .sc-hero__cloud--tr {
        right: -0.31%;
        top: 4.43%;
        width: 12.19%;
    }
    .sc-hero__cloud--ml {
        left: -0.36%;
        top: 20.50%;
        width: 10.83%;
    }
    .sc-hero__cloud--bl {
        left: 18.18%;
        top: 51.13%;
        width: 10.26%;
    }
    .sc-hero__tagline {
        top: 30.62%;
    }
    .sc-hero__desc {
        top: 38.10%;
        max-width: 50%;
    }
    .sc-hero__village {
        top: 49.60%;
    }
}

/* ============================================================
   Section 2 — Features (今年夏天就到 TOVA)
   ============================================================ */
.sc-features {
    padding-top: clamp(48px, 5.88vw, 113px);
}

/* PC 上把 sc-features 的 container 拉寬到設計值（不影響全站 .container） */
@media (min-width: 992px) {
    .sc-features .container {
        max-width: 1412px;
    }
    .sc-features__grid {
        --bs-gutter-x: 3rem;
    }
}

.sc-hero__tagline,
.sc-features__title,
.sc-weeks__title,
.sc-week-card__title,
.sc-week-card__date {
    -webkit-text-stroke: 2px var(--sc-c-ink);
    paint-order: stroke fill;
}
.sc-feature__icon {
    height: clamp(80px, 11vw, 180px);
}

.sc-feature__heading {
    margin: 0.7em 0 0.4em;
}

.sc-feature__body {
    max-width: 80%;
}

/* ============================================================
   Section 3 — Weeks (主題總覽 × 8 卡片)
   ============================================================ */
.sc-weeks {
    padding-top: 5.92vw;
}

.sc-weeks__grid {
    margin-top: calc(3.5vw - var(--bs-gutter-y, 0));
}

.sc-week-card {
    color: inherit;
    transition: transform 0.25s ease;
}

.sc-week-card__window {
    aspect-ratio: 364 / 224;
    border-radius: var(--sc-radius-lg);
    padding: 5px;
}
.sc-week-card__window::after {
    content: "";
    position: absolute;
    inset: 5px;
    background: var(--sc-c-sky-tint);
    border-radius: var(--sc-radius-md);
    pointer-events: none;
    transition: background-color 0.25s ease;
}
.sc-week-card__cover {
    border-radius: var(--sc-radius-md);
    transition: transform 0.4s ease;
}

.sc-week-card__cta {
    width: calc(100% - 32px);
    padding: 12px 8px;
    line-height: 18px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Hover / focus 互動：整張卡片上浮、圖片輕微放大、CTA 變深 */
@media (hover: hover) {
    .sc-week-card:hover {
        transform: translateY(-6px);
    }
    .sc-week-card:hover .sc-week-card__cover {
        transform: scale(1.06);
    }
    .sc-week-card:hover .sc-week-card__window::after {
        background: transparent;
    }
    .sc-week-card:hover .sc-week-card__cta {
        background: var(--sc-c-lime-deep);
        transform: translateY(-2px);
    }
}

.sc-week-card:focus-visible {
    outline: 3px solid var(--sc-c-ink);
    outline-offset: 4px;
    border-radius: var(--sc-radius-lg);
}

@media (prefers-reduced-motion: reduce) {
    .sc-week-card,
    .sc-week-card__cover,
    .sc-week-card__window::after,
    .sc-week-card__cta {
        transition: none;
    }
    .sc-week-card:hover,
    .sc-week-card:hover .sc-week-card__cover,
    .sc-week-card:hover .sc-week-card__cta {
        transform: none;
    }
}

.sc-weeks__bg {
    margin-top: 5vw;
}

/* ============================================================
   Section 4 — CTA (加入官方 LINE)
   ============================================================ */
.sc-cta {
    padding-top: clamp(83px, 8.6vw, 165px);
}

.sc-cta__title-1,
.sc-cta__title-2 {
    -webkit-text-stroke: 4px var(--sc-c-ink);
    paint-order: stroke fill;
}

.sc-cta__title-2 {
    margin: clamp(23px, 7vw, 137px) 0 0;
}

.sc-cta__btn {
    margin-top: clamp(15px, 6.77vw, 130px);
    width: 245px;
    padding: 20px 8px;
    color: inherit;
    line-height: 18px;
}

/* Tablet 中段精調（clamp 線性插值對不到設計值） */
@media (min-width: 768px) and (max-width: 991px) {
    .sc-cta__title-2 { margin-top: 75px; }
    .sc-cta__btn { margin-top: 33px; }
}

@media (min-width: 992px) {
    .sc-cta__btn { width: 320px; }
}

.sc-cta__bg {
    margin-top: 3vw;
}