/* airepro-portfolio.css – a portfólió PROJEKT-OLDAL megosztott stílusa.
   Forrás: a 9 /portfolio/<slug>/index.html bájtazonos inline <style> tailjéből kiemelve (2026-06-19, B-refaktor).
   FONTOS: a blocks.css UTÁN linkelendő – a portfólió .compare (container-type+100cqw) így nyer a blocks.css .compare (100vw) felett.
   Minden globális portfólió-mobil módosítás EBBE a fájlba megy (egy hely, nincs ×9 drift). */

/* --- portfólió projekt-oldal (Woodmart developer-etalon, sticky meta) --- */
.pf-morzsa{font-size:13px;color:var(--d-text-2);margin-bottom:18px}
.pf-morzsa a{color:var(--d-text-2);text-decoration:none}.pf-morzsa a:hover{color:var(--c-primary)}
.pf-projekt{display:grid;grid-template-columns:1fr 380px;gap:48px;align-items:start}
.pf-galeria-col{display:flex;flex-direction:column;gap:18px}
.pf-galeria-col .tile{aspect-ratio:1/1;border-radius:16px;overflow:hidden;border:1px solid var(--d-border)}
.pf-galeria-col .tile img{width:100%;height:100%;object-fit:cover;display:block}
.pf-galeria-col .tile.ph{display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(135deg,rgba(56,172,255,.10),rgba(255,255,255,.03));border-style:dashed;color:var(--d-text-2);font-family:var(--font-title);font-weight:700;font-size:13px;letter-spacing:1px;line-height:1.5}
.pf-oldalsav{position:sticky;top:96px}
.pf-kat{font-family:var(--font-title);font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--c-primary);margin-bottom:10px}
.pf-oldalsav h1{font-size:clamp(26px,2.6vw,34px);font-family:var(--font-title);font-weight:700;color:var(--d-title);line-height:1.15;margin:0 0 8px}
.pf-alcim{font-size:15px;color:var(--d-text-2);margin:0 0 14px}
.pf-leiras{font-size:14.5px;color:var(--d-text-2);line-height:1.65;margin:0 0 20px}
.pf-meta{display:flex;flex-direction:column;gap:12px}
.pf-meta .box{background:var(--d-bg-emelt);border:1px solid var(--d-border);border-radius:14px;padding:14px 18px}
.pf-meta .box b{display:block;font-family:var(--font-title);font-weight:700;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--c-primary);margin-bottom:5px}
.pf-meta .box span{font-size:13.5px;color:var(--d-text-2);line-height:1.45}
.pf-meta .box>summary{list-style:none;display:block}
.pf-meta .box>summary::-webkit-details-marker{display:none}
@media(max-width:900px){
  /* MOBIL: identitás előre, galéria carousel középre, paraméterek FAQ-ként hátra */
  .pf-projekt{display:flex;flex-direction:column;gap:24px;align-items:stretch}
  .pf-oldalsav{position:static;display:contents}
  .pf-fej{order:1}
  .pf-galeria-col{order:2}
  .pf-meta{order:3}
  /* galéria → vízszintes scroll-snap carousel (full-bleed a konteneresből) */
  .pf-galeria-col{flex-direction:row;flex-wrap:nowrap;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -24px;padding:4px 24px;scroll-padding:0 24px}
  .pf-galeria-col::-webkit-scrollbar{display:none}
  .pf-galeria-col .tile{flex:0 0 82%;scroll-snap-align:center}
  .pf-galeria-col .tile:only-child{flex:0 0 100%}
  /* paraméterek → ELEMENKÉNT lenyíló accordion (minden box külön <details>) */
  .pf-meta .box{padding:0;width:100%}
  .pf-meta .box>summary{cursor:pointer;display:block;position:relative;width:100%;box-sizing:border-box;padding:13px 42px 13px 16px}
  .pf-meta .box>summary b{margin:0}
  .pf-meta .box>summary::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:2px solid var(--c-primary);border-bottom:2px solid var(--c-primary);transform:translateY(-50%) rotate(-45deg);transition:transform var(--dur)}
  .pf-meta .box[open]>summary::after{transform:translateY(-50%) rotate(45deg)}
  .pf-meta .box>span{display:block;padding:0 16px 13px}
}
.compare{position:relative;width:100%;overflow:hidden;cursor:ew-resize;-webkit-user-select:none;user-select:none;touch-action:pan-y;container-type:inline-size}
.compare img{width:100%;height:min(70vh,640px);object-fit:cover;pointer-events:none;display:block}
.compare .elotte{position:absolute;inset:0;overflow:hidden;width:50%}
.compare .elotte img{width:100cqw;max-width:none;height:min(70vh,640px);object-fit:cover}
.cs-felirat{position:absolute;top:18px;font-family:var(--font-title);font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;padding:7px 14px;border-radius:20px;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;border:1px solid var(--d-border);pointer-events:none}
.cs-felirat.bal{left:18px}.cs-felirat.jobb{right:18px;color:var(--c-primary)}
.valaszto{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 18px var(--d-glow);pointer-events:none}
.valaszto::after{content:"\00ab \00bb";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;color:#111;font-family:var(--font-title);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(0,0,0,.5)}
.pf-lapozo{display:flex;justify-content:space-between;align-items:center;gap:16px}
.pf-lapozo a{font-family:var(--font-title);font-weight:700;font-size:14px;color:var(--c-primary);text-decoration:none}
.pf-lapozo .tiltott{font-family:var(--font-title);font-weight:700;font-size:14px;color:#54545a}
.pf-diszk{max-width:720px;margin:0 auto;text-align:center;background:var(--d-bg-emelt);border:1px solid var(--d-border);border-radius:14px;padding:18px 24px;font-size:14px;color:var(--d-text-2);line-height:1.6}
.pf-diszk strong{color:var(--d-text)}

/* MOBIL: compare-képpár FEKVŐ doboz (a base álló min(70vh) helyett – csak így érthető az összehasonlítás ebben a képarányban) */
@media(max-width:900px){
  .compare img{height:auto;aspect-ratio:3/2}
  .compare .elotte img{height:auto;aspect-ratio:3/2}
}
/* DESKTOP: a paraméterek NEM lenyílók – az érték mindig látszik, nincs nyíl/pointer (author-origin felülírja a details UA-rejtést) */
@media(min-width:901px){
  .pf-meta .box>summary{cursor:default}
  .pf-meta .box>span{display:block}
}