/* =========================================================
   HOME THREE-CARD STRIP
   Upcoming Classes + Gallery + Parent Reviews
   Clean Professional Version
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.home-info-section{
    width:100%;
    padding:46px 0 62px;

    background:#f7fafc;

    box-sizing:border-box;
}


/* =========================================================
   MAIN CONTAINER
   Tighter than course carousel
========================================================= */

.home-info-section > .container{
    width:86%;
    max-width:1360px;

    margin:0 auto;

    padding:0 18px;

    box-sizing:border-box;
}


/* =========================================================
   MAIN GRID
========================================================= */

.home-info-grid{
    width:100%;

    display:grid;

    grid-template-columns:
        minmax(0,.95fr)
        minmax(0,1.08fr)
        minmax(0,1.20fr);

    gap:20px;

    align-items:stretch;
}


/* =========================================================
   MAIN CARD
========================================================= */

.home-info-card{
    width:100%;
    min-width:0;

    display:flex;
    flex-direction:column;

    padding:19px;

    border:1px solid #dfe8ed;
    border-radius:18px;

    background:#ffffff;

    box-shadow:
        0 8px 25px
        rgba(21,49,69,.055);

    box-sizing:border-box;
}


/* =========================================================
   CARD HEADER
========================================================= */

.home-info-title{
    display:flex;
    align-items:center;

    gap:8px;

    margin-bottom:15px;
}


.home-info-title > span{
    width:25px;
    height:25px;

    flex:0 0 25px;

    display:grid;
    place-items:center;

    border-radius:8px;

    background:#e8f7f8;
    color:#078d98;

    font-size:12px;

    font-weight:800;
}


.home-info-title strong{
    color:#087f8c;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Text",
        "Hind Madurai",
        "Segoe UI",
        sans-serif;

    font-size:12px;
    line-height:1.3;

    font-weight:800;

    letter-spacing:.05em;
}


/* =========================================================
   UPCOMING CLASS LIST
========================================================= */

.home-class-list{
    display:grid;
    gap:2px;

    flex:1;
}


.home-class-item{
    min-height:72px;

    display:grid;

    grid-template-columns:
        50px
        minmax(0,1fr);

    align-items:center;

    gap:12px;

    padding:8px 2px;

    border-bottom:1px solid #e9eff3;

    color:#1f2937;

    text-decoration:none;
}


.home-class-item:last-child{
    border-bottom:0;
}


.home-class-item:hover h3{
    color:#087f8c;
}


/* =========================================================
   CLASS DATE
========================================================= */

.home-class-date{
    min-height:52px;

    display:grid;
    place-items:center;

    padding:5px;

    border:1px solid #d9e4ea;
    border-radius:10px;

    background:#f7fafc;
}


.home-class-date strong{
    color:#153d70;

    font-size:17px;
    line-height:1;

    font-weight:800;
}


.home-class-date small{
    margin-top:3px;

    color:#4b5563;

    font-size:9px;

    font-weight:700;
}


/* =========================================================
   CLASS TEXT
========================================================= */

.home-class-item h3{
    margin:0;

    color:#173b67;

    font-size:13px;
    line-height:1.4;

    font-weight:750;

    transition:color .2s ease;
}


.home-class-item p{
    margin:4px 0 2px;

    color:#4b5563;

    font-size:10px;
    line-height:1.45;

    font-weight:500;
}


.home-class-item small{
    color:#6b7280;

    font-size:9px;
    line-height:1.4;

    font-weight:500;
}


/* =========================================================
   GALLERY TABS
========================================================= */

.home-gallery-tabs{
    display:flex;
    justify-content:center;

    gap:8px;

    margin:-2px 0 11px;
}


.home-gallery-tabs button{
    min-width:62px;

    padding:6px 12px;

    border:1px solid #d8e4e9;
    border-radius:8px;

    background:#ffffff;
    color:#4b5563;

    font-size:10px;

    font-weight:700;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}


.home-gallery-tabs button:hover{
    color:#087f8c;

    border-color:#8bcfd4;
}


