/* ─────────────────────────────────────────────
   Portfolio — image-led wedding stories.
   Hover effects gated to @media (hover: hover) and (pointer: fine).
   Touch/mobile: static details always visible, stacked layout.
   ───────────────────────────────────────────── */

/* Intro */
.portfolio-intro {
  padding-block: var(--space-6) var(--space-6);
  text-align: center;
}
.portfolio-intro__eyebrow { margin-bottom: var(--space-3); }
.portfolio-intro__line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.3;
  margin: 0 auto;
  max-width: 28ch;
  color: var(--ink);
}

/* Portfolio-specific entrance reveal — 20px, 700ms, fires at 20% via portfolio.js */
html.reveal-enabled [data-portfolio-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 700ms cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: opacity, transform;
}
html.reveal-enabled [data-portfolio-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Story list */
.portfolio-list {
  display: grid;
  gap: clamp(var(--space-6), 8vw, var(--space-8));
  padding-bottom: 0;
  max-width: 1080px;
  margin-inline: auto;
}

.portfolio-entry__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Frame wraps image (+ caption on desktop) */
.portfolio-entry__frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
}
.portfolio-entry__image {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* Story index — JS-injected "01 ◇" before caption content */
.portfolio-entry__index {
  display: block;
  font-family: var(--font-label);
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  font-variant-caps: small-caps;
  color: rgba(168, 92, 54, 0.55);
  margin-bottom: var(--space-1);
  line-height: 1;
}

/* Darkening gradient overlay — hidden by default */
.portfolio-entry__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(46,38,32,0.55) 0%, rgba(46,38,32,0.1) 45%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}

/* Accent border inset — hidden by default */
.portfolio-entry__frame::before {
  content: "";
  position: absolute;
  inset: var(--space-2);
  border: 1px solid var(--accent);
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
  z-index: 2;
}

/* Caption overlay — hidden by default, shown on hover (desktop) or always (touch) */
.portfolio-entry__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(var(--space-3), 3vw, var(--space-5));
  color: var(--paper);
  z-index: 3;
  transform: translateY(0.6rem);
  opacity: 0;
}
.portfolio-entry__meta-label {
  color: var(--paper);
  opacity: 0.85;
  margin: 0 0 var(--space-1);
}
.portfolio-entry__couple {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.05;
  color: var(--paper);
  margin: 0 0 var(--space-1);
}
.portfolio-entry__descriptor {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body);
  color: var(--paper);
  opacity: 0.9;
  margin: 0;
  max-width: 42ch;
}

/* ── Touch: caption always visible, no transitions ── */
@media (hover: none) {
  .portfolio-entry__caption {
    opacity: 1;
    transform: none;
  }
  .portfolio-entry__frame::after {
    opacity: 1;
  }
  .portfolio-entry__frame::before {
    display: none;
  }
}

/* ── Desktop hover: animations gated to pointer devices only ── */
@media (hover: hover) and (pointer: fine) {
  .portfolio-entry__image {
    transition: transform 1.1s cubic-bezier(0.16,1,0.3,1), filter 0.6s ease;
  }
  .portfolio-entry__frame::after {
    transition: opacity 0.6s ease;
  }
  .portfolio-entry__frame::before {
    transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1);
  }
  .portfolio-entry__caption {
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16,1,0.3,1);
  }
  .portfolio-entry__link:hover .portfolio-entry__image  { transform: scale(1.04); }
  .portfolio-entry__link:hover .portfolio-entry__frame::after  { opacity: 1; }
  .portfolio-entry__link:hover .portfolio-entry__frame::before { opacity: 1; transform: scale(1); }
  .portfolio-entry__link:hover .portfolio-entry__caption       { opacity: 1; transform: translateY(0); }
  .portfolio-entry__link:focus-visible .portfolio-entry__caption    { opacity: 1; transform: translateY(0); }
  .portfolio-entry__link:focus-visible .portfolio-entry__frame::after { opacity: 1; }
}

/* ── 3 rotating frame treatments (desktop) ── */
/* Treatment A (entries 1,4): clean full-bleed wide */
.portfolio-entry:nth-child(3n+1) .portfolio-entry__image { aspect-ratio: 3/2; }

/* Treatment B (entries 2,5): matted — inset image on paper with border */
.portfolio-entry:nth-child(3n+2) .portfolio-entry__frame {
  background: var(--paper);
  padding: clamp(var(--space-2), 2vw, var(--space-4));
  border: 1px solid var(--rule);
  border-radius: 0;
}
.portfolio-entry:nth-child(3n+2) .portfolio-entry__image { aspect-ratio: 4/5; }
.portfolio-entry:nth-child(3n+2) .portfolio-entry__frame::before { inset: calc(var(--space-2) + 0.4rem); }

/* Treatment C (entry 3): portrait dog-ear */
.portfolio-entry:nth-child(3n) .portfolio-entry__image { aspect-ratio: 4/5; }
.portfolio-entry:nth-child(3n) .portfolio-entry__frame {
  --dog: 2.2rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--dog)), calc(100% - var(--dog)) 100%, 0 100%);
}

