/* ==========================================================================
   Project cards — reference-matched tiles (2026-11-01)
   Look source: faysalmahmudprem.netlify.app/projects (.tile / .project-card).
   Their rem base is 16px and this site's is 10px, so reference rem values are
   multiplied by 1.6 below.

   Tile anatomy, copied from the reference:
     • padded tile: surface bg, 1px border, radius-lg, shadow, padding all round
     • media INSIDE the padding: 16/9, radius-md, 1px border, scale(1.04) hover
     • label → title → text → tag chips → footer links pinned to the bottom
     • hover: 4px lift, stronger shadow, accent border, title turns accent
     • every tile the same size — no stretched or oversized card

   Loaded AFTER style.min.css on projects.html and index.html only.
   Presentation only: no markup, content, URL, schema or metadata changes.
   ========================================================================== */

/* ---------- grid ---------- */
.portfolio-container{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:stretch;
    gap:clamp(1.2rem,1.6vw,1.6rem);
    max-width:1180px;
    margin:0 auto;
    padding:0;
    width:100%;
}

/* ---------- tile ---------- */
.portfolio-container .portfolio-box{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:1.6rem;
    height:100%;
    width:100%;
    aspect-ratio:auto;
    text-align:left;
    padding:2.4rem;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    overflow:hidden;
    animation:none;
    cursor:default;
    transition:transform var(--transition-normal),box-shadow var(--transition-normal),border-color var(--transition-normal);
}

.portfolio-container .portfolio-box:hover,
.portfolio-container .portfolio-box:focus-within{
    transform:translateY(-4px);
    border-color:var(--border-accent);
    box-shadow:var(--shadow-md);
}

/* ---------- lead tile: same size, slightly stronger frame ----------
   Focus comes from the accent frame and its position first in the grid, not
   from a larger card — the reference's oversized lead tile is what made the
   grid look uneven here. ---------- */
.portfolio-container > .portfolio-box:first-child{
    border-color:var(--border-accent);
    box-shadow:var(--shadow-md);
}

/* ---------- media: inset, bordered, own radius ---------- */
.portfolio-container .portfolio-box > img,
.portfolio-container .portfolio-box > picture > img{
    position:static;
    top:auto;
    left:auto;
    right:auto;
    bottom:auto;
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    aspect-ratio:16/9;
    object-fit:cover;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    transform:none;
    transition:transform var(--transition-normal);
}

.portfolio-container .portfolio-box:hover > img,
.portfolio-container .portfolio-box:hover > picture > img,
.portfolio-container .portfolio-box:focus-within > img{
    transform:scale(1.04);
}

/* ---------- body ---------- */
.portfolio-container .portfolio-layer{
    position:static;
    inset:auto;
    transform:none;
    width:auto;
    height:auto;
    min-height:0;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    background:transparent;
    background-image:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border-top:0;
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:1.2rem;
    text-align:left;
    padding:0;
    overflow:visible;
}

body.light-mode .portfolio-container .portfolio-layer{
    background:transparent;
    background-image:none;
    border-top:0;
}

.portfolio-container .portfolio-subtitle{
    order:-1;
    margin:0;
    font-size:1.15rem;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--text-secondary);
    line-height:1.2;
}

.portfolio-container .portfolio-layer h2,
.portfolio-container .portfolio-layer h3{
    font-size:2.05rem;
    line-height:1.3;
    font-weight:600;
    letter-spacing:-.01em;
    margin:0;
    color:var(--text-primary);
    transition:color var(--transition-normal);
}

.portfolio-container .portfolio-box:hover .portfolio-layer h2,
.portfolio-container .portfolio-box:hover .portfolio-layer h3{
    color:var(--accent-primary);
}

.portfolio-container .portfolio-layer p:not(.portfolio-subtitle){
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin:0;
    font-size:1.5rem;
    line-height:1.6;
    color:var(--text-secondary);
}

/* ---------- tag chips ---------- */
.portfolio-container .portfolio-tags{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:center;
    gap:.8rem;
    margin:0;
}

.portfolio-container .portfolio-tags span{
    font-size:1.1rem;
    font-weight:600;
    letter-spacing:.04em;
    color:var(--text-secondary);
    background:var(--surface-elevated);
    border:1px solid var(--border);
    border-radius:999px;
    padding:.3em .75em;
    line-height:1.4;
}

/* ---------- footer links ---------- */
.portfolio-container .portfolio-links{
    position:static;
    inset:auto;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.8rem;
    width:100%;
    height:auto;
    margin-top:auto;
    padding-top:0;
}

.portfolio-container .portfolio-links .portfolio-link{
    position:static;
    inset:auto;
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    width:auto;
    height:auto;
    min-height:0;
    margin:0;
    padding:.45rem 1.1rem;
    font-size:1.1rem;
    font-weight:600;
    line-height:1.2;
    white-space:nowrap;
    flex:0 0 auto;
    border-radius:var(--radius-pill);
}

