/* ====================================================================
   RESPONSIVE.CSS  — Full responsive layer for Al Mamun's portfolio
   Breakpoints:
     xs  : max 480px   (small phones)
     sm  : max 640px   (phones)
     md  : max 768px   (large phones / portrait tablet)
     lg  : max 1024px  (landscape tablet)
     xl+ : 1025px+     (desktop — mostly untouched)
   ==================================================================== */

/* ── Global safety ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { overflow-x: hidden; }
img  { max-width: 100%; display: block; }

/* ====================================================================
   NAVBAR
   ==================================================================== */

/* hamburger button — hidden on desktop */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    z-index: 200;
    flex-shrink: 0;
}
.nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: rgba(255,255,255,.8);
    border-radius: 2px;
    transition: transform .28s ease, opacity .28s ease;
    transform-origin: center;
}

/* overlay nav drawer */
.nav-drawer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 150;
    pointer-events: none;
}
.nav-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .3s ease;
}
.nav-drawer-panel {
    position: absolute;
    top: 0; right: 0;
    width: min(300px, 82vw);
    height: 100%;
    background: rgba(8,8,8,.98);
    backdrop-filter: blur(24px);
    border-left: 1px solid rgba(255,255,255,.07);
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.16,1,.3,1);
    display: flex;
    flex-direction: column;
    padding: 5rem 2rem 2.5rem;
    gap: 2rem;
}
.nav-drawer-panel a {
    font-size: 1.15rem;
    font-weight: 500;
    color: rgba(255,255,255,.65);
    text-decoration: none;
    letter-spacing: .02em;
    transition: color .2s;
    padding: .25rem 0;
}
.nav-drawer-panel a:hover { color: #fff; }
.nav-drawer-panel .hn-resume {
    margin-top: auto;
    display: inline-flex !important;
    width: fit-content;
}
/* close button inside drawer */
.nav-drawer-close {
    position: absolute;
    top: 1.4rem; right: 1.4rem;
    width: 36px; height: 36px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    color: rgba(255,255,255,.6);
    font-size: 1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s;
}
.nav-drawer-close:hover { background: rgba(255,255,255,.12); color: #fff; }

/* open state (JS toggles .is-open on .nav-drawer) */
.nav-drawer.is-open {
    display: block;
    pointer-events: all;
}
.nav-drawer.is-open .nav-drawer-backdrop { opacity: 1; }
.nav-drawer.is-open .nav-drawer-panel    { transform: translateX(0); }

/* hamburger → X when open */
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
    .nav-hamburger { display: flex; }
    .hn { padding: 1rem 1.25rem; }
    /* hide the inline link list */
    .hn > ul.hn-links { display: none !important; }
}

@media (max-width: 480px) {
    .hn { padding: .9rem 1rem; }
    .hn-logo { font-size: 1.1rem; }
}

/* ====================================================================
   HERO SECTION
   ==================================================================== */
@media (max-width: 1024px) {
    .hero-veil {
        background: linear-gradient(
            to bottom,
            rgba(0,0,0,.82) 0%,
            rgba(0,0,0,.72) 50%,
            rgba(0,0,0,.65) 100%
        );
    }
}

@media (max-width: 768px) {
    /* Stack left + right vertically */
    .hero-wrap  { height: auto !important; min-height: 100svh; }
    .hero-body  {
        flex-direction: column !important;
        align-items: flex-start;
        height: auto;
        min-height: calc(100svh - 64px);
        padding-top: 70px;
        padding-bottom: 2.5rem;
        gap: 0;
    }

    .h-left {
        width: 100% !important;
        padding: 1.75rem 1.25rem 1.25rem !important;
        justify-content: flex-start;
        gap: 0;
    }

    .h-right {
        width: 100% !important;
        padding: 0 1.25rem 2rem !important;
        align-items: flex-start;
        justify-content: flex-start;
    }

    /* Profile portrait — smaller and rectangular on mobile */
    .profile-frame {
        width: 88px !important;
        height: 110px !important;
        border-radius: 8px !important;
        margin-bottom: .6rem;
    }

    .h-name  { font-size: .88rem; margin-top: .6rem; }
    .h-stack { font-size: clamp(1.7rem, 8vw, 2.4rem) !important; margin-top: .25rem; }

    .h-pills { margin-top: .9rem; gap: .4rem; }
    .h-pill  { font-size: .72rem; padding: .25rem .7rem; }

    /* Tech grid — 3 cols → 2 cols */
    .tech-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: .55rem !important;
    }
    .t-card {
        padding: .9rem .6rem !important;
        font-size: .82rem !important;
        border-radius: 10px !important;
    }
}

@media (max-width: 480px) {
    .tech-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .h-stack   { font-size: clamp(1.5rem, 9vw, 2.1rem) !important; }
}

/* ====================================================================
   SECTION COMMONS
   ==================================================================== */
