/* ============================================================
   PROJECT FOLDER STACK
   A single row of manila-folder tabs (real paper-grain texture,
   tinted per project) sits above an open panel previewing whichever
   project is active. Hover/focus a tab to preview it; click to open
   the project page. There is only ONE row of tabs — they are the
   navigation, not a decorative echo below the panel too.
   ============================================================ */

/* Per the Figma reference (figma-reference/1 home.jpg): this intro is
   right-aligned, not centered, and sits above the right-hand side of
   the folder stack below it. */
.projects__intro {
  text-align: right;
  margin-bottom: var(--space-5);
}

/* The base `section` rule's own bottom padding (base.css) was leaving
   a plain-background gap between the bottom of the (edge-to-edge)
   folder stack and the wall texture starting at the top of #contact
   right after it — the "salto" between the two sections. Removing
   just this section's bottom padding lets the frontmost folder panel
   sit flush against the wall background with no gap. */
.projects {
  padding-bottom: 0;
}

/* "LET'S TAKE A LOOK AT" in Figma is small uppercase sans-serif (DM
   Sans, the site's body font), not italic and not the mono label
   font — Geist Mono is reserved for actual labels/the contact sheet. */
.projects__eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--fs-small);
  opacity: 0.6;
  text-wrap: pretty;
}

/* "SOME OF MY PROJECTS" in Figma is Instrument Serif ITALIC at its
   normal weight — font-weight:800 doesn't exist for this typeface
   (only 400 is loaded, see the Google Fonts link in index.html) and
   was rendering as a faux-bold that didn't match every other headline
   on the site, which is what read as "wrong typography". */
.projects__heading {
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--fs-title-section);
  line-height: 1.05;
  text-wrap: pretty;
}

/* ============================================================
   FOLDER STACK V2

   Six independent folders (tab + strip + panel fused into one
   coloured/textured shape per project — see main.js's FOLDER_GEOMETRY
   comment for exactly how the shape and stacking numbers were
   measured from the Figma export). No shared preview panel: each
   folder carries its own preview content, hidden until that folder
   is hovered/focused.

   Default stacking is pure DOM order — later folders paint over
   earlier ones automatically, no z-index needed. On hover, JS shifts
   every folder AFTER the hovered one down by that folder's exact
   `shiftDelta` (main.js), which lands their new top precisely on the
   hovered folder's revealed bottom edge — no gap, no overlap.

   Full-bleed: escapes .projects' own gutter/max-width (the standard
   100vw + centering-offset trick) so the strips and the revealed
   panel both run edge-to-edge at every stack depth, not just at rest. */
.folder-stack-v2 {
  position: relative;
  width: calc(100vw - var(--sbw, 0px));
  left: 50%;
  right: 50%;
  margin-left: calc(-50vw + var(--sbw, 0px) / 2);
  margin-right: calc(-50vw + var(--sbw, 0px) / 2);
  aspect-ratio: 1440 / 777;
}

/* Mobile: a much taller, mostly-vertical cascade (MOBILE_FOLDER_GEOMETRY,
   main.js) instead of the tight horizontal band above — needs a
   portrait-ish aspect-ratio to match, not the desktop one. */
@media (max-width: 640px) {
  .folder-stack-v2 {
    aspect-ratio: 375 / 720;
  }
}

/* Purely a shadow-casting shell around the actual (clipped) folder
   button — Safari clips a filter's rendered output to that same
   element's own clip-path (a known WebKit behaviour: the filter
   region doesn't extend past the clip), so a drop-shadow on the
   clipped button itself never painted there no matter how strong,
   even though it rendered fine in Chrome. Putting it on this
   unclipped wrapper instead fixes that everywhere. top/height are set
   inline per folder from FOLDER_GEOMETRY; pointer-events:none so this
   plain (unclipped, rectangular) box never intercepts hover/click —
   that stays on the folder button inside it, the only thing that's
   actually per-pixel hit-testable. transform (the accordion
   shift/lift, main.js) lives here too, so shadow and folder move
   together as one visual unit. */
