/* ============================================================
   Ovenbird DS — Project Gallery  (.pfc)
   Carrossel full-bleed de fotografia de projeto, reutilizável.
   Depende de styles.css (primitives --ob-*, --font-*).
   ============================================================ */

.pfc {
  /* Tokens locais → mapeados aos primitives do DS (fallback = spec) */
  --pfc-g900:  var(--ob-green-900, #141817);
  --pfc-t600:  var(--ob-teal-600,  #2d8b75);
  --pfc-s500:  var(--ob-sand-500,  #b9af9d);
  --pfc-white: var(--ob-white,     #ffffff);
  --pfc-star:  var(--ob-warning-500, #f59e0b);
  --pfc-i50:   var(--ob-ink-50,    #f3f4f6);

  --pfc-head-font:     var(--font-heading, 'Manrope', sans-serif);
  --pfc-head-weight:   var(--fw-bold, 700);
  --pfc-head-tracking: -0.9px;

  background: var(--pfc-g900);
}

/* Container padrão do DS */
.pfc .wrap {
  width: 100%;
  max-width: var(--layout-max-w, 1216px);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 72px);
}

/* ── Header ─────────────────────────────────────────────── */
.pfc__head { padding: 56px 0 28px; }
.pfc__meta { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.pfc__bird {
  width: 72px; height: auto; flex-shrink: 0;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.55));
}
.pfc__cat {
  font-family: var(--font-meta, 'Manrope', sans-serif);
  font-size: 11px; font-weight: 600; color: var(--pfc-s500);
  text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 5px;
}
.pfc__title {
  font-family: var(--pfc-head-font);
  font-weight: var(--pfc-head-weight);
  font-size: clamp(24px, 3vw, 34px);
  color: var(--pfc-white); line-height: 1.06;
  letter-spacing: var(--pfc-head-tracking);
}
.pfc__place {
  font-family: var(--font-meta, 'Manrope', sans-serif); font-weight: 500;
  font-size: clamp(12px, 1vw, 14px); color: var(--pfc-s500);
  text-transform: uppercase; letter-spacing: 0.18em; margin-top: 2px;
}
.pfc__photo-count {
  font-family: var(--font-meta, 'Manrope', sans-serif); font-weight: 300;
  font-size: 12px; color: rgba(185,175,157,0.6); margin-top: 4px;
}
.pfc__desc {
  font-family: var(--font-meta, 'Manrope', sans-serif); font-weight: 400;
  font-size: clamp(12px, 0.95vw, 13.5px); line-height: 1.5;
  color: rgba(236,232,223,0.74); max-width: 78ch; margin: 0 auto;
  text-align: center; text-wrap: pretty;
}

/* ── Stage + track (scroll-snap nativo) ─────────────────── */
.pfc__clip  { overflow: clip; }
.pfc__stage { position: relative; user-select: none; overflow: hidden; }
.pfc__track {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  gap: 8px;               /* espaçamento mínimo entre as fotos */
  scrollbar-width: none;
}
.pfc__track::-webkit-scrollbar { display: none; }

.pfc__slide {
  flex: 0 0 auto;
  width: auto;                 /* largura adapta à proporção natural da foto */
  aspect-ratio: 2 / 3;         /* placeholder retrato enquanto a foto carrega (evita colapso) */
  position: relative;
  scroll-snap-align: center;   /* foto ativa sempre centralizada na tela */
  height: 78vh;
  max-height: 820px;
  background: #0a0c0b;
  overflow: hidden;
  transition: filter 300ms ease, transform 300ms ease;
}
.pfc__slide:has(img.loaded) { aspect-ratio: auto; }   /* carregou → largura segue a foto (retrato ou paisagem, sem corte) */
.pfc__slide img {
  width: auto; height: 100%;    /* mesma altura para todas; largura segue a foto */
  object-fit: cover;            /* retrato e paisagem exibidos na íntegra, sem corte */
  object-position: center;
  display: block;
  opacity: 0;
  transition: opacity 400ms ease;
}
.pfc__slide img.loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .pfc__slide img { opacity: 1; transition: none; }
}

/* ── Legenda por foto (caption elegante na base) ────────── */
.pfc__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 56px 22px 18px;
  background: linear-gradient(to top, rgba(8,10,9,0.82) 0%, rgba(8,10,9,0.5) 42%, transparent 100%);
  pointer-events: none;
  opacity: 0; transform: translateY(8px);
  transition: opacity 420ms ease, transform 420ms ease;
}
.pfc__slide img.loaded ~ .pfc__caption { opacity: 1; transform: none; }
.pfc__caption span {
  display: block;
  font-family: var(--font-meta, 'Manrope', sans-serif); font-weight: 400;
  font-size: 12px; line-height: 1.45; color: rgba(245,242,235,0.92);
  letter-spacing: 0.005em; text-wrap: pretty;
  max-width: 44ch;
  text-shadow: 0 1px 12px rgba(0,0,0,0.4);
}
@media (prefers-reduced-motion: reduce) {
  .pfc__caption { transition: none; }
}

/* ── Controles ──────────────────────────────────────────── */
.pfc__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(20,24,23,0.7);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  color: var(--pfc-white); font-size: 22px; line-height: 1; cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
  z-index: 3;
}
.pfc__btn:hover { background: var(--pfc-t600); border-color: var(--pfc-t600); }
.pfc__btn:focus-visible { outline: 2px solid var(--pfc-t600); outline-offset: 3px; }
.pfc__btn--prev { left: 16px; }
.pfc__btn--next { right: 16px; }

/* ── Contador (pill) ────────────────────────────────────── */
.pfc__pill {
  position: absolute; top: 16px; right: 16px;
  font-family: var(--font-meta, 'Manrope', sans-serif); font-size: 13px; font-weight: 400;
  color: var(--pfc-white);
  background: rgba(20,24,23,0.85);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 7px 14px; border-radius: 999px;
  z-index: 3;
}

/* ── Dots ───────────────────────────────────────────────── */
.pfc__dots { display: flex; justify-content: center; padding: 18px 0 0; }
.pfc__dots-inner { display: flex; gap: 6px; transition: transform 220ms ease; }
.pfc__dots--windowed { width: 54px; padding: 6px; box-sizing: content-box; overflow: hidden; margin-inline: auto; justify-content: flex-start; }
.pfc__dot  {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.2); border: none; cursor: pointer;
  transition: background 150ms ease, transform 200ms ease, opacity 200ms ease;
  flex-shrink: 0; padding: 0;
}
.pfc__dot.active { background: var(--pfc-s500); transform: scale(1.35); }
.pfc__dot.edge   { transform: scale(0.55); opacity: 0.4; }
.pfc__dot:focus-visible { outline: 2px solid var(--pfc-t600); outline-offset: 3px; }

