/*
=========================================================
PORTFOLIO PAGE STYLESHEET - Joshua Dalton Media
=========================================================

Purpose
-------
This file contains the page-specific styles for the /portfolio/ page on joshuadaltonmedia.com. It layers on top of the shared hero, lightbox, and media-grid systems and should stay focused on portfolio-only panels, copy blocks, and page skin decisions.

What belongs in this file
-------------------------
- Portfolio page-only panel styling
- Portfolio page copy and CTA presentation
- Portfolio-only layout tweaks layered over media-grid and hero
- Portfolio page breakpoint rules

Asset path usage
----------------
This stylesheet is intended to be referenced from pages with:

<link rel="stylesheet" href="/assets/css/portfolio-page.css">

Relationship to page files
--------------------------
Page files should:
1. load this stylesheet after global.css, hero.css, lightbox.css, and media-grid.css
2. use it only on the /portfolio/ page
3. keep shared hero, lightbox, and media-grid styling in their shared stylesheets

Maintenance rule
----------------
If a selector would also be useful on homepage, commercial, or film pages, it should move to a shared stylesheet instead. Keep this file focused on portfolio-page-only skin and layout tweaks.
*/

/* ================= CATEGORY CHIP ================= */
.portfolio-cat{position:absolute;top:12px;right:12px;z-index:3;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);font-size:.68rem;line-height:1;font-weight:700;letter-spacing:.03em;color:rgba(255,255,255,.85);pointer-events:none}

/* ================= STORY LINK ================= */
.portfolio-story-link{display:block;font-size:.72rem;font-weight:600;color:var(--accent);text-decoration:none;padding:6px 0 2px;letter-spacing:.01em;transition:opacity .2s ease}
.portfolio-story-link:hover{opacity:.75}

/* ================= RESULT COUNT ================= */
.portfolio-count{margin-top:8px;font-size:.76rem;line-height:1.35;color:var(--muted);font-weight:700;text-align:center}
.portfolio-count:empty{display:none}


/* ================= RESPONSIVE BREAKPOINTS ================= */

@media(min-width:360px){
  /* No additional overrides required at this breakpoint */
}

@media(min-width:700px){
  /* No additional overrides required at this breakpoint */
}

@media(min-width:1024px){
  /* ================= GRID TOKENS ================= */
  body[data-page="portfolio"]{
    --portfolio-grid-wrap-max-width-1024:min(98vw,1920px);
    --portfolio-grid-wrap-padding-left-1024:clamp(12px,1.5vw,24px);
    --portfolio-grid-wrap-padding-right-1024:clamp(12px,1.5vw,24px);
    --portfolio-grid-columns-1024:repeat(5,1fr);
    --portfolio-grid-columns-all-1024:repeat(5,1fr);
    --portfolio-grid-columns-filtered-1024:repeat(4,1fr);
    --portfolio-grid-gap-1024:14px;
  }
}