/* =========================================================
   component-detail.css V2
   ใช้กับ component1.php / component2.php
   โหลดหลัง assets/css/index.css
   เป้าหมาย: หน้าไม่ล้นจอ การ์ดไม่ถูกตัด และดูโปร่งขึ้น
========================================================= */

.component-detail-page {
    --detail-max: 1220px;
    --detail-gap: clamp(12px, 1.6vw, 20px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--detail-gap);
}

/* ---------- Header ---------- */

.component-detail-head,
.component-detail-layout {
    position: relative;
    z-index: 6;
    width: min(var(--detail-max), 100%);
    margin-inline: auto;
}

.component-detail-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 8px 18px;
    border-radius: 999px;
    color: #0b2347;
    background: linear-gradient(135deg, var(--gold), #fff2ad);
    box-shadow: 0 12px 28px rgba(245, 197, 66, .18);
    font-weight: 900;
}

.component-detail-title {
    display: block;
    margin: 12px 0 8px;
    font-family: "Chonburi", "Noto Sans Thai", serif;
    font-size: clamp(2.4rem, 4vw, 4.55rem);
    line-height: 1.08;
    letter-spacing: -1.2px;
    color: transparent;
    background: linear-gradient(100deg, #071f4b 10%, #0b2347 34%, #126bd6 50%, #0b2347 66%, #071f4b 90%);
    background-size: 260% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: titleLight 5.5s ease-in-out infinite;
}

.component-detail-desc {
    max-width: 1080px;
    margin: 0;
    color: rgba(11, 35, 71, .82);
    font-size: clamp(.94rem, .98vw, 1.08rem);
    font-weight: 650;
    line-height: 1.62;
}

/* ---------- Layout ---------- */

.component-detail-layout {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
    gap: clamp(16px, 2vw, 28px);
    align-items: stretch;
}

/* ---------- Summary ---------- */

.component-detail-summary,
.criteria-card {
    position: relative;
    min-width: 0;
    border-radius: 30px;
    background:
        radial-gradient(circle at 12% 8%, rgba(245, 197, 66, .22), transparent 36%),
        radial-gradient(circle at 88% 92%, rgba(18, 136, 248, .18), transparent 42%),
        linear-gradient(135deg, rgba(255, 255, 255, .76), rgba(255, 255, 255, .32));
    border: 1px solid rgba(255, 255, 255, .66);
    box-shadow:
        0 22px 58px rgba(7, 35, 71, .10),
        inset 0 1px 0 rgba(255, 255, 255, .46);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    overflow: hidden;
}

.component-detail-summary::before,
.criteria-card::before {
    content: "";
    position: absolute;
    inset: -58%;
    z-index: -1;
    background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .30) 50%, transparent 58%);
    transform: translateX(-62%) rotate(8deg);
    animation: cardShine 7s ease-in-out infinite;
}

.component-detail-summary {
    padding: clamp(20px, 2vw, 28px);
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
}

.component-detail-summary .summary-label {
    display: inline-flex;
    margin-bottom: 10px;
    color: var(--blue-dark);
    font-weight: 900;
}

.component-detail-summary .summary-number {
    width: 132px;
    height: 132px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    border-radius: 50%;
    color: #fff;
    font-family: "Chonburi", "Noto Sans Thai", serif;
    font-size: clamp(3.4rem, 5vw, 4.8rem);
    line-height: 1;
    background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    box-shadow: 0 20px 48px rgba(7, 94, 200, .22);
}

.component-detail-summary .summary-text {
    margin: 0;
    color: rgba(11, 35, 71, .82);
    font-weight: 900;
    line-height: 1.58;
}

.component-detail-summary .summary-text strong {
    color: var(--blue-dark);
}

/* ---------- Criteria cards ---------- */

.criteria-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(112px, 1fr);
    gap: 12px;
}

.criteria-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 14px;
    row-gap: 5px;
    align-content: center;
    padding: 16px 18px;
    color: var(--dark);
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}

.criteria-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 28px 72px rgba(7, 94, 200, .17),
        inset 0 1px 0 rgba(255, 255, 255, .52);
}

.criteria-no {
    grid-row: 1 / 4;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    align-self: start;
    border-radius: 18px;
    color: var(--blue-dark);
    background: rgba(245, 197, 66, .34);
    font-weight: 900;
    white-space: nowrap;
}

.criteria-card h2 {
    margin: 0;
    color: #0b2347;
    font-size: clamp(1rem, 1.18vw, 1.28rem);
    line-height: 1.32;
    font-weight: 900;
}

.criteria-card p {
    margin: 0;
    color: rgba(11, 35, 71, .76);
    font-size: clamp(.88rem, .92vw, .98rem);
    font-weight: 700;
    line-height: 1.48;
}

.criteria-card strong {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    color: var(--blue-dark);
    font-size: .95rem;
    font-weight: 900;
}

/* ---------- Slide controls ---------- */

.slide-controls a.btn-main,
.slide-controls a.btn-outline {
    width: 42px;
    height: 42px;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 1.45rem;
    line-height: 1;
}

/* ---------- Responsive ---------- */

@media (max-width: 1366px) {
    .component-detail-title {
        font-size: clamp(2.25rem, 3.65vw, 4.05rem);
    }

    .component-detail-desc {
        line-height: 1.56;
    }

    .component-detail-layout {
        grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    }

    .criteria-grid {
        grid-auto-rows: minmax(104px, 1fr);
        gap: 11px;
    }

    .criteria-card {
        padding: 14px 16px;
    }

    .criteria-no {
        width: 50px;
        height: 50px;
        border-radius: 16px;
    }
}

@media (max-width: 1180px) {
    .component-detail-page {
        min-height: 100vh;
    }

    .component-detail-layout {
        grid-template-columns: 1fr;
    }

    .component-detail-summary {
        min-height: 210px;
    }

    .criteria-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
    }
}

@media (max-width: 760px) {
    .criteria-grid {
        grid-template-columns: 1fr;
    }

    .criteria-card {
        grid-template-columns: 1fr;
    }

    .criteria-no {
        grid-row: auto;
    }

    .component-detail-summary .summary-number {
        width: 124px;
        height: 124px;
    }
}