/* Casa do Oleiro — gallery page styles */

.gallery-page { background: var(--page-bg); }
.gallery-main { position: relative; z-index: 1; }
.gallery-page .potter-bg { display: none; }

/* ── Header ── */
.gallery-header { padding: 160px 32px 60px; }
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--orange-500); text-decoration: none;
  margin-bottom: 36px; cursor: none;
}
.back-link span { font-size: 16px; line-height: 1; }
.back-link:hover { color: var(--orange-400); }
.back-link:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 3px; }

.gallery-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(64px, 12vw, 180px); line-height: .85; letter-spacing: -.03em;
  text-transform: uppercase; color: var(--fg);
}
.gallery-title em {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  text-transform: lowercase; color: var(--orange-500); letter-spacing: -.01em;
}
.gallery-lede {
  margin-top: 28px; max-width: 620px;
  font-size: 18px; line-height: 1.55; color: var(--fg-muted);
}

/* ── Section rail (sticky) ── */
.section-rail {
  position: sticky; top: 84px; z-index: 50;
  display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;
  padding: 14px 16px; margin: 0 32px 60px;
  background: var(--panel-translucent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.section-rail a {
  padding: 8px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-muted); text-decoration: none; cursor: none;
  transition: background .2s, color .2s;
}
.section-rail a:hover { color: var(--fg); }
.section-rail a.active { background: var(--orange-500); color: #000; }

/* ── Sections ── */
.g-section { padding: 60px 32px 100px; scroll-margin-top: 140px; }
.g-section-head {
  display: grid; grid-template-columns: 80px 1fr; gap: 24px; align-items: end;
  margin-bottom: 48px;
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.g-section-head.in-view { opacity: 1; transform: none; }
.g-num {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5vw, 64px);
  color: var(--orange-500); line-height: 1; letter-spacing: -.02em;
}
.g-section-head .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--orange-500); margin-bottom: 12px; display: block; }
.g-section-head h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(40px, 6vw, 88px); line-height: .9; letter-spacing: -.02em;
  text-transform: uppercase; color: var(--fg);
}
.g-section-head p { margin-top: 16px; max-width: 540px; font-size: 16px; line-height: 1.55; color: var(--fg-muted); }

/* ── Masonry-ish grid ── */
.g-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 120px;
  gap: 14px;
  max-width: 1280px; margin: 0 auto;
}
.g-card {
  position: relative; overflow: hidden; border-radius: 8px;
  border: 1px solid var(--card-border);
  opacity: 0; transform: translateY(24px) scale(.98);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  background: var(--card-bg);
}
.g-card.in-view { opacity: 1; transform: none; }
.g-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g-card .ph { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 18px; }
.g-card .ph::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.65), transparent 55%); pointer-events: none; }
.g-card .ph .lbl { position: relative; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.g-card:hover .ph .lbl { color: var(--orange-500); }
.g-card:hover { transform: translateY(-2px) scale(1.005); }
.g-card.in-view:hover { transform: translateY(-2px) scale(1.005); }

/* row-span / col-span variants */
.g-card.r1 { grid-column: span 5; grid-row: span 3; }
.g-card.r2 { grid-column: span 4; grid-row: span 2; }
.g-card.r3 { grid-column: span 3; grid-row: span 3; }
.g-card.r4 { grid-column: span 4; grid-row: span 2; }
.g-card.r5 { grid-column: span 5; grid-row: span 2; }

/* placeholder colour fills */
.g-card.placeholder-1 { background: linear-gradient(135deg, #2a2a2a, #1a1a1a); }
.g-card.placeholder-2 { background: linear-gradient(135deg, var(--orange-700), var(--orange-900)); }
.g-card.placeholder-3 { background: linear-gradient(135deg, #4a4a4a, #2a2a2a); }
.g-card.placeholder-4 { background: linear-gradient(135deg, var(--orange-500), var(--orange-700)); }

/* ── Footer CTA ── */
.g-footer-cta { padding: 80px 32px 120px; text-align: center; }
.back-cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 20px 36px; border-radius: 999px;
  background: var(--orange-500); color: #000;
  text-decoration: none; cursor: none;
  font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  transition: background .2s, transform .2s;
}
.back-cta:hover { background: var(--orange-400); transform: translateY(-2px); }
.back-cta:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 3px; }
.back-cta .arrow { font-size: 18px; }

/* ── Scroll hint (mobile only) ── */
.scroll-hint { display: none; }

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: .7; }
  50%       { transform: translateY(7px); opacity: 1; }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  /* compact header so first photo is visible without scrolling */
  .gallery-header { padding: 74px 20px 16px; }
  .gallery-title { font-size: clamp(44px, 11vw, 64px); }
  .gallery-lede { display: none; }
  /* hide section nav rail on mobile */
  .section-rail { display: none; }
  /* social rail overlaps content on mobile */
  .gallery-page .social-rail { display: none; }
  .g-section { padding: 32px 20px 60px; }
  .g-section-head { grid-template-columns: 1fr; gap: 6px; margin-bottom: 20px; }
  .g-section-head p { display: none; }
  .g-num { font-size: 32px; }
  .g-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 100px; gap: 10px; }
  .g-card.r1 { grid-column: span 6; grid-row: span 3; }
  .g-card.r2 { grid-column: span 3; grid-row: span 2; }
  .g-card.r3 { grid-column: span 3; grid-row: span 3; }
  .g-card.r4 { grid-column: span 6; grid-row: span 2; }
  .g-card.r5 { grid-column: span 6; grid-row: span 2; }
  /* override inline spans for Oração (full-width pair) */
  #prayer .g-card { grid-column: span 6 !important; grid-row: span 3 !important; }
  /* override inline span for Jovens tall card */
  #jovens .g-card:last-child { grid-column: span 6 !important; grid-row: span 4 !important; }
  .g-footer-cta { padding: 60px 20px 80px; }
  /* scroll hint */
  .scroll-hint {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
    color: var(--fg-muted); font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    z-index: 80; pointer-events: none;
    animation: scroll-bounce 1.6s ease-in-out infinite;
    transition: opacity .4s;
  }
  .scroll-hint.hidden { opacity: 0; }
}