/* =========================================================
   HOME INFO SECTION
   Upcoming Classes + Gallery + Parent Reviews
   Full Width + Responsive
========================================================= */


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

.home-info-section{
    width:100%;
    padding:46px 0 62px;
    background:#f7fafc;
    box-sizing:border-box;
}


/* =========================================================
   FULL WIDTH CONTAINER
========================================================= */

.home-info-section > .container{
    width:98%;
    max-width:1880px;
    margin:0 auto;
    padding:0 18px;
    box-sizing:border-box;
}


/* =========================================================
   MAIN THREE-COLUMN GRID
========================================================= */

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

    grid-template-columns:
        minmax(0,.95fr)
        minmax(0,1.13fr)
        minmax(0,1.18fr);

    gap:20px;
    align-items:stretch;
}


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

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

    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;
}


.home-gallery-card{
    min-width:0;
    overflow:hidden;
}


/* =========================================================
   CARD TITLE
========================================================= */

.home-info-title{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:14px;
}


.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;
}


.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 13px;
}


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

    padding:7px 13px;

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

    background:#ffffff;
    color:#374151;

    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;
}


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


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


/* =========================================================
   FEATURED GALLERY
   1 LARGE + 3 SMALL
========================================================= */

.home-feature-gallery{
    width:100% !important;

    display:grid !important;

    grid-template-columns:
        minmax(0,1.55fr)
        minmax(120px,.75fr) !important;

    grid-template-rows:
        repeat(3,82px) !important;

    gap:8px !important;

    margin:0 0 14px !important;

    min-height:264px;
}


/* =========================================================
   MEDIA ITEM
========================================================= */

.home-gallery-media{
    position:relative !important;

    display:block !important;

    width:100% !important;
    height:100% !important;

    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    border:0 !important;
    border-radius:12px !important;

    background:#edf3f5 !important;

    appearance:none;
    -webkit-appearance:none;

    cursor:pointer;
}


.home-gallery-media.is-featured{
    grid-column:1 !important;
    grid-row:1 / span 3 !important;

    width:100% !important;

    height:264px !important;
    min-height:264px !important;
}


.home-gallery-media.is-small{
    grid-column:2 !important;

    width:100% !important;

    height:82px !important;
    min-height:82px !important;
}


.home-gallery-media img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;

    margin:0 !important;

    object-fit:cover !important;

    border:0 !important;
    border-radius:0 !important;

    transition:
        transform .30s ease;
}


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


/* =========================================================
   GALLERY OVERLAY
========================================================= */

.home-media-gradient{
    position:absolute;
    inset:0;

    z-index:2;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0,0,0,.48) 100%
        );
}


/* =========================================================
   GALLERY CAPTION
========================================================= */

.home-media-caption{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    z-index:4;

    padding:28px 12px 10px;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0),
            rgba(0,0,0,.70)
        );

    color:#ffffff;

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

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

    font-weight:700;

    text-align:left;
}


/* =========================================================
   VIDEO PLAY BUTTON
========================================================= */

.home-video-play{
    position:absolute;

    left:50%;
    top:50%;

    z-index:5;

    display:grid;
    place-items:center;

    width:48px;
    height:48px;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    background:rgba(255,255,255,.94);

    color:#087f8c;

    font-size:17px;
    font-weight:800;

    box-shadow:
        0 7px 20px rgba(0,0,0,.18);
}


.home-gallery-media.is-small .home-video-play{
    width:30px;
    height:30px;

    font-size:11px;
}


/* =========================================================
   VIDEO DURATION
========================================================= */

.home-video-duration{
    position:absolute;

    right:7px;
    bottom:7px;

    z-index:6;

    padding:3px 6px;

    border-radius:5px;

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

    color:#ffffff;

    font-size:8px;
    font-weight:700;
}


/* =========================================================
   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:245px;

    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;
}


/* =========================================================
   REVIEW 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
========================================================= */