/* Constrain matted + dog-ear entries to narrower column for rhythm */
.portfolio-entry:nth-child(3n+2),
.portfolio-entry:nth-child(3n) {
  max-width: 760px;
  margin-inline: auto;
  width: 100%;
}

/* ── Mobile + touch: stacked layout (image above, text below) ── */
@media (max-width: 760px) and (hover: none) {
  /* Strip all frame treatments — plain image on top, text below */
  .portfolio-entry__frame,
  .portfolio-entry:nth-child(3n+2) .portfolio-entry__frame,
  .portfolio-entry:nth-child(3n) .portfolio-entry__frame {
    display: flex;
    flex-direction: column;
    overflow: visible;
    background: none;
    padding: 0;
    border: none;
    clip-path: none;
    border-radius: 0;
  }
  .portfolio-entry__image {
    border-radius: 2px;
  }
  /* Caption: below image, on page background */
  .portfolio-entry__caption {
    position: static;
    padding: var(--space-2) 0 0;
    margin-top: var(--space-2);
    color: var(--ink);
    text-align: left;
    border-top: 1px solid rgba(168, 92, 54, 0.55);
  }
  .portfolio-entry__frame::after { display: none; }
  .portfolio-entry__frame::before { display: none; }
  .portfolio-entry__meta-label { color: var(--ink); opacity: 0.6; margin-bottom: var(--space-1); }
  .portfolio-entry__couple {
    color: var(--ink);
    font-size: var(--fs-h3);
    margin-bottom: var(--space-1);
  }
  .portfolio-entry__descriptor { color: var(--ink); opacity: 0.75; }
  /* Restore constrained entries to full width on mobile */
  .portfolio-entry:nth-child(3n+2),
  .portfolio-entry:nth-child(3n) {
    max-width: 100%;
  }
}

/* ── Mobile: general tweaks (all pointer types) ── */
@media (max-width: 760px) {
  .portfolio-intro__line { font-size: var(--fs-h3); }
}

/* ── Close CTA — reuses homepage component pattern ── */
.beat {
  padding-block: var(--space-7);
}
.beat--paper   { background: var(--paper); }
.beat--close-hero {
  padding-block: 10rem;
}
.close-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}
.close-hero__kicker {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.5;
  margin-bottom: var(--space-4);
}
.close-hero__keyline {
  width: 60%;
  height: 1px;
  background: rgba(168, 92, 54, 0.55);
}
.close-hero__keyline--top    { margin-bottom: var(--space-5); }
.close-hero__keyline--bottom { margin-top: var(--space-5); margin-bottom: var(--space-6); }
.close-hero__container {
  padding: var(--space-4) var(--space-5);
  background:
    linear-gradient(rgba(168,92,54,0.55), rgba(168,92,54,0.55)) top    left  / 1px  20px no-repeat,
    linear-gradient(rgba(168,92,54,0.55), rgba(168,92,54,0.55)) top    left  / 20px 1px  no-repeat,
    linear-gradient(rgba(168,92,54,0.55), rgba(168,92,54,0.55)) top    right / 1px  20px no-repeat,
    linear-gradient(rgba(168,92,54,0.55), rgba(168,92,54,0.55)) top    right / 20px 1px  no-repeat,
    linear-gradient(rgba(168,92,54,0.55), rgba(168,92,54,0.55)) bottom left  / 1px  20px no-repeat,
    linear-gradient(rgba(168,92,54,0.55), rgba(168,92,54,0.55)) bottom left  / 20px 1px  no-repeat,
    linear-gradient(rgba(168,92,54,0.55), rgba(168,92,54,0.55)) bottom right / 1px  20px no-repeat,
    linear-gradient(rgba(168,92,54,0.55), rgba(168,92,54,0.55)) bottom right / 20px 1px  no-repeat;
}
.close-hero__line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2vw + 0.75rem, 2.4rem);
  font-weight: 400;
  line-height: 1.3;
  max-width: 34ch;
  color: var(--ink);
  margin: 0;
}
.close__cta {
  display: inline-block;
  padding: 1rem 2.5rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-decoration: none;
  transition: background-color 400ms ease, color 400ms ease;
}
.close__cta:hover,
.close__cta:active {
  background-color: var(--accent);
  color: var(--paper);
  text-decoration: none;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  html.reveal-enabled [data-portfolio-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .portfolio-entry__image,
  .portfolio-entry__caption,
  .portfolio-entry__frame::before,
  .portfolio-entry__frame::after { transition: none; }
  .close__cta { transition: none; }
  .beat--close-hero { padding-block: 6rem; }
}

/* ── Mobile close hero ── */
@media (max-width: 760px) {
  .beat--close-hero { padding-block: 6rem; }
  .close-hero__container { padding: var(--space-3); }
  .close-hero__keyline { width: 80%; }
  .close-hero__line { font-size: var(--fs-h3); }
}