/* =============================================
   MOBILE RESPONSIVE — style-tech.css
   Supplements style.css without changing theme
   ============================================= */

/* -----------------------------------------------
   Section grids — 2-col, last odd item full-width
----------------------------------------------- */
.edu-grid,
.exp-grid,
.project-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    align-items: start;
}

/* Last card spans full row when it's the only one in its row */
.edu-grid > *:last-child:nth-child(odd),
.exp-grid > *:last-child:nth-child(odd),
.project-grid > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* -----------------------------------------------
   Lang dropdown — transparent frosted glass
----------------------------------------------- */
/* Base dropdown layout */
.lang-dropdown {
    min-width: 110px;
    text-align: center;
    padding: 4px 0;
}
.lang-dropdown .dropdown-item {
    font-size: 0.85rem;
    padding: 0.4rem 0;
    text-align: center;
}

/* Hero (transparent navbar) — fully transparent, underline only */
.navbar-trans .lang-dropdown {
    background: transparent;
    border: none;
    box-shadow: none;
}
.navbar-trans .lang-dropdown .dropdown-item {
    color: rgba(255, 255, 255, 0.9);
    background: transparent;
}
.navbar-trans .lang-dropdown .dropdown-item:hover {
    background: transparent;
    color: #fff;
    text-decoration: underline;
}
.navbar-trans .lang-dropdown .dropdown-item.active,
.navbar-trans .lang-dropdown .dropdown-item:active {
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
}

/* Scrolled (white navbar) — white background */
.navbar-reduce .lang-dropdown {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.10);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
}
.navbar-reduce .lang-dropdown .dropdown-item {
    color: #1e1e1e;
    background: transparent;
}
.navbar-reduce .lang-dropdown .dropdown-item:hover {
    background: #f0f0f0;
    color: #0078ff;
    text-decoration: none;
}
.navbar-reduce .lang-dropdown .dropdown-item.active,
.navbar-reduce .lang-dropdown .dropdown-item:active {
    background: #0078ff;
    color: #fff;
}

/* -----------------------------------------------
   Hero — fix iOS background-attachment & height
----------------------------------------------- */
.intro.bg-image {
    background-attachment: scroll; /* iOS Safari doesn't support fixed */
    height: 100vh;                 /* fallback */
    height: 100svh;                /* excludes browser chrome on mobile */
    min-height: 480px;
}

/* CV section */
.cv-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.cv-iframe-wrap {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* -----------------------------------------------
   max-width: 575px
----------------------------------------------- */
@media (max-width: 575px) {
    .intro .intro-title    { font-size: 2rem; }
    .intro .intro-subtitle { font-size: 1.1rem; }
    .title-a               { font-size: 2rem; }
    .ico-circle            { height: 70px; width: 70px; font-size: 1.6rem; }
    .footer-mf .footer-text { font-size: 0.75rem; }
}

/* -----------------------------------------------
   max-width: 767px
----------------------------------------------- */
@media (max-width: 767px) {
    /* Hero fonts */
    .intro .intro-title    { font-size: 2.4rem; }
    .intro .intro-subtitle { font-size: 1.3rem; }
    .title-a               { font-size: 2.2rem; }
    .title-left            { font-size: 1.6rem; }

    /* About */
    .about-mf .about-img img   { margin-left: 0; }
    .about-mf .box-shadow-full { padding: 2rem 1rem; }

    /* Section spacing */
    .sect-pt4        { padding-top: 2.5rem; }
    .title-box       { margin-bottom: 2rem; }
    .box-shadow-full { padding: 1.5rem 1rem; margin-bottom: 1.5rem; }

    /* Cards */
    .work-box,
    .service-box { margin-bottom: 1.5rem; }

    /* Sections — single column on mobile */
    .edu-grid,
    .exp-grid,
    .project-grid { grid-template-columns: 1fr; }

    /* Last-odd rule not needed on single-column */
    .edu-grid > *:last-child:nth-child(odd),
    .exp-grid > *:last-child:nth-child(odd),
    .project-grid > *:last-child:nth-child(odd) { grid-column: auto; }

    /* CV — hide iframe, centre buttons */
    .cv-iframe-wrap { display: none; }
    .cv-fallback    { display: none; }
    .cv-toolbar     { justify-content: center; }
    .cv-toolbar .btn { flex: 1; text-align: center; max-width: 160px; }

    /* Navbar brand */
    .navbar-b .navbar-brand { font-size: 1.2rem; }

    /* Lang dropdown in collapsed navbar: show inline, override glass */
    #mainNav .lang-dropdown {
        position: static;
        transform: none !important;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        border: none;
        padding: 0;
        text-align: left;
    }
    #mainNav .lang-dropdown .dropdown-item {
        text-align: left;
        color: #fff;
        padding: 0.4rem 1rem;
    }
    #mainNav .lang-dropdown .dropdown-item:hover,
    #mainNav .lang-dropdown .dropdown-item.active {
        background: transparent;
        color: #0078ff;
    }
}