.home-media-lightbox[hidden]{
    display:none !important;
}


.home-media-lightbox{
    position:fixed;

    inset:0;

    z-index:99999;

    display:grid;
    place-items:center;

    padding:24px;

    background:
        rgba(4,13,24,.90);

    backdrop-filter:
        blur(14px);
}


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

.home-lightbox-close{
    position:absolute;

    right:20px;
    top:18px;

    z-index:20;

    width:44px;
    height:44px;

    display:grid;
    place-items:center;

    padding:0;

    border:0;
    border-radius:50%;

    background:#ffffff;

    color:#111827;

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

    cursor:pointer;
}


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

.home-lightbox-inner{
    width:min(100%,1100px);

    text-align:center;
}


.home-lightbox-inner img{
    display:block;

    max-width:100%;
    max-height:80vh;

    margin:0 auto;

    object-fit:contain;

    border-radius:16px;

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


.home-lightbox-inner p{
    margin:14px 0 0;

    color:#ffffff;

    font-size:13px;
}


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

.home-video-lightbox-inner{
    width:min(100%,980px);
}


.home-video-lightbox-inner iframe,
.home-video-lightbox-inner video{
    display:block;

    width:100%;

    aspect-ratio:16/9;

    border:0;
    border-radius:16px;

    background:#000000;

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


.home-video-lightbox-inner iframe[hidden],
.home-video-lightbox-inner video[hidden]{
    display:none !important;
}


.home-video-lightbox-inner p{
    margin:14px 0 0;

    color:#ffffff;

    font-size:13px;

    text-align:center;
}


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

@media (min-width:1600px){

    .home-info-section > .container{
        width:98%;
        max-width:1880px;
    }


    .home-info-grid{
        gap:22px;
    }


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


    .home-feature-gallery{
        grid-template-rows:
            repeat(3,86px) !important;

        min-height:276px;
    }


    .home-gallery-media.is-featured{
        height:276px !important;
        min-height:276px !important;
    }


    .home-gallery-media.is-small{
        height:86px !important;
        min-height:86px !important;
    }

}


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

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

    .home-info-section > .container{
        width:97%;
        max-width:1700px;
    }

}


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

@media (min-width:768px)
and (max-width:1199px){

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

        padding-left:14px;
        padding-right:14px;
    }


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

        gap:16px;
    }


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


    .home-feature-gallery{
        grid-template-columns:
            minmax(0,1.55fr)
            minmax(100px,.75fr) !important;
    }

}


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

@media (max-width:767px){

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


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

        padding-left:16px;
        padding-right:16px;
    }


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

        gap:16px;
    }


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


    /*
    |----------------------------------------------------------
    | MOBILE GALLERY
    | Large image on top
    | 3 small images underneath
    |----------------------------------------------------------
    */

    .home-feature-gallery{
        grid-template-columns:
            repeat(3,minmax(0,1fr)) !important;

        grid-template-rows:
            195px
            78px !important;

        gap:7px !important;

        min-height:280px;
    }


    .home-gallery-media.is-featured{
        grid-column:1 / -1 !important;
        grid-row:1 !important;

        height:195px !important;
        min-height:195px !important;
    }


    .home-gallery-media.is-small{
        grid-column:auto !important;
        grid-row:2 !important;

        height:78px !important;
        min-height:78px !important;
    }


    .home-media-caption{
        font-size:10px;
    }


    .home-video-play{
        width:44px;
        height:44px;

        font-size:15px;
    }


    .home-gallery-tabs{
        margin-bottom:12px;
    }

}


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

@media (max-width:430px){

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


    .home-feature-gallery{
        grid-template-rows:
            175px
            68px !important;

        min-height:250px;
    }


    .home-gallery-media.is-featured{
        height:175px !important;
        min-height:175px !important;
    }


    .home-gallery-media.is-small{
        height:68px !important;
        min-height:68px !important;
    }


    .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;
    }


    .home-media-lightbox{
        padding:14px;
    }

}