.folder-v2-wrap {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
  /* Now that the wrapper fix (above) actually lets this render in
     every browser, full-black/wide-blur turned out to be too much —
     small offset, moderate blur, and well under full opacity. */
  filter: drop-shadow(0 -1.5px 5px rgba(0,0,0,0.5));
  transition: transform var(--dur-medium) var(--ease-out),
    filter var(--dur-medium) var(--ease-out);
}

/* The shadow is always present (above); revealing a folder lifts it
   further off the pile, so its shadow should read deeper too. :has()
   reaches into the wrapper from the folder button's own .is-revealed
   (toggled in main.js) without needing that class duplicated onto
   both elements. */
.folder-v2-wrap:has(.folder-v2.is-revealed) {
  filter: drop-shadow(0 -2px 6px rgba(0,0,0,0.6));
}

.folder-v2 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  appearance: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  /* pointer-events is inherited — without re-declaring it here, this
     button silently inherited "none" from .folder-v2-wrap above it,
     which killed all hover/click on every folder. */
  pointer-events: auto;
  /* clip-path is set inline per folder from FOLDER_GEOMETRY — each
     one's shape is unique. */
}

/* Flat-colour folders (app-branding, food-labeling): a colour tint
   plus the generic grain swatch blended on top for a bit of material
   feel — this is the pair that's genuinely a flat brand colour, so
   the colour has to carry the surface, texture is just a finish. */
/* Flat colour by default. The grain comes from each project's own
   texture photo (.folder-v2--photo below); the two projects without
   one (food labelling, app branding) show their colour plain. A
   generic paper-grain.jpg used to be layered here, but the file was
   never shipped, so it only ever produced a 404. */
.folder-v2__surface {
  position: absolute;
  inset: 0;
  background-color: var(--folder-color, #8F8369);
}

/* Photo/texture folders: the cropped *_carpeta.jpg IS the real paper
   colour and grain already — no colour-tint layer, and no overlay
   blend. That blend was tried first and multiplies a light grain
   photo against whatever's underneath; against these already-dark
   folder colours it barely moved the result off flat, which is why
   the texture wasn't visibly showing at all — showing the photo
   plainly (own natural color) is both correct and legible. */
.folder-v2--photo .folder-v2__surface {
  background-image: var(--folder-texture);
  background-size: cover;
  background-position: center;
}

.folder-v2:hover .folder-v2__surface,
.folder-v2:focus-visible .folder-v2__surface {
  filter: brightness(1.06);
}

/* The project name lives INSIDE the tab itself (the pennant sticking
   out above the strip) — per the Figma reference, always visible
   (unlike .folder-v2__preview below), in every state including the
   default resting one. left/width/height set inline in main.js to
   match this folder's own tab bounding box exactly. --folder-accent
   (per project, content.js) keeps it readable against tabs of very
   different brightness (dark brown vs. pale yellow, etc). */
.folder-v2__label {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 0.4em;
  font-family: var(--font-mono-label);
  font-size: clamp(0.6rem, 0.85vw, 0.75rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--folder-accent, var(--color-bg));
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 640px) {
  .folder-v2__label {
    font-size: clamp(0.5rem, 3vw, 0.6rem);
  }
}

/* Preview content — hidden by default (opacity:0), fades in only for
   the currently-revealed folder. top matches the shape's own tabFrac,
   so it starts right at the flat strip/panel area, never under the
   slanted tab. pointer-events:none so it never steals the button's
   own hover/click even while fading in/out.

   Two groups side by side (image, text), vertically centered on each
   other (align-items:center) — which side each lands on alternates
   per project (main.js sets --text-left on odd projects out of
   SITE_CONTENT.projects' reading order). Default (no modifier) is the
   image-left/text-right project's layout; row-reverse flips it. */
/* justify-content:center (not space-between) so the image sits close
   to the text with a fixed gap regardless of how much horizontal room
   the headline actually uses — space-between pinned image and text to
   the two opposite panel edges, which looked fine for long headlines
   that already filled most of the row, but stranded the photo far off
   in a corner whenever the headline was short (food-labeling,
   restaurant-branding, editorial-illustration). */
.folder-v2__preview {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-6);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
}