.portfolio-container .portfolio-links .portfolio-link-private{
    position:static;
    inset:auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:3rem;
    height:3rem;
    min-height:0;
    padding:0;
    background:var(--surface-elevated);
    color:var(--text-secondary);
    border:1px solid var(--border);
    border-radius:50%;
}

.portfolio-container .portfolio-links .portfolio-link-private:hover,
.portfolio-container .portfolio-links .portfolio-link-private:focus-visible{
    background:var(--accent-glow);
    color:var(--accent-primary);
    border-color:var(--border-accent);
}

.portfolio-container .portfolio-box a:focus-visible,
.portfolio-container .portfolio-box button:focus-visible{
    outline:2px solid var(--accent-primary);
    outline-offset:3px;
}

/* ---------- tablet: two columns ---------- */
@media (max-width:1024px){
    .portfolio-container{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;}
    .portfolio-container .portfolio-box{padding:2rem;gap:1.4rem;}
    .portfolio-container .portfolio-layer h2,
    .portfolio-container .portfolio-layer h3{font-size:1.95rem;}
}

/* ---------- phones: one column, 16/10 media, tighter padding ---------- */
@media (max-width:640px){
    .portfolio-container{
        grid-template-columns:1fr;
        gap:1.2rem;
        max-width:min(1180px,92vw);
    }
    .portfolio-container .portfolio-box{padding:1.6rem;gap:1.2rem;border-radius:var(--radius-md);}
    .portfolio-container .portfolio-box > img,
    .portfolio-container .portfolio-box > picture > img{aspect-ratio:16/10;}
    .portfolio-container .portfolio-layer{gap:1rem;}
    .portfolio-container .portfolio-layer h2,
    .portfolio-container .portfolio-layer h3{font-size:1.85rem;line-height:1.28;}
    .portfolio-container .portfolio-subtitle{font-size:1.05rem;letter-spacing:.12em;}
    .portfolio-container .portfolio-layer p:not(.portfolio-subtitle){font-size:1.44rem;line-height:1.55;}
    .portfolio-container .portfolio-tags{gap:.6rem;}
    .portfolio-container .portfolio-tags span{font-size:1.02rem;padding:.28em .65em;}
    .portfolio-container .portfolio-links{gap:.6rem;}
    .portfolio-container .portfolio-links .portfolio-link{font-size:1.05rem;padding:.42rem 1rem;}
    .portfolio-container .portfolio-links .portfolio-link-private{width:2.8rem;height:2.8rem;}
}

@media (max-width:400px){
    .portfolio-container{max-width:94vw;}
    .portfolio-container .portfolio-box{padding:1.4rem;gap:1rem;}
    .portfolio-container .portfolio-layer h2,
    .portfolio-container .portfolio-layer h3{font-size:1.72rem;}
}

/* ---------- projects page hero + filter row ---------- */
.projects-hero{
    text-align:center;
    padding:calc(var(--header-height) + 2.4rem) 8% 1.7rem;
}

.projects-hero .heading{
    display:inline-block;
    position:relative;
    padding-bottom:.85rem;
    margin:0 0 .75rem;
}

.projects-hero .heading::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:7rem;
    height:3px;
    border-radius:2px;
    background:var(--accent-primary);
}

.projects-hero .heading span{color:var(--accent-primary);}

.projects-back-link{
    display:flex;
    justify-content:center;
    width:max-content;
    align-items:center;
    gap:.4rem;
    margin:0 auto .9rem;
    font-size:1.15rem;
    font-weight:500;
    color:var(--text-secondary);
}

.projects-back-link:hover,
.projects-back-link:focus-visible{color:var(--accent-primary);}

.projects-subtitle{
    max-width:62ch;
    margin:0 auto .7rem;
    color:var(--text-secondary);
    font-size:1.3rem;
}

.projects-count{
    display:inline-block;
    margin:0;
    padding:.26rem .9rem;
    border-radius:var(--radius-pill);
    border:1px solid var(--border-accent);
    background:var(--accent-glow);
    color:var(--accent-primary);
    font-size:1rem;
    font-weight:600;
    letter-spacing:.04em;
}

.projects-page .projects-filter-bar{
    padding:1.2rem 8% 1.5rem;
    gap:.5rem;
}

.projects-page .filter-btn{
    font-size:1.08rem;
    padding:.46rem 1.05rem;
}

.projects-page{padding-top:0;}

@media (max-width:768px){
    .projects-hero{padding:calc(var(--header-height) + 1.4rem) 5% 1.1rem;}
    .projects-hero .heading{display:block;font-size:clamp(2.1rem,7.6vw,2.7rem);padding-bottom:.65rem;margin-bottom:.55rem;}
    .projects-hero .heading::after{width:5rem;height:2px;}
    .projects-back-link{margin-bottom:.65rem;font-size:1.05rem;}
    .projects-subtitle{max-width:100%;font-size:1.18rem;line-height:1.5;}
    .projects-count{font-size:.94rem;padding:.2rem .75rem;}
    .projects-page .projects-filter-bar{padding:.95rem 5% 1.15rem;gap:.42rem;}
    .projects-page .filter-btn{font-size:.98rem;padding:.4rem .85rem;}
}