.home-gallery-tabs button.is-active{
    background:#eaf8f9;

    border-color:#70c8ce;

    color:#087f8c;
}


/* =========================================================
   GALLERY PANEL
========================================================= */

.home-gallery-panel{
    min-width:0;
}


.home-gallery-panel[hidden]{
    display:none !important;
}


/* =========================================================
   GALLERY GRID
========================================================= */

.home-gallery-grid{
    width:100%;

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    grid-template-rows:
        repeat(2,112px);

    gap:8px;
}


.home-gallery-grid button{
    width:100%;
    height:100%;

    padding:0;

    overflow:hidden;

    border:0;
    border-radius:10px;

    background:#edf3f5;

    cursor:zoom-in;
}


.home-gallery-grid img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .28s ease;
}


.home-gallery-grid button:hover img{
    transform:scale(1.035);
}


/* =========================================================
   BOTTOM BUTTON
========================================================= */

.home-info-button{
    min-height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:7px;

    margin-top:auto;

    padding:9px 12px;

    border:1px solid #74c8cf;
    border-radius:9px;

    background:#ffffff;

    color:#087f8c;

    text-decoration:none;

    font-size:10px;

    font-weight:800;

    transition:
        background .2s ease,
        transform .2s ease;
}


.home-info-button:hover{
    background:#eefafa;

    transform:translateY(-1px);
}


/* =========================================================
   EMPTY STATE
========================================================= */

.home-info-empty{
    min-height:210px;

    display:grid;
    place-items:center;

    padding:20px;

    color:#4b5563;

    font-size:12px;
    line-height:1.6;

    font-weight:500;

    text-align:center;
}


/* =========================================================
   REVIEW CARD
========================================================= */

.review-card-old{
    background:#ffffff;
}


/* =========================================================
   REVIEW SHELL
========================================================= */

.old-review-shell{
    display:grid;

    grid-template-columns:
        32px
        minmax(0,1fr)
        32px;

    align-items:center;

    gap:8px;

    flex:1;
}


/* =========================================================
   REVIEW BOX
========================================================= */

.old-review-box{
    position:relative;

    min-height:230px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:27px 30px 23px;

    border:1px solid #dfe8ed;
    border-radius:14px;

    background:#ffffff;

    box-shadow:
        0 7px 20px
        rgba(20,52,73,.045);
}


.old-review-box > p{
    margin:13px 0 20px;

    color:#374151;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Text",
        "Hind Madurai",
        "Segoe UI",
        sans-serif;

    font-size:12px;
    line-height:1.75;

    font-weight:500;

    text-align:center;
}


/* =========================================================
   QUOTES
========================================================= */

.old-review-quote{
    position:absolute;

    color:#83d2d9;

    font-family:Georgia,serif;

    font-size:34px;
    line-height:1;
}


.old-review-quote.start{
    left:14px;
    top:9px;
}


.old-review-quote.end{
    right:14px;
    bottom:6px;
}


/* =========================================================
   REVIEW ARROWS
========================================================= */

.old-review-arrow{
    width:32px;
    height:32px;

    display:grid;
    place-items:center;

    padding:0;

    border:1px solid #dce6eb;
    border-radius:50%;

    background:#ffffff;
    color:#17466d;

    font-size:20px;

    cursor:pointer;

    transition:
        background .2s ease,
        border-color .2s ease;
}


.old-review-arrow:hover{
    background:#edfafa;

    border-color:#a8d8dc;
}


/* =========================================================
   REVIEW AUTHOR
========================================================= */

.old-review-author{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:11px;

    text-align:left;
}


.old-review-photo{
    width:44px;
    height:44px;

    flex:0 0 44px;

    display:grid;
    place-items:center;

    overflow:hidden;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #087f8c,
            #69c7ce
        );

    color:#ffffff;

    font-size:10px;

    font-weight:800;
}


.old-review-photo img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}


.old-review-author strong{
    display:block;

    color:#087f8c;

    font-size:11px;

    font-weight:800;
}


