/* ================================================================
   DOUGLAS FISHER CREATIVE — Portfolio Grid & Modal
   File: portfolio.css
   ================================================================

   DEPENDENCIES
   ------------
   This file relies on the CSS custom properties defined in
   styles.css (the site-wide merged stylesheet). Load styles.css
   BEFORE this file. The fonts (Cormorant Garamond and DM Sans)
   must also already be loaded.

   SELECTOR NAMESPACE
   ------------------
   All selectors use the "pf-" prefix (portfolio) to avoid
   collision with existing site styles. BEM conventions are used:
     .pf-block             — block
     .pf-block__element    — element
     .pf-block--modifier   — modifier

   BREAKPOINTS (match the site system)
   ------------------------------------
     ≥ 901px   Desktop / landscape tablet  → 3 columns
     581–900px Portrait tablet             → 2 columns
     ≤ 580px   Mobile                      → 1 column
   ================================================================ */


/* ── SECTION WRAPPER ──────────────────────────────────────────── */

.pf-section {
  background: var(--light-gray);     /* #E3E4E5 — matches site palette */
  padding: 5rem 6vw 6rem;
}


/* ── GRID ─────────────────────────────────────────────────────── */

.pf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

/* Portrait tablet — 2 columns */
@media (max-width: 900px) {
  .pf-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile — 1 column */
@media (max-width: 580px) {
  .pf-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}


/* ── CARD ─────────────────────────────────────────────────────── */

/*
 * The card is a <button> so it is keyboard-reachable and
 * screen-reader-friendly without JavaScript tricks.
 * It is reset from browser defaults, then built up as a card.
 */
.pf-card {
  /* Reset button defaults */
  appearance: none;
  -webkit-appearance: none;
  background: var(--white);
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;

  /* Card layout */
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;

  /* Subtle shadow + lift on hover */
  box-shadow: 0 1px 4px rgba(57,61,71,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pf-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(57,61,71,0.13);
}

/* Focus-visible ring — keeps keyboard users oriented */
.pf-card:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}


/* ── CARD IMAGE ───────────────────────────────────────────────── */

/*
 * The image wrapper holds a fixed aspect ratio so all cards are
 * uniform height regardless of the uploaded image's proportions.
 * overflow:hidden combined with object-fit:cover on the <img>
 * fills the frame without distortion.
 */
.pf-card__img-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 65%;        /* 100 ÷ 65 ≈ 1.54:1 — close to 3:2 */
  overflow: hidden;
  background: var(--dark);    /* Visible while image loads */
}

.pf-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.45s ease;
}

/* Subtle zoom on hover (the overflow:hidden clips it cleanly) */
.pf-card:hover .pf-card__img {
  transform: scale(1.05);
}


/* ── CARD HOVER OVERLAY ───────────────────────────────────────── */

/*
 * A dark overlay with a "zoom in" icon fades in on hover,
 * signaling that the card is clickable.
 */
.pf-card__hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(38, 41, 48, 0);   /* Starts fully transparent */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.pf-card:hover .pf-card__hover-overlay {
  background: rgba(38, 41, 48, 0.58);
}

.pf-card__hover-overlay svg {
  color: var(--white);
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 0.25s ease 0.05s, transform 0.25s ease 0.05s;
}

.pf-card:hover .pf-card__hover-overlay svg {
  opacity: 1;
  transform: scale(1);
}


/* ── CARD CAPTION ─────────────────────────────────────────────── */

.pf-card__caption {
  padding: 0.85rem 1rem 1rem;
  flex: 1;                   /* Caption fills remaining card height */
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Row: title (left) + pillar tag (right) */
.pf-card__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Title — Cormorant Garamond italic, brand orange */
.pf-card__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  font-style: italic;
  color: var(--orange);
  line-height: 1.25;
  flex: 1;
}

/* Pillar tag — small, gray, right-aligned */
.pf-card__pillar {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: capitalize;
  color: var(--mid-gray);
  white-space: nowrap;
  padding-top: 3px;          /* Align with the first line of the title */
}

/* Description — small, italic, muted */
.pf-card__desc {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 300;
  font-style: italic;
  color: var(--mid-gray);
  line-height: 1.55;
  margin: 0;
}


/* ── NO RESULTS MESSAGE ───────────────────────────────────────── */

.pf-no-results {
  grid-column: 1 / -1;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--mid-gray);
  font-style: italic;
  text-align: center;
  padding: 3rem 0;
}


/* ── MODAL BACKDROP ───────────────────────────────────────────── */

.pf-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* Hidden state — controlled by the `hidden` HTML attribute */
.pf-modal[hidden] {
  display: none;
}

/* Opening animation: the modal fades in */
.pf-modal.is-open {
  animation: pfFadeIn 0.22s ease forwards;
}

@keyframes pfFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Semi-opaque dark overlay behind the modal panel */
.pf-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(38, 41, 48, 0.88);
  cursor: pointer;             /* Signals backdrop is clickable to close */
}