.folder-v2__preview--text-left {
  flex-direction: row-reverse;
}

.folder-v2.is-revealed .folder-v2__preview {
  opacity: 1;
}

/* On a phone it never appears at all: there is no hover, so main.js
   never builds the reveal machinery and no folder is ever
   .is-revealed (see the matchMedia gate in initFolderStackV2).
   It was still being laid out, though, at the size it has on a
   desktop — a 220px photograph beside a headline, with 64px of gap
   and 64px of padding either side. Invisible, but a good hundred px
   wider than the screen, and that width counted: the whole page could
   be dragged sideways on a phone.
   This has to sit AFTER the rule above rather than with the other
   mobile overrides further up the file — a media query adds no
   specificity, so up there the `display: flex` below it simply won. */
@media (max-width: 640px) {
  .folder-v2__preview {
    display: none;
  }
}

.folder-v2__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: right;
}

.folder-v2__preview--text-left .folder-v2__text {
  text-align: left;
}

.folder-v2__headline {
  font-family: var(--font-headline);
  font-style: italic;
  /* Caps out at 50pt on wide viewports, per Clara — scales down
     fluidly below that like the rest of the site's type. */
  font-size: clamp(1.75rem, 5vw, 50pt);
  line-height: 1.15;
  color: var(--folder-preview-text, #000);
  /* Restaurant branding's headline carries a literal line break
     (content.js) — pre-line renders it without needing HTML markup
     in what is otherwise plain content-file text. */
  white-space: pre-line;
  text-wrap: pretty;
}

/* Discipline labels, plain text (no pill), joined with " · " already
   in the string main.js builds. */
.folder-v2__tagline {
  font-family: var(--font-mono-label);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--folder-preview-text, #000);
  opacity: 0.85;
}

/* Each project's preview image (assets/projects/*.png, from
   v02-correct) is already its own finished sticker/mockup — an
   irregular cutout on a transparent background, some already carrying
   their own baked-in rotation and polaroid-style framing (the
   restaurant/food-labeling photos), others a plain logo (nightlife,
   app-branding). So no forced square/cover-crop, no added white
   backing, no added rotation here — that was papering a white box
   behind an image that didn't need one. filter:drop-shadow (not
   box-shadow) follows each image's own irregular alpha silhouette
   rather than casting a shadow from its rectangular bounding box. */
/* ~2x the previous size (clamp(128px,18vw,220px)) — was reading as
   too small/cornered next to the (now-centered) text, per Clara. */
.folder-v2__photo {
  width: clamp(220px, 32vw, 400px);
  height: auto;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.35));
}

.folder-v2:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: -4px;
}

/* Printed directly on the front folder's own panel (top/height set in
   main.js from that folder's own geometry, below its tab) rather than
   as a block under the stack — Instrument Serif italic in white/cream,
   the same as it reads in Figma. pointer-events:none so it never
   blocks hovering whatever tab/strip is underneath it. Hidden the
   moment any folder is revealed (.has-reveal, toggled in main.js) —
   this is a detail of the section's resting state only. */
.projects__closing {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  padding-inline: var(--space-6);
  /* Sits right at the panel's own bottom edge, not centered in its
     remaining space. */
  padding-bottom: 25px;
  font-family: var(--font-headline);
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.75rem);
  color: var(--color-bg);
  pointer-events: none;
  transition: opacity var(--dur-medium) var(--ease-out);
  text-wrap: pretty;
}

.folder-stack-v2.has-reveal .projects__closing {
  opacity: 0;
}