/* =========================================================
   GALLERY PAGE — extends css/style.css, does not modify it.
   Reuses shared tokens/components: .btn, .eyebrow, .section-title,
   .faq-item/.faq-question/.faq-answer/.faq-sidenav (behaviour from js/main.js).
   Values below are sourced exactly from Figma node 645:132.
   ========================================================= */

/* --- Hero --- */
.gallery-hero {
  background: var(--c-bg-white);
  padding: 64px 64px 0;
  display: flex;
  justify-content: center;
}
.gallery-hero-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.96px;
  color: var(--c-text-heading);
  text-align: center;
  max-width: 1006px;
  margin: 0 auto;
}
.gallery-hero-heading .muted { color: #d6d0c5; }

/* --- Documentation photo grid --- */
.doc-grid {
  background: var(--c-bg-white);
  padding: 64px 64px;
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
  max-width: 1312px;
  margin: 0 auto;
}
.doc-row { display: flex; gap: var(--space-7); align-items: flex-start; }
.doc-row--b-s { align-items: flex-start; }
.doc-row--s-b { align-items: flex-start; }

.doc-block { display: flex; flex-direction: column; gap: var(--space-7); min-width: 0; }
.doc-block--big { flex: 1 1 614px; }
.doc-block--small { flex: 1 1 525px; align-self: flex-start; }
.doc-row--s-b .doc-block--small { align-self: flex-end; }

.doc-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  object-fit: cover;
  display: block;
}
.doc-block--big .doc-image { aspect-ratio: 614 / 556; }
.doc-block--small .doc-image { aspect-ratio: 525 / 326; }

.doc-caption { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); width: 100%; }
.doc-label {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: var(--c-text-black);
  white-space: nowrap;
  flex-shrink: 0;
}
.doc-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.32px;
  color: var(--c-text-heading);
  text-align: right;
  max-width: 420px;
}
.doc-block--small .doc-text { max-width: 209px; }

/* --- Core Pillars --- */
.pillars-section {
  background: var(--c-bg-white);
  padding: 0 64px 64px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 1312px;
  margin: 0 auto;
}
.pillars-intro { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.pillars-intro .eyebrow { align-self: flex-start; text-align: left; }
.pillars-intro .section-title { margin: 0; }

.pillars-body { display: flex; gap: var(--space-7); align-items: flex-start; justify-content: space-between; }
.pillars-photo {
  width: 496px;
  max-width: 42%;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  object-fit: cover;
  aspect-ratio: 496 / 506;
}

.pillar-list { flex: 1; display: flex; flex-direction: column; max-width: 710px; }
.pillar-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  padding: 20px 0;
  border-bottom: 1px solid #e0dfdb;
}
.pillar-row:first-child { padding-top: 0; }
.pillar-num,
.pillar-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 24px;
  line-height: 26px;
  letter-spacing: -0.48px;
  color: var(--c-text-muted-2);
  white-space: nowrap;
}
.pillar-desc {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.36px;
  color: var(--c-text-muted-2);
  width: 300px;
  flex-shrink: 0;
}

.pillars-ctas { display: flex; justify-content: flex-end; gap: 13px; flex-wrap: wrap; padding-top: var(--space-5); }

/* --- FAQ (card grid variant, with sidenav) --- */
.gallery-faq {
  background: var(--c-bg-soft);
  padding: 64px;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.faq-layout--cards { display: flex; gap: var(--space-7); align-items: flex-start; max-width: 1312px; margin: 0 auto; width: 100%; }
.faq-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  flex: 2;
}
.faq-cards-grid .faq-item { box-shadow: var(--shadow-card); }

/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */
@media (max-width: 1024px) {
  .gallery-hero, .doc-grid, .pillars-section, .gallery-faq { padding-left: 32px; padding-right: 32px; }
  .doc-row { flex-direction: column; }
  .doc-row--s-b .doc-block--small { align-self: flex-start; }
  .doc-block--small .doc-text { max-width: none; }
  .pillars-body { flex-direction: column; }
  .pillars-photo { width: 100%; max-width: none; aspect-ratio: 16 / 9; }
  .pillar-list { max-width: none; }
  .faq-layout--cards { flex-direction: column; }
  .faq-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
}

/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */
@media (max-width: 640px) {
  .gallery-hero, .doc-grid, .pillars-section, .gallery-faq { padding-left: 20px; padding-right: 20px; }
  .gallery-hero { padding-top: 40px; }
  .doc-grid { padding-top: 40px; gap: var(--space-7); }
  .doc-caption { flex-direction: column; gap: 4px; }
  .doc-text, .doc-block--small .doc-text { max-width: none; text-align: left; }

  .pillar-row { flex-direction: column; gap: 6px; }
  .pillar-desc { width: 100%; }
  .pillars-ctas { justify-content: flex-start; }

  .faq-cards-grid { grid-template-columns: 1fr; }
  .gallery-faq { padding-top: 48px; padding-bottom: 48px; }
}