/*==================================================
  TutorMatch Design System v2.0
  File        : layout.css
  Description : Global Layout System
==================================================*/


/*==================================================
  1. WRAPPER
==================================================*/

.tm-wrapper{

    width:100%;

    max-width:100%;

    overflow:hidden;

    position:relative;

}
/*==================================================
  2. CONTAINER
==================================================*/

.tm-container{

    width:100%;

    max-width:1280px;

    margin:0 auto;

    padding:0 20px;

    box-sizing:border-box;

}

/* Full-bleed outer sections — background spans edge-to-edge */
.tm-header,
.tm-announcement,
.tm-hero,
.tm-section,
.tm-subjects,
.tm-requirements,
.tm-how-it-works,
.tm-footer{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
}
/*==================================================
  3. SECTIONS
==================================================*/

.tm-section{

    padding-block:var(--section-spacing);

}

.tm-section-sm{

    padding-block:64px;

}

.tm-section-lg{

    padding-block:120px;

}
/*==================================================
  4. GRID SYSTEM
==================================================*/

.tm-grid{

    display:grid;

    gap:var(--space-7);

}

.tm-grid-2{

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

}

.tm-grid-3{

    grid-template-columns:repeat(3,1fr);

}

.tm-grid-4{

    grid-template-columns:repeat(4,1fr);

}
/*==================================================
  5. FLEX UTILITIES
==================================================*/

.tm-flex{

    display:flex;

}

.tm-flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.tm-flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.tm-flex-column{

    display:flex;

    flex-direction:column;

}
/*==================================================
  6. COMMON LAYOUT
==================================================*/

.tm-center{

    margin-inline:auto;

}

.tm-full-width{

    width:100%;

}

.tm-hidden{

    display:none;

}

/*==================================================
  7. WIDTH UTILITIES
==================================================*/

.w-25{

    width:25%;

}

.w-50{

    width:50%;

}

.w-75{

    width:75%;

}

.w-100{

    width:100%;

}
/*==================================================
  8. HEIGHT UTILITIES
==================================================*/

.h-100{

    height:100%;

}

.min-vh-100{

    min-height:100vh;

}
/*==================================================
  9. POSITION HELPERS
==================================================*/

.relative{

    position:relative;

}

.absolute{

    position:absolute;

}

.fixed{

    position:fixed;

}
/*==================================================
  10. RESPONSIVE LAYOUT
==================================================*/

@media (max-width:1024px){

    .tm-grid-4{

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

    }

}

@media (min-width: 1025px) {

    .tm-grid-4 {

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

    }

}

@media (max-width:768px){

    .tm-grid-2,
    .tm-grid-3,
    .tm-grid-4{

        grid-template-columns:1fr;

    }

    .tm-flex-between{

        flex-direction:column;

        align-items:flex-start;

        gap:var(--space-6);

    }

}
/*==================================================
  11. STACK LAYOUT
==================================================*/

.tm-stack{

    display:flex;

    flex-direction:column;

    gap:var(--space-6);

}

.tm-stack-sm{

    gap:var(--space-4);

}

.tm-stack-lg{

    gap:var(--space-8);

}
/*==================================================
  12. CLUSTER LAYOUT
==================================================*/

.tm-cluster{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:var(--space-4);

}

.tm-cluster-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:var(--space-4);

}
/*==================================================
  13. AUTO GRID
==================================================*/

.tm-auto-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:var(--space-7);

}

.tm-auto-grid-sm{

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

}

.tm-auto-grid-lg{

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

}
/*==================================================
  14. SIDEBAR LAYOUT
==================================================*/

.tm-sidebar-layout{

    display:grid;

    grid-template-columns:280px 1fr;

    gap:var(--space-8);

    align-items:start;

}
/*==================================================
  15. HERO LAYOUT
==================================================*/

.tm-hero{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:var(--space-10);

    min-height:var(--hero-min-height);

}

.tm-hero-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.tm-hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

}
/*==================================================
  16. DASHBOARD LAYOUT
==================================================*/

.tm-dashboard{

    display:grid;

    grid-template-columns:280px 1fr;

    min-height:100vh;

}

.tm-dashboard-main{

    padding:var(--space-8);

}
/*==================================================
  17. STICKY HELPERS
==================================================*/

