/**
 * IM Academy – Structural / Utility Styles
 *
 * This file provides layout skeleton only.
 * Brand colours, typography, and spacing should be
 * defined in the active theme.
 *
 * @package IMacademy
 * @version 1.0.0
 */

/* ── Hidden (used by JS filter) ──────────────────────────────────────────── */
.is-hidden {
    display: none !important;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.im-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 4rem 1.5rem;
    text-align: center;
}

.im-hero__inner {
    max-width: 800px;
    margin: 0 auto;
}

.im-hero__title {
    font-size: clamp(1.75rem, 4vw, 3rem);
    margin-bottom: 0.5rem;
}

.im-hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    opacity: 0.85;
}

/* ── Generic Section Container ───────────────────────────────────────────── */
.im-academy-intro__inner,
.im-target-audience__inner,
.im-advantages__inner,
.im-courses__inner,
.im-featured-events__inner,
.im-cases__inner,
.im-insights__inner,
.im-faq__inner,
.im-cta-form__inner,
.im-archive-course__inner,
.im-archive-event__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
}

/* ── Button ───────────────────────────────────────────────────────────────── */
.im-btn {
    display: inline-block;
    padding: 0.6em 1.4em;
    border: 2px solid currentColor;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.im-btn--primary {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* ── Location Filter ──────────────────────────────────────────────────────── */
.im-location-filter,
.im-event-type-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 1.5rem 0;
    max-width: 1200px;
    margin: 0 auto;
}

.im-location-filter__btn,
.im-event-type-filter__btn {
    padding: 0.4em 1em;
    border: 1px solid #ccc;
    border-radius: 2em;
    background: transparent;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.im-location-filter__btn.is-active,
.im-event-type-filter__btn.is-active {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* ── Course / Event Lists ─────────────────────────────────────────────────── */
.im-courses__list,
.im-events__list,
.im-cases__list,
.im-insights__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
}

.im-courses__item,
.im-events__item,
.im-cases__item,
.im-insights__item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.im-courses__thumb,
.im-events__thumb,
.im-cases__thumb,
.im-insights__thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 4px;
}

/* ── Case Gallery ─────────────────────────────────────────────────────────── */
.im-case-gallery__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
}

.im-case-gallery__item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px;
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.im-faq__list {
    margin: 0;
    padding: 0;
}

.im-faq__question {
    font-weight: 700;
    margin-top: 1.25rem;
}

.im-faq__answer {
    margin: 0.25rem 0 0;
    padding-left: 1rem;
}

/* ── CTA Form Section ─────────────────────────────────────────────────────── */
.im-cta-form {
    text-align: center;
    padding: 2rem 0;
}

.im-cta-form__title {
    font-size: clamp(1.25rem, 3vw, 2rem);
}

/* ── Single Templates ─────────────────────────────────────────────────────── */
.im-single-course,
.im-single-event,
.im-single-insight,
.im-single-case {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.im-course-section,
.im-case-section {
    margin-top: 2.5rem;
}

.im-case-testimonial {
    border-left: 4px solid #ccc;
    margin: 2rem 0;
    padding: 1rem 1.5rem;
    font-style: italic;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
    .im-courses__list,
    .im-events__list,
    .im-cases__list,
    .im-insights__list {
        grid-template-columns: 1fr;
    }
}

/* ── 廣告 LP 共用模組（Phase A：假導覽列 / 懸浮 CTA / 聯絡表單容器）──────────────
   CSS 結構取自舊站真實廣告頁原始碼（11_intake/old-site/廣告落地頁真品/課程資訊/
   美業微刺青 EMTATTOO/...-ad.html 的 .ad-header / .floating-cta-*），
   class 名稱改為 im-lp-* 前綴避免跟站內其他樣式衝突。只套用在 lp CPT 頁面。 */

/* 假導覽列 */
.im-lp-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
    border-bottom: 3px solid var(--im-blush, #f7c8d0);
    padding: 10px 20px;
}
.im-lp-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 40px;
    padding: 0 20px;
}
.im-lp-logo { text-align: center; }
.im-lp-logo img { height: 45px; width: auto; }
.im-lp-badges {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.im-lp-badge {
    display: inline-block;
    font-size: 14px;
    color: #333;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: .5px solid var(--im-blush, #f7c8d0);
    padding: 5px 15px 3px;
}
/* im-lp-main 是 single-lp.html／page-lp-blank.html 範本本來就有的外層容器，
   假導覽列用 fixed 定位蓋在最上層，這裡加內距讓內容不會被蓋住。 */
.im-lp-main { padding-top: 60px; }

@media ( max-width: 768px ) {
    .im-lp-header { padding: 8px 10px; }
    .im-lp-header__inner {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 5px 15px;
        padding: 0;
        width: fit-content;
        margin: 0 auto;
    }
    .im-lp-logo { grid-column: 1; grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; }
    .im-lp-badges { grid-column: 2; flex-wrap: nowrap; gap: 8px; justify-content: flex-start; }
    .im-lp-badges--left { grid-row: 1; }
    .im-lp-badges--right { grid-row: 2; }
    .im-lp-badge { padding: 3px 8px; font-size: 12px; }
    .im-lp-main { padding-top: 50px; }
}

/* 懸浮 CTA：LINE 諮詢 / 領取課表 / 回到頂部 */
.im-lp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
}
.im-lp-float__btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    transition: all .3s ease;
    font-size: 24px;
    color: #fff;
}
.im-lp-float__btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}
.im-lp-float__btn--line { background: linear-gradient(135deg, #06C755 0%, #00B900 100%); }
.im-lp-float__btn--schedule { background: linear-gradient(135deg, #f7c8d0 0%, #e6a9b3 100%); }
.im-lp-float__btn--totop { background: linear-gradient(135deg, #666 0%, #444 100%); }

@media ( max-width: 768px ) {
    .im-lp-float__btn { width: 50px; height: 50px; font-size: 22px; }
}

/* 共用聯絡表單容器 */
.im-lp-contact {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 20px;
    scroll-margin-top: 80px;
}
.im-lp-contact__loading {
    text-align: center;
    color: #999;
    padding: 40px;
}

/* ── 學院頁 Hero 輪播真實圖片（[im_academy_hero_gallery] 輸出的 <img>）──────────
   .mt-hero-slide / .mt-hero-carousel 本身的版面樣式在各學院 academy_custom_html
   自己的 <style> 區塊裡（每學院一份），這裡只補真實 <img> 標籤需要的填滿裁切樣式，
   讓它跟原本的 .mt-todo-img 佔位版面表現一致。 */
.mt-hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mt-course-img img,
.mt-faculty-img img,
.mt-env-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}