/* ==========================================================================
   /realizacje/ — portfolio archive (Phase 3, desktop). The works are the
   hero: a short header with the filters right under the title, then one
   controlled 12-column grid. Sections are scenes (night / crimson / ivory)
   per view; the global header follows them (site.js).
   Section styles only; tokens, reset, header, footer live in base.css.
   Below 64rem this is only a safe 2-column fallback (mobile is a later pass).
   ========================================================================== */
@layer sections {

.pf-head{background:var(--scene-bg);color:var(--scene-fg);transition:background-color 240ms var(--ease),color 240ms var(--ease)}
.pf-head__inner{width:var(--container);margin-inline:auto;padding:clamp(48px,5.5vw,88px) 0 clamp(24px,2.6vw,36px)}
.pf-title{font-weight:700;font-size:clamp(3rem,6.2vw,6.25rem);letter-spacing:-.03em;line-height:1}
.pf-lead{margin-top:var(--space-heading-lead);font-size:var(--fs-lead);line-height:1.5;color:var(--scene-fg-2);max-width:46ch}

/* filters: editorial text controls, not pills */
.pf-filters{margin-top:clamp(24px,2.4vw,36px)}
.pf-filter{display:flex;flex-wrap:wrap;column-gap:36px;row-gap:0}
.pf-filter--2{margin-top:4px;padding-top:4px;column-gap:28px;border-top:1px solid var(--scene-line)}
.pf-filter--3{margin-top:0;padding-top:0;column-gap:22px;border-top:1px solid color-mix(in srgb,var(--scene-line) 55%,transparent)}
.pf-filter[hidden]{display:none}
.pf-btn{position:relative;display:inline-flex;align-items:baseline;min-height:44px;padding:10px 0;color:var(--scene-fg-2);font-weight:700;line-height:1.2;cursor:pointer;
  transition:color var(--dur-snap) var(--ease)}
.pf-btn--1{font-size:17px}
.pf-btn--2{font-size:15px}
.pf-btn--3{font-size:14px;font-weight:600}
.pf-btn::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease)}
.pf-btn:hover{color:var(--scene-fg)}
.pf-btn:hover::after{transform:scaleX(1);height:1px}
.pf-btn[aria-pressed="true"]{color:var(--scene-fg)}
.pf-btn[aria-pressed="true"]::after{transform:scaleX(1);height:2px}
.pf-btn:focus-visible{outline:2px solid var(--scene-focus);outline-offset:2px}

/* grid */
.pf-main[data-scene="night"],.pf-main[data-scene="crimson"]{--pf-live:var(--ivory)}
.pf-main{background:var(--scene-bg);color:var(--scene-fg);padding:clamp(32px,4vw,64px) 0 clamp(72px,8vw,128px);transition:background-color 240ms var(--ease),color 240ms var(--ease)}
.pf-grid{width:var(--container);margin-inline:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-16);row-gap:var(--sp-40)}
.pf-card{grid-column:span 1;display:grid;grid-template-rows:1fr auto;min-width:0}
.pf-card[data-wide="1"]{grid-column:1 / -1}
.pf-card[hidden]{display:none}
.pf-card__link{display:grid;grid-template-rows:1fr auto;min-width:0;color:inherit}
.pf-card__media{position:relative;overflow:hidden;background:rgba(128,128,128,.14)}
.pf-card__media .media-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity var(--dur-base) var(--ease)}
.media-pic{display:contents}
.pf-card__media.has-embed{background:#e4e0d4}
.pf-card__embed{position:absolute;left:50%;top:50%;width:760px;height:260px;border:0;background:transparent;pointer-events:none;transform:translate(-50%,-50%) scale(var(--s,.5));transform-origin:center}
@media (max-width:767px){.pf-card[data-ratio] .pf-card__media.has-m{aspect-ratio:var(--ar-m)}}
.pf-card[data-ratio="w"] .pf-card__media{aspect-ratio:16/10}
.pf-card[data-ratio="p"] .pf-card__media,.pf-card[data-ratio="fill"] .pf-card__media{aspect-ratio:4/5}
.pf-card[data-ratio="s"] .pf-card__media{aspect-ratio:1/1}
.pf-card__type{display:block;padding-top:var(--sp-16);font-size:1.125rem;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.pf-card__meta{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:var(--sp-16);margin-top:4px;font-size:var(--fs-small);line-height:1.4}
.pf-card__brand{color:var(--scene-fg-2)}
.pf-card__scope{margin:6px 0 0;font-size:var(--fs-small);line-height:1.45;color:var(--scene-fg-2)}
/* visible live-site link on web works: a real underlined text link in the scene's strong colour */
.pf-card__live{display:inline-flex;align-items:center;min-height:44px;margin-block:-12px;font-weight:700;color:var(--pf-live,var(--crimson));text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
.pf-card__live:hover,.pf-card__live:focus-visible{text-decoration-thickness:2px}
.pf-card__live:focus-visible{outline:2px solid var(--scene-focus);outline-offset:3px}

/* interaction only where there is a working target */
.pf-card__link.is-link{cursor:pointer}
.pf-card__link.is-link .pf-card__type::after{content:"\2192";display:inline-block;margin-left:.45em;opacity:1;transition:transform var(--dur-base) var(--ease)}
.pf-card__link.is-link:hover .pf-card__type,.pf-card__link.is-link:focus-visible .pf-card__type{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.pf-card__link.is-link:hover .pf-card__type::after,.pf-card__link.is-link:focus-visible .pf-card__type::after{transform:translateX(4px)}
.pf-card__link.is-link:hover .media-img,.pf-card__link.is-link:focus-visible .media-img{opacity:.86}
.pf-card__link.is-link:focus-visible{outline:2px solid var(--scene-focus);outline-offset:6px}

@media (min-width:64rem){
  .pf-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--sp-24);row-gap:var(--sp-56)}
  .pf-card,.pf-card[data-wide="1"]{grid-column:span var(--span,4)}
  .pf-card__type{min-height:3.55rem}
  .pf-card__meta{min-height:1.4em}
  /* a narrow card sharing a row with a wide one fills the row height */
  .pf-card[data-ratio="fill"] .pf-card__media{aspect-ratio:auto;min-height:0}
}
}