@charset "utf-8";

.course-hero-section {
    padding: 0;
    margin-bottom: 2.5rem; /* 40px */
}

.hero-grid {
    display: flex;
    gap: 2.5rem; /* 40px */
    align-items: start;
    max-width: 75rem; /* 1200px */
    margin: 0 auto;
    padding: 0 1.25rem; /* 20px */
    margin-top: 2.5rem; /* 40px */
}

/* 基礎容器 */
.product-img-container {
    /* 20px -> 1.25rem */
    width: calc(55% - 1.25rem);
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* 上方大圖區塊 */
.product-img-container .main-display {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem; /* 12px */
    position: relative;
    overflow: hidden;
    /* 原本即為 rem，保持不變 */
    box-shadow: 0 1.25rem 2.5rem rgba(0,0,0,0.5);
    border-radius: 0.625rem; /* 10px */
}

.product-img-container .main-display img {
    width: 100%;
    height: auto;
    background: white;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.product-img-container .main-display:hover img {
    transform: scale(1.05);
}

.course-info-card {
    /* 20px -> 1.25rem */
    width: calc(45% - 1.25rem);
    max-width: 100%;
}

.btn-buy-large {
    display: block;
    width: 100%;
    background-color: var(--primary-color);
    color: #fff;
    text-align: center;
    padding: 0.875rem; /* 14px */
    border-radius: 0.375rem; /* 6px */
    font-weight: bold;
    font-size: 1.125rem; /* 18px */
    margin-top: 1.25rem; /* 20px */
    text-decoration: none;
    transition: 0.3s;
}

.btn-buy-large:hover {
    filter: brightness(1.1);
}

html.Font-Large .btn-buy-large { font-size:calc( 1.125rem * 1.1 ); }
html.Font-Small .btn-buy-large { font-size:calc( 1.125rem * 0.9 ); }

/* RWD */
/* 媒體查詢斷點通常建議維持 px 或 em，這邊維持 px */
@media (max-width: 68.75rem) {
    .product-img-container {
        width: calc(50% - 1.25rem); /* 20px -> 1.25rem */
    }
    .course-info-card {
        width: calc(50% - 1.25rem); /* 20px -> 1.25rem */
    }
}

@media (max-width: 56.25rem) {
    .hero-grid {
        display: block;
        max-width: 37.5rem; /* 600px */
    }
    .product-img-container {
        width: 100%;
        margin-bottom: 2.5rem; /* 40px */
    }
    .course-info-card {
        width: 100%;
    }
}