/* ============================================================
   LCFLCKS PHOTOGRAPHY: PORTRAITS PAGE
   ============================================================ */

.portraits-header__cta { margin-top: var(--space-6); }

.portraits-filters { margin-bottom: var(--space-8); }
.portraits-filters[hidden], .filter-tab[hidden] { display: none; }

.portraits-empty {
  padding: var(--space-16) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-stone);
  text-align: center;
}
.portraits-empty a { color: var(--color-accent); text-decoration: underline; }

/* Session types */
.sessions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}
.session-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-ink);
}
.session-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
}
.session-card p {
  color: var(--color-ink-muted);
  line-height: var(--leading-normal);
  flex: 1;
}
.session-card .link-arrow { margin-top: var(--space-2); color: var(--color-accent); }

/* How it works */
.process {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}
.process__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.process h4 { margin-bottom: var(--space-2); }
.process p { color: var(--color-ink-muted); line-height: var(--leading-normal); }

.portraits-pricing { margin-top: var(--space-12); color: var(--color-ink-muted); max-width: 60ch; }
.portraits-cta { margin-top: var(--space-6); }

.sessions-grid--two { grid-template-columns: repeat(2, 1fr); max-width: 820px; }

@media (max-width: 1024px) {
  .sessions-grid, .process { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .sessions-grid, .sessions-grid--two, .process { grid-template-columns: 1fr; }
}

/* Row-order grid so the file order (01, 02, 03...) reads left to right.
   Portrait photos are 2:3, a landscape photo spans two columns. */
#portraits-grid {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  gap: 3px;
}
#portraits-grid .gallery-item { margin: 0; }
#portraits-grid .gallery-card { height: 100%; }
#portraits-grid .gallery-card img {
  aspect-ratio: 2 / 3;
  height: 100%;
  object-fit: cover;
}
#portraits-grid .gallery-item.is-wide { grid-column: span 2; }
#portraits-grid .gallery-item.is-wide img { aspect-ratio: auto; }

@media (max-width: 1024px) {
  #portraits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  #portraits-grid { grid-template-columns: 1fr; }
  #portraits-grid .gallery-item.is-wide { grid-column: auto; }
}