.tm-sticky{

    position:sticky;

    top:0;

}

.tm-sticky-navbar{

    position:sticky;

    top:var(--navbar-height);

}
/*==================================================
  18. RESPONSIVE ADVANCED LAYOUT
==================================================*/

@media (max-width:1024px){

    .tm-sidebar-layout{

        grid-template-columns:1fr;

    }

    .tm-dashboard{

        grid-template-columns:1fr;

    }

    .tm-hero{

        grid-template-columns:1fr;

        text-align:center;

    }

    .tm-hero-content{

        align-items:center;

    }

}

@media (max-width:768px){

    .tm-auto-grid{

        grid-template-columns:1fr;

    }

    .tm-auto-grid-sm{

        grid-template-columns:1fr;

    }

    .tm-auto-grid-lg{

        grid-template-columns:1fr;

    }

}
/*==================================================
  19. 12 COLUMN GRID SYSTEM
==================================================*/

.tm-grid-12{

    display:grid;

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

    gap:var(--space-6);

}

/*========== COLUMN SPAN ==========*/

.tm-span-1{grid-column:span 1;}
.tm-span-2{grid-column:span 2;}
.tm-span-3{grid-column:span 3;}
.tm-span-4{grid-column:span 4;}
.tm-span-5{grid-column:span 5;}
.tm-span-6{grid-column:span 6;}
.tm-span-7{grid-column:span 7;}
.tm-span-8{grid-column:span 8;}
.tm-span-9{grid-column:span 9;}
.tm-span-10{grid-column:span 10;}
.tm-span-11{grid-column:span 11;}
.tm-span-12{grid-column:span 12;}


/*========== START POSITION ==========*/

.tm-start-1{grid-column-start:1;}
.tm-start-2{grid-column-start:2;}
.tm-start-3{grid-column-start:3;}
.tm-start-4{grid-column-start:4;}
.tm-start-5{grid-column-start:5;}
.tm-start-6{grid-column-start:6;}
.tm-start-7{grid-column-start:7;}
.tm-start-8{grid-column-start:8;}
.tm-start-9{grid-column-start:9;}
.tm-start-10{grid-column-start:10;}
.tm-start-11{grid-column-start:11;}
.tm-start-12{grid-column-start:12;}


/*========== END POSITION ==========*/

.tm-end-1{grid-column-end:1;}
.tm-end-2{grid-column-end:2;}
.tm-end-3{grid-column-end:3;}
.tm-end-4{grid-column-end:4;}
.tm-end-5{grid-column-end:5;}
.tm-end-6{grid-column-end:6;}
.tm-end-7{grid-column-end:7;}
.tm-end-8{grid-column-end:8;}
.tm-end-9{grid-column-end:9;}
.tm-end-10{grid-column-end:10;}
.tm-end-11{grid-column-end:11;}
.tm-end-12{grid-column-end:12;}
.tm-end-13{grid-column-end:13;}
/*==================================================
  RESPONSIVE GRID
==================================================*/

@media (max-width:1024px){

    .tm-grid-12{

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

    }

}

@media (max-width:768px){

    .tm-grid-12{

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

    }

    .tm-span-1,
    .tm-span-2,
    .tm-span-3,
    .tm-span-4,
    .tm-span-5,
    .tm-span-6,
    .tm-span-7,
    .tm-span-8,
    .tm-span-9,
    .tm-span-10,
    .tm-span-11,
    .tm-span-12{

        grid-column:span 4;

    }

}
/*==================================================
  20. GRID GAP UTILITIES
==================================================*/

.tm-gap-0{gap:0;}
.tm-gap-1{gap:var(--space-1);}
.tm-gap-2{gap:var(--space-2);}
.tm-gap-3{gap:var(--space-3);}
.tm-gap-4{gap:var(--space-4);}
.tm-gap-5{gap:var(--space-5);}
.tm-gap-6{gap:var(--space-6);}
.tm-gap-7{gap:var(--space-7);}
.tm-gap-8{gap:var(--space-8);}
.tm-gap-9{gap:var(--space-9);}
.tm-gap-10{gap:var(--space-10);}
.tm-gap-11{gap:var(--space-11);}
.tm-gap-12{gap:var(--space-12);}