.old-review-author small{
    display:block;

    margin-top:2px;

    color:#4b5563;

    font-size:9px;

    font-weight:500;
}


.old-review-stars{
    margin-top:4px;

    color:#e69b14;

    font-size:11px;

    letter-spacing:1px;
}


/* =========================================================
   REVIEW DOTS
========================================================= */

.old-review-dots{
    display:flex;
    justify-content:center;

    gap:6px;

    margin-top:13px;
}


.old-review-dots span{
    width:5px;
    height:5px;

    border-radius:50%;

    background:#ccd7dd;
}


.old-review-dots span.is-active{
    background:#087f8c;
}


/* =========================================================
   LIGHTBOX
========================================================= */

#homeLightbox[hidden]{
    display:none !important;
}


#homeLightbox{
    position:fixed;

    inset:0;

    z-index:9999;

    display:grid;
    place-items:center;

    padding:30px;

    background:rgba(0,0,0,.86);

    backdrop-filter:blur(16px);
}


#homeLightbox img{
    display:block;

    max-width:94vw;
    max-height:84vh;

    object-fit:contain;

    border-radius:16px;

    box-shadow:
        0 24px 80px rgba(0,0,0,.42);
}


#homeLightbox > button{
    position:absolute;

    right:22px;
    top:18px;

    width:44px;
    height:44px;

    display:grid;
    place-items:center;

    padding:0;

    border:0;
    border-radius:50%;

    background:#ffffff;
    color:#222222;

    font-size:27px;

    cursor:pointer;
}


#homeLightbox p{
    position:absolute;

    left:20px;
    right:20px;
    bottom:22px;

    margin:0;

    color:#ffffff;

    font-size:13px;

    text-align:center;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media(min-width:1600px){

    .home-info-section > .container{
        width:82%;
        max-width:1380px;
    }

    .home-info-grid{
        grid-template-columns:
            minmax(0,.95fr)
            minmax(0,1.08fr)
            minmax(0,1.20fr);

        gap:22px;
    }

    .home-info-card{
        padding:20px;
    }

    .home-gallery-grid{
        grid-template-rows:
            repeat(2,118px);
    }

    .old-review-box{
        min-height:245px;
    }

}


/* =========================================================
   NORMAL DESKTOP
========================================================= */

@media(min-width:1200px) and (max-width:1599px){

    .home-info-section > .container{
        width:86%;
        max-width:1280px;
    }

    .home-info-grid{
        grid-template-columns:
            minmax(0,.95fr)
            minmax(0,1.06fr)
            minmax(0,1.17fr);

        gap:20px;
    }

}


/* =========================================================
   SMALL DESKTOP / TABLET
========================================================= */

@media(max-width:1050px){

    .home-info-section > .container{
        width:94%;
        max-width:none;

        padding:0 14px;
    }

    .home-info-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:16px;
    }

    .review-card-old{
        grid-column:1 / -1;
    }

    .old-review-box{
        min-height:220px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:720px){

    .home-info-section{
        padding:32px 0 50px;
    }

    .home-info-section > .container{
        width:100%;

        padding:0 16px;
    }

    .home-info-grid{
        grid-template-columns:1fr;

        gap:16px;
    }

    .review-card-old{
        grid-column:auto;
    }

    .home-gallery-grid{
        grid-template-rows:
            repeat(2,116px);
    }

    .old-review-box{
        min-height:220px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:430px){

    .home-info-card{
        padding:15px;
    }

    .home-gallery-grid{
        grid-template-rows:
            repeat(2,100px);
    }

    .old-review-shell{
        grid-template-columns:
            26px
            minmax(0,1fr)
            26px;
    }

    .old-review-arrow{
        width:26px;
        height:26px;

        font-size:17px;
    }

    .old-review-box{
        min-height:220px;

        padding:24px 20px 19px;
    }

    .old-review-box > p{
        font-size:11px;
    }

    .old-review-photo{
        width:40px;
        height:40px;

        flex-basis:40px;
    }

}