/* ── Footer / depoimento ────────────────────────────────── */
.pfc__foot   { padding: 18px 0 30px; border-top: none; }
.pfc__testi  {
  width: fit-content;                 /* a caixa abraça o texto — sem espaço lateral ocioso */
  max-width: min(760px, 90%);
  margin-inline: auto; text-align: center;
  background: var(--ob-cream-100, #faf6ef);
  border-radius: var(--radius-lg, 10px);
  padding: 16px 28px;
}
.pfc__stars  { color: var(--pfc-star, #c9a24a); font-size: 13px; letter-spacing: 2px; margin-top: 6px; display: block; }
.pfc__quote  {
  font-family: var(--font-meta, 'Manrope', sans-serif);
  font-size: 13px; color: var(--ob-ink-800, #2a2f2c);
  line-height: 1.5; font-style: normal; margin: 0 0 8px; opacity: 1;
}
.pfc__client { font-family: var(--font-meta, 'Manrope', sans-serif); font-size: 13px; font-weight: 700; color: var(--ob-ink-900, #1a1e1b); display: block; }
.pfc__loc    { display: none; }

/* ── Responsivo — mobile (≤768px) ───────────────────────── */
@media (max-width: 768px) {
  .pfc__head        { padding: 36px 0 16px; }
  .pfc__bird        { width: 50px; }
  .pfc__title       { font-size: 30px; }
  .pfc__slide       { flex: 0 0 100vw; height: 82svh; }
  .pfc__track       { gap: 8px; }
  .pfc__btn         { width: 40px; height: 40px; }
  .pfc__btn--prev   { left: 10px; }
  .pfc__btn--next   { right: 10px; }
  .pfc__dots        { display: none; }
  .pfc__foot        { padding: 18px 0 32px; }
  .pfc__quote       { font-size: 13px; }
}

/* ── Responsivo — desktop (≥769px): mesmo espaçamento do preview ─ */
@media (min-width: 769px) {
  .pfc__stage { overflow: hidden; }
  .pfc__track { gap: 6px; padding-inline: 6px; }   /* espaçamento mínimo entre as fotos — idêntico ao preview */
  .pfc__slide {
    flex: 0 0 auto;
    width: auto;                                   /* largura segue a proporção de cada foto */
    height: clamp(440px, 60vw, 820px);             /* altura ligada à largura → paisagem ocupa ~90vw, só peek dos vizinhos */
    max-height: none;
    max-width: 92vw;                               /* nunca passa de 92vw (garante o peek) */
    scroll-snap-align: center;                     /* ativa sempre centralizada */
    /* não-ativos: esmaecidos e levemente recuados */
    opacity: 0.42;
    filter: saturate(0.78) brightness(0.82);
    transform: scale(0.94);
    transform-origin: center;
    transition: opacity 420ms var(--easing-standard, ease),
                filter 420ms var(--easing-standard, ease),
                transform 420ms var(--easing-standard, ease);
  }
  .pfc .pfc__slide.is-active {
    opacity: 1;
    filter: none;                                  /* nítido */
    transform: scale(1.02);                        /* leve zoom */
  }
  @media (prefers-reduced-motion: reduce) {
    .pfc__slide { transition: opacity 420ms ease; transform: none; }
    .pfc__slide.is-active { transform: none; }
  }
  .pfc__testi  { max-width: 760px; padding: 10px 28px; }   /* mais larga no desktop → menos linhas */
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pfc__track { scroll-behavior: auto; }
  .pfc__slide { transition: none; }
}