/* Final application design-system layer.
   This file intentionally contains only cross-page invariants and fixes for
   legacy selectors that are too broad. Page-specific styling stays in each
   page stylesheet. */

:where(html,body,button,input,select,textarea,option,optgroup){
    font-family:var(--font-ui);
}
body{background:var(--bg-page);color:var(--text-primary)}
:where(main,section,article,aside,nav,header,footer,.container,.card,.profile-content,.admin-content){min-width:0}
:where(input,select,textarea,button,a){-webkit-tap-highlight-color:transparent}
:where(a,button,input,select,textarea):focus-visible{
    outline:3px solid var(--accent-soft);
    outline-offset:2px;
}

.brand-text,.project-name,.brand-highlight{font-weight:800;color:var(--accent)}
@supports (-webkit-background-clip:text){
    .brand-text,.project-name,.brand-highlight{
        background:linear-gradient(135deg,var(--accent),var(--brand-accent-2));
        -webkit-background-clip:text;
        background-clip:text;
        color:transparent;
    }
}
.brand-text--glow{text-shadow:0 8px 28px color-mix(in srgb,var(--accent) 24%,transparent)}

.clamp-1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clamp-2,.clamp-3{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.clamp-2{-webkit-line-clamp:2}
.clamp-3{-webkit-line-clamp:3}

/* Font Awesome's info-circle is a solid glyph in the loaded free set. */
.mobile-bottom-nav__item .fa-circle-info{font-family:"Font Awesome 6 Free";font-weight:900}

/* About page: replace the legacy fixed-width + large-margin card layout with
   a centered responsive grid. */
.aboutus_hero,.aboutUs_card{
    padding-inline:clamp(16px,4vw,48px);
}
.aboutus_hero{
    padding-block:clamp(64px,8vw,96px) clamp(48px,7vw,80px);
}
.aboutus_hero .about_cards,
.aboutUs_card .history_cards{
    width:min(100%,1040px);
    margin-inline:auto;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:stretch;
    justify-content:center;
    gap:var(--space-5);
}
.aboutus_hero .about_cards .about-stat-card,
.aboutUs_card .history_cards .card.about-feature-card{
    width:100%;
    max-width:340px;
    height:auto;
    min-height:0;
    margin:0;
    padding:clamp(18px,2vw,24px);
    justify-self:center;
    background:var(--bg-card);
    color:var(--text-primary);
    border:1px solid var(--border-soft);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card);
}
.aboutus_hero .about_cards .about-stat-card{min-height:126px}
.aboutUs_card .history_cards .card.about-feature-card{
    min-height:190px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-align:center;
}
.aboutUs_card .history_cards .card.about-feature-card .feature-card__icon{
    width:42px;
    height:42px;
    flex:none;
    color:var(--accent);
}
.aboutUs_card .history_cards .card.about-feature-card h4{
    margin:0;
    font-size:clamp(18px,1.5vw,23px);
    line-height:1.45;
}
.aboutUs_card .history_cards .card.about-feature-card p{
    margin:0;
    color:var(--text-secondary);
    font-size:14px;
    line-height:1.8;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}
.aboutUs_card{padding-block:clamp(52px,7vw,80px)}
.aboutus_hero .subtitle,.aboutUs_card .subtitle{
    max-width:760px;
    margin-inline:auto;
    color:var(--text-secondary);
    line-height:1.9;
}

/* Profile: centered content, compact cards, two-column phone layout where
   space permits, and a centered final odd card instead of a right-aligned one. */
.profile-page{padding-block-start:clamp(82px,8vw,104px)}
.profile-shell{max-width:var(--container-lg)}
.profile-surface{background:var(--bg-card);color:var(--text-primary)}
.profile-panel,.profile-content{width:100%}
.profile-panel__header{width:100%}
.profile-stat-card,.profile-overview-card,.profile-verification-card,.profile-history-card{
    height:100%;
}
.profile-stat-card{
    min-height:100px;
    padding:16px;
}
.profile-overview-grid,.profile-verification-grid,.profile-course-grid{
    align-items:stretch;
}
.profile-overview-card,.profile-verification-card,.profile-history-card{
    padding:clamp(16px,2vw,22px);
}
.profile-card-heading h3,.profile-course-card h3{
    overflow-wrap:anywhere;
    text-wrap:balance;
}
.profile-course-card__body>p{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
}
.profile-form__actions,.profile-course-card__actions{
    flex-wrap:wrap;
}

/* Generic cards/grids: equal visual rhythm without forcing huge fixed height. */
:where(.course-card,.courses .course_card,.roadmap-card,.feature-card,.contact-card,.channel_card){
    min-width:0;
}
:where(.course-card__title,.courses .course_card h3,.roadmap-card__title,.feature-card__title,.contact-card__title){
    overflow-wrap:anywhere;
    text-wrap:balance;
}
:where(.course-card__description,.courses .course_card .description,.roadmap-card__description,.feature-card__description){
    display:-webkit-box;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
:where(.course-card__description,.courses .course_card .description,.roadmap-card__description){-webkit-line-clamp:3}
.feature-card__description{-webkit-line-clamp:2}

/* Admin/profile tables and long identifiers must never create page overflow. */
:where(.admin-page,.profile-page,.basket-page) table{max-width:100%}
:where(.admin-page,.profile-page,.basket-page) :where(td,th,strong,p,a,span){overflow-wrap:anywhere}

@media(max-width:980px){
    .navbar .logo .project-name{max-width:min(38vw,190px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

@media(max-width:760px){
    .aboutus_hero .about_cards,
    .aboutUs_card .history_cards{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }
    .aboutus_hero .about_cards .about-stat-card:last-child:nth-child(odd),
    .aboutUs_card .history_cards .card.about-feature-card:last-child:nth-child(odd){
        grid-column:1/-1;
        width:min(100%,360px);
        justify-self:center;
    }

    .profile-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        justify-content:center;
    }
    .profile-stats .profile-stat-card:last-child:nth-child(odd){
        grid-column:1/-1;
        width:min(100%,380px);
        justify-self:center;
    }
    .profile-overview-grid,.profile-verification-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }
    .profile-hero__meta{grid-template-columns:repeat(2,minmax(0,1fr))}
    .profile-panel__header{align-items:start}
}

@media(max-width:540px){
    .profile-overview-grid,.profile-verification-grid{grid-template-columns:1fr}
    .profile-overview-card,.profile-verification-card,.profile-history-card{
        width:100%;
        max-width:460px;
        margin-inline:auto;
    }
    .profile-form{width:100%;max-width:560px;margin-inline:auto}
    .profile-hero__identity{width:100%}
    .profile-hero__copy h1{font-size:clamp(22px,7vw,29px)}
}

@media(max-width:390px){
    .profile-stats,
    .profile-hero__meta{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .profile-stat-card{width:100%;min-width:0}
    .mobile-bottom-nav{inset-inline:4px;width:calc(100vw - 8px)}
}

@media(max-width:320px){
    .aboutus_hero .about_cards,
    .aboutUs_card .history_cards,
    .profile-stats,
    .profile-hero__meta{
        grid-template-columns:1fr;
    }
    .aboutus_hero .about_cards .about-stat-card:last-child:nth-child(odd),
    .aboutUs_card .history_cards .card.about-feature-card:last-child:nth-child(odd),
    .profile-stats .profile-stat-card:last-child:nth-child(odd){
        grid-column:auto;
        width:100%;
    }
    .profile-stat-card{max-width:360px;margin-inline:auto}
}

@media(prefers-reduced-motion:reduce){
    *{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
        scroll-behavior:auto!important;
    }
}