/* ==========================================================================
   The Detail Co. — pages-b.css
   Page-scoped additions for gallery.html and contact.html only.
   Loaded after main.css. Nothing here overrides a shared component's
   behaviour on a page that does not include these blocks.

   CONTENTS
   01  Compare grid (gallery)
   02  Photo grid (gallery)
   03  Contact column

   The form itself is not here. Both places that ask a question — this page
   and the enquiry modal — run the one guide component, which lives in
   main.css §19 where every page can reach it.
   ========================================================================== */


/* 01  COMPARE GRID
   Two sliders per row. No frames, no fills — the photograph is the block,
   and the caption sits under it on a hairline, flush left, like the work
   grid on the home page.
   ------------------------------------------------------------------------ */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(38px, 4.6vw, 68px) clamp(16px, 2vw, 28px);
}

.compare-item { min-width: 0; }

/* Both layers carry a placeholder label. They live at the top edge so they
   never collide with the before/after tags along the bottom, and they sit on
   two separate lines so the clipped "after" label never runs into the
   "before" one. Both disappear the moment the photographs load. */
.compare .slot__label {
  top: calc(var(--mat) + 14px);
  left: calc(var(--mat) + 16px);
  right: calc(var(--mat) + 16px);
  bottom: auto;
}

.compare__layer--after .slot__label {
  top: calc(var(--mat) + 40px);
  text-align: right;
}

/* A faint wash under each tag so the words stay readable over a photograph
   as well as over the placeholder. Inset by the mat so it sits inside the
   frame's window rather than under its hairline. */
.compare::after {
  content: "";
  position: absolute;
  left: var(--mat);
  right: var(--mat);
  bottom: var(--mat);
  height: 96px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(7, 10, 20, .55));
}

.compare-item .compare-caption {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

@media (max-width: 860px) {
  .compare-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  /* Taller on a phone so there is something to actually drag. */
  .compare { aspect-ratio: 4 / 3; }
}


/* 02  PHOTO GRID
   Two stacks of three. The right stack starts lower so the page reads as a
   sequence of photographs rather than a table of them; the drop is removed
   on narrow screens where there is only one column.
   ------------------------------------------------------------------------ */
.gal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 32px);
  align-items: start;
}

.gal__col { min-width: 0; }

.gal__col > * + * { margin-top: clamp(34px, 4vw, 56px); }

.gal__col--drop { margin-top: clamp(52px, 7vw, 108px); }

.gal__cap {
  margin-top: 12px;
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--porcelain-40);
}

@media (max-width: 700px) {
  .gal { grid-template-columns: 1fr; }
  .gal__col--drop { margin-top: clamp(34px, 4vw, 56px); }
}


/* 03  CONTACT COLUMN
   Two columns: what we are, and the sheet that asks the questions. The left
   column holds the headline and four facts and nothing else — the sheet is
   where the reading happens, so the page around it stays quiet.

   Stacked, the sheet comes first. Someone who opened /contact came to say
   something, not to read the hours.
   ------------------------------------------------------------------------ */
/* The headline shares the page-head voice but lives in a half-width column,
   so it is set a step smaller than a full-bleed page title. */
.contact__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -.02em;
  max-width: 13ch;
}

.contact__facts {
  margin-top: clamp(34px, 4vw, 50px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--porcelain-60);
}

.contact__facts .social { --glyph: 22px; color: var(--porcelain-60); }

.contact__book { margin-top: clamp(30px, 3.6vw, 42px); }

@media (min-width: 861px) {
  .contact__intro { padding-top: 6px; }
}

@media (max-width: 860px) {
  /* The sheet first, the facts under it. */
  .contact__split { display: flex; flex-direction: column; }
  .contact__sheet-col { order: -1; }
  .contact__intro { margin-top: clamp(8px, 3vw, 20px); }
}