@media (max-width: 768px) {
    .s-title { font-size: clamp(1.55rem, 6vw, 2rem) !important; }
    .s-tag   { font-size: .68rem; }
}

/* ====================================================================
   PROJECTS SECTION
   ==================================================================== */
@media (max-width: 768px) {
    #projects { padding: 3.5rem 0 !important; }
    #projects .max-w-7xl { padding-left: 1.1rem !important; padding-right: 1.1rem !important; }
    #projects .s-header  { margin-bottom: 2rem !important; }

    /* 3 → 2 → 1 columns */
    #projects .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: .9rem !important;
    }

    .pj-card .h-44 { height: 9rem !important; }
    .pj-name { font-size: .92rem !important; }
    .pj-desc { font-size: .78rem !important; }
    .pj-dur  { font-size: .7rem !important; }
    .pb      { font-size: .7rem !important; padding: .25rem .65rem !important; }
}

@media (max-width: 520px) {
    #projects .grid { grid-template-columns: 1fr !important; }
    .pj-card .h-44  { height: 11rem !important; }
}

/* ====================================================================
   ROAD JOURNEY SECTION
   ==================================================================== */
@media (max-width: 768px) {
    .rj-header {
        padding: 1rem 1.1rem .5rem !important;
        flex-direction: column;
        align-items: flex-start;
        gap: .4rem;
    }
    .rj-year-sep { display: none; }
    .rj-year     { font-size: .62rem; }
    .s-title     { font-size: 1.45rem; }
}

/* Detail panel: on mobile float it as a bottom sheet */
@media (max-width: 640px) {
    .rj-detail-panel {
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: 65vh;
        overflow-y: auto;
        border-radius: 20px 20px 0 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        transform: translateY(12px) !important;
        box-shadow: 0 -8px 60px rgba(0,0,0,.7) !important;
    }
    .rj-detail-panel.visible {
        transform: translateY(0) !important;
    }
    /* these classes set left/right positioning — override for mobile */
    .rj-detail-panel.left-side,
    .rj-detail-panel.right-side {
        left: 0 !important;
        right: 0 !important;
    }
    .rj-detail-img { height: 140px !important; }
    .rj-detail-body { padding: 1rem 1.25rem 1.5rem !important; }

    /* Shrink node cards a bit to avoid overflow */
    .rj-node-card { max-width: 110px !important; padding: .3rem .45rem !important; gap: .35rem !important; }
    .rj-node-thumb { width: 24px !important; height: 24px !important; }
    .rj-node-name  { font-size: .63rem !important; }
    .rj-node-line  { width: 20px !important; }

    /* master labels — keep them small */
    .rj-master-label { font-size: .72rem !important; }
    .rj-master-date  { font-size: .58rem !important; }
    .rj-master-dot   { width: 16px !important; height: 16px !important; }

    .rj-ambient { width: 260px !important; height: 260px !important; }
}

@media (max-width: 400px) {
    .rj-node-card  { max-width: 80px !important; }
    .rj-node-name  { font-size: .58rem !important; -webkit-line-clamp: 1 !important; }
    .rj-node-line  { width: 14px !important; }
}

/* ====================================================================
   SKILLS SECTION
   ==================================================================== */
@media (max-width: 768px) {
    #skills-section,
    section[style*="background:#080808"] {
        padding: 3.5rem 0 !important;
    }
    .sk-badge {
        font-size: .72rem !important;
        padding: .32rem .75rem !important;
    }
}

/* ====================================================================
   CONTACT SECTION
   ==================================================================== */
@media (max-width: 768px) {
    #contact { padding-top: 3.5rem !important; padding-bottom: 3rem !important; }
    #contact .max-w-5xl { padding-left: 1.1rem !important; padding-right: 1.1rem !important; }
    #contact .s-header   { margin-bottom: 1.5rem !important; }
}

@media (max-width: 480px) {
    #contact .flex.justify-center { gap: .65rem !important; }
    .c-btn {
        width: 46px  !important;
        height: 46px !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
    }
}

/* ====================================================================
   FOOTER
   ==================================================================== */
@media (max-width: 480px) {
    footer { padding: 1.25rem 1rem !important; }
    footer p { font-size: .72rem !important; }
}

/* ====================================================================
   ABOUT SECTION (index.css scroll-snap about panels)
   ==================================================================== */
@media (max-width: 768px) {
    /* about items use flex row by default — stack them */
    .about-item > .flex.items-center {
        flex-direction: column !important;
        height: auto !important;
    }
    .about-left, .about-right {
        width: 100% !important;
        height: 50vw !important;
        max-height: 300px;
    }
    .about-right { padding: 1.5rem 1.1rem !important; }
    .number-badge { font-size: 4.5rem !important; }
    .title-main   { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; }
}

/* ====================================================================
   UTILITY — prevent long words/URLs from breaking layout
   ==================================================================== */
p, h1, h2, h3, h4, h5, h6, span, a, li {
    overflow-wrap: break-word;
    word-break: break-word;
}