/* ── MODAL PANEL ──────────────────────────────────────────────── */

.pf-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--white);
  width: 100%;
  max-width: 820px;
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Smooth panel appearance */
  animation: pfSlideUp 0.25s ease forwards;
}

@keyframes pfSlideUp {
  from { transform: translateY(16px); opacity: 0.6; }
  to   { transform: translateY(0);    opacity: 1; }
}


/* ── MODAL CLOSE BUTTON ───────────────────────────────────────── */

.pf-modal__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 2;

  /* Appearance */
  appearance: none;
  -webkit-appearance: none;
  background: var(--dark);
  color: var(--cream);
  border: none;
  width: 36px;
  height: 36px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.pf-modal__close:hover  { background: var(--orange); }
.pf-modal__close:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}


/* ── MODAL IMAGE AREA ─────────────────────────────────────────── */

.pf-modal__img-wrap {
  position: relative;
  width: 100%;
  background: var(--dark-deep);  /* Fill while image loads */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The image itself */
.pf-modal__img {
  display: block;
  width: 100%;
  max-height: 58vh;
  object-fit: contain;           /* Letterbox — never crops modal images */
  object-position: center;

  /* Cross-fade on image change (driven by JS class toggle) */
  transition: opacity 0.2s ease;
}

.pf-modal__img.is-changing {
  opacity: 0;
}


/* ── MODAL PREV / NEXT BUTTONS ────────────────────────────────── */

.pf-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;

  appearance: none;
  -webkit-appearance: none;
  background: rgba(57, 61, 71, 0.65);
  color: var(--cream);
  border: none;
  width: 46px;
  height: 56px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.pf-modal__nav:hover  { background: var(--orange); }
.pf-modal__nav:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.pf-modal__nav--prev { left:  0; }
.pf-modal__nav--next { right: 0; }


/* ── MODAL CAPTION ────────────────────────────────────────────── */

.pf-modal__caption {
  padding: 1.5rem 2rem 1.75rem;
  border-top: 1px solid var(--light-gray);
}

/* Row: title (left) + pillar tag (right) */
.pf-modal__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

/* Title — larger than the card version; same Cormorant italic orange */
.pf-modal__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 400;
  font-style: italic;
  color: var(--orange);
  line-height: 1.15;
  flex: 1;
}

/* Pillar tag */
.pf-modal__pillar {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: capitalize;
  color: var(--mid-gray);
  white-space: nowrap;
  padding-top: 5px;
}

/* Description */
.pf-modal__desc {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 300;
  font-style: italic;
  color: #6B6E77;
  line-height: 1.7;
  margin: 0 0 0.75rem;
}

/* "X of Y" counter — small, right-aligned, subtle */
.pf-modal__counter {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--mid-gray);
  text-align: right;
  margin: 0;
}


/* ── FILTER INTEGRATION (Work page) ──────────────────────────── */

/*
 * On the Work / Portfolio page, the existing filter bar
 * (from the site's HTML prototype) hides and shows .pf-card
 * elements. No additional CSS is needed here — the card's
 * default `display: flex` is set by .pf-card above, and
 * portfolio.js sets `display: none` on filtered-out cards.
 *
 * If the portfolio grid layout class is toggled to "filtered"
 * mode (single-pillar view), the grid stays the same — the
 * EE embed already server-side-filters on pillar pages, so no
 * grid class toggle is needed on those pages.
 */


/* ── RESPONSIVE ───────────────────────────────────────────────── */

@media (max-width: 768px) {
  .pf-section {
    padding: 4rem 4vw 5rem;
  }

  .pf-modal {
    padding: 0;
    align-items: flex-end;          /* Slide up from bottom on mobile */
  }

  .pf-modal__panel {
    max-height: 92vh;
    border-radius: 0;
    animation: pfSlideUpMobile 0.28s ease forwards;
  }

  @keyframes pfSlideUpMobile {
    from { transform: translateY(40px); opacity: 0.5; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  .pf-modal__caption {
    padding: 1.25rem 1.25rem 1.5rem;
  }

  .pf-modal__nav {
    width: 38px;
    height: 48px;
  }
}

@media (max-width: 480px) {
  .pf-modal__img {
    max-height: 48vh;
  }
}


/* ── REDUCED MOTION ───────────────────────────────────────────── */

/*
 * Honour the OS "reduce motion" preference. Remove all transforms
 * and transitions for users who have requested it.
 */
@media (prefers-reduced-motion: reduce) {
  .pf-card,
  .pf-card__img,
  .pf-card__hover-overlay,
  .pf-card__hover-overlay svg,
  .pf-modal,
  .pf-modal__panel,
  .pf-modal__img,
  .pf-modal__close,
  .pf-modal__nav {
    transition: none !important;
    animation: none !important;
  }

  .pf-card:hover {
    transform: none;
  }
}