/* Tabment */
div.module[type="tabment"] .tab-content div[data-tab] { display: none }
div.module[type="tabment"] .tab-content div.active { display: block }

/* Table (Specifications) */
div.module[type="specs"] { width: 100% }
div.module[type="specs"] .row { display: flex; padding: 40px 0; border-bottom: 1px solid #DDD }
div.module[type="specs"] .row:last-child { border-bottom: none }

div.module[type="specs"] .spec-category {
    width: 32%;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01rem;
    padding-right: 40px;
}
div.module[type="specs"] .spec-content { width: 68% }

div.module[type="specs"] .spec-model {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin-bottom: 8px;
}

div.module[type="specs"] .spec-details,
div.module[type="specs"] .spec-list li,
div.module[type="specs"] .spec-configurable { font-family: 'Maison Neue', sans-serif }

div.module[type="specs"] .spec-details {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-main);
}

div.module[type="specs"] .spec-list { margin: 12px 0 0 0; padding-left: 0; list-style: none }
div.module[type="specs"] .spec-list li {
    position: relative;
    font-size: .9rem;
    line-height: 1.6;
    list-style-type: '- ';
    margin-left: 10px;
}

div.module[type="specs"] .spec-configurable { line-height: 1.5; font-size: 0.8rem; margin-top: 16px }

div.module[type="specs"] .two-col-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 48px;
    row-gap: 24px;
}

@media (max-width: 734px) {
    div.module[type="specs"] .row { flex-direction: column; padding: 24px 0 }
    div.module[type="specs"] .spec-category {
        width: 100%;
        font-size: 1.3rem;
        font-weight: 300;
        margin-bottom: 20px;
        padding-right: 0;
    }
    div.module[type="specs"] .spec-content { width: 100% }
    div.module[type="specs"] .two-col-layout { grid-template-columns: 1fr; row-gap: 24px }
    div.module[type="specs"] .spec-model { font-size: 1.1rem }
    div.module[type="specs"] .spec-details,
    div.module[type="specs"] .spec-list li { font-size: 0.9rem }
}

/* Slideshow */
div.module[type="slideshow"] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    border-radius: 10px;
    background-color: #E76A15;
    padding: 50px 45px;
    overflow: hidden;
}

div.module[type="slideshow"] .bg-layer {
    position: absolute;
    top: 0; left: 638px;
    height: 100%;
    aspect-ratio: 1000 / 545;
    background: url('../img/home_feature/slideshow/horizontal_bg.png') no-repeat right bottom / contain;
    z-index: 0;
}

div.module[type="slideshow"] .bg-layer .mask {
    position: absolute;
    left: 2px;
    width: 393.5px;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    clip-path: polygon(15.5% 0, 100% 0, 84.5% 100%, 0 100%);
    -webkit-clip-path: polygon(15.5% 0, 100% 0, 84.5% 100%, 0 100%);
    transition: opacity .7s ease-in-out;
    opacity: 1;
}
div.module[type="slideshow"] .bg-layer .mask.fade-out { opacity: 0 }

div.module[type="slideshow"] .text-panel { display: flex; flex-direction: column; justify-content: space-between; width: 50%; height: 250px; z-index: 1 }
div.module[type="slideshow"] .text-panel h2 {
    color: #FFF;
    line-height: 1.2em;
    font-size: 2.5rem;
    transition: opacity .5s ease, transform .7s ease-in-out;
    transform: translateY(0);
    opacity: 1;
}
div.module[type="slideshow"] .text-panel h2.slide-exit { opacity: 0 }
div.module[type="slideshow"] .text-panel h2.slide-entry { opacity: 0; transform: translateY(15px); transition: none }
div.module[type="slideshow"] .text-panel h3 { color: #FFF; font-size: 1.15rem; font-family: 'Maison Neue', sans-serif }

div.module[type="slideshow"] .btn-panel { display: flex; gap: 20px; align-items: center; margin-bottom: -8px; margin-right: 20px; z-index: 1 }
div.module[type="slideshow"] .btn-panel .ctrl {
    cursor: pointer;
    position: relative;
    width: 45px;
    height: 45px;
    border-radius: 100%;
    border: 1px solid #CCC;
    background: #FFF;
}

div.module[type="slideshow"] .btn-panel .ctrl::before,
div.module[type="slideshow"] .btn-panel .ctrl::after { content: ''; position: absolute }

div.module[type="slideshow"] .btn-panel .ctrl::before {
    top: 14px; left: 16px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 15px solid #444;
}

div.module[type="slideshow"] .btn-panel .ctrl.paused::before,
div.module[type="slideshow"] .btn-panel .ctrl.paused::after {
    top: 14px;
    width: 5px;
    height: 16px;
    border: none;
    background: #444;
}
div.module[type="slideshow"] .btn-panel .ctrl.paused::before { left: 15px }
div.module[type="slideshow"] .btn-panel .ctrl.paused::after { left: 24px }

div.module[type="slideshow"] .btn-panel .ctrl:hover { outline: 4px solid rgba(255, 255, 255, .3) }

@media (max-width: 1280px) { div.module[type="slideshow"] .bg-layer { left: 600px } }
@media (max-width: 1180px) { div.module[type="slideshow"] .bg-layer { left: 500px } }

@media (max-width: 768px) {
    div.module[type="slideshow"] { flex-direction: column; align-items: flex-start; gap: 16px; padding: 320px 30px 30px 30px }

    div.module[type="slideshow"] .bg-layer { top: -31px; left: 30px; aspect-ratio: 2531 / 2668; background: url('../img/home_feature/slideshow/portrait_bg.png') no-repeat right bottom / contain }
    div.module[type="slideshow"] .bg-layer .mask {
        top: 13px; left: 15px;
        width: 232px;
        height: 275px;
        clip-path: none;
        -webkit-clip-path: none;
        transform: rotate(7deg);
    }

    div.module[type="slideshow"] .text-panel { width: 100%; height: auto }
    div.module[type="slideshow"] .text-panel h2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; height: 2.4em; font-size: 1.6rem; margin-bottom: 20px; overflow: hidden; text-overflow: ellipsis }
    div.module[type="slideshow"] .text-panel h3 { font-size: .95rem }
    div.module[type="slideshow"] .btn-panel { align-self: flex-start; margin-bottom: 0 }
    div.module[type="slideshow"] .btn-panel .ctrl { width: 38px; height: 38px }

    div.module[type="slideshow"] .btn-panel .ctrl::before { top: 11px; left: 12.5px }
    div.module[type="slideshow"] .btn-panel .ctrl.paused::before { top: 11px; left: 12px }
    div.module[type="slideshow"] .btn-panel .ctrl.paused::after { top: 11px; left: 20px }
}