/* ==========================================================================
   10 · SECTIONS
   One block per Flexible Content layout that needs its own styling.
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  isolation: isolate;
  min-height: clamp(460px, 62vh, 720px);
  color: var(--ink);
}

.hero--tall      { min-height: clamp(460px, 80vh, 735px); }
.hero--short     { min-height: clamp(320px, 40vh, 460px); }
.hero--has-image { color: #fff; }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.hero__media img,
.hero__media .placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

/* --overlay comes from the section's ACF range field, as a 0–1 decimal.
   Scoped to .hero--has-image on purpose: with no artwork the media area is a
   pale placeholder, and darkening it would leave ink-coloured text on a dark
   ground. A hero without an image keeps light ground and dark text. */
.hero--has-image .hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(34, 31, 28, calc(var(--overlay, 0.25) + 0.28)) 0%,
    rgba(34, 31, 28, var(--overlay, 0.25)) 55%,
    rgba(34, 31, 28, calc(var(--overlay, 0.25) * 0.5)) 100%
  );
}

.hero__inner {
  padding-block: clamp(48px, 8vw, 104px);
}

.hero__title {
  font-size: var(--fs-900);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
}

.hero__text {
  max-width: 52ch;
  margin-top: var(--s-5);
  font-size: var(--fs-500);
}

.hero--has-image .hero__text { color: rgba(255, 255, 255, 0.86); }
.hero--has-image .eyebrow    { color: #e6cf9a; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}


/* --- Process steps --------------------------------------------------------
   The numbers are real information here: this is an ordered sequence a client
   actually moves through, so they stay. */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-6);
}

.steps__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}

.steps__num {
  color: var(--gilt);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.1em;
}

.steps__icon img { width: 34px; height: 34px; }

.steps__title { font-size: var(--fs-600); }

.steps__duration {
  color: var(--ink-3);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.steps__text { color: var(--ink-2); font-size: var(--fs-300); }


/* --- Split media ---------------------------------------------------------- */

.split__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}

.split--image-left .split__media  { order: 0; }
.split--image-right .split__media { order: 2; }

.split__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
}

.split__body .section__header { margin-bottom: 0; }

.split__signature img { max-width: 190px; opacity: 0.85; }

@media (max-width: 860px) {
  .split__inner { grid-template-columns: 1fr; }
  .split--image-right .split__media { order: 0; }
}


/* --- Instagram ------------------------------------------------------------ */

.ig--grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  margin-top: var(--s-6);
}

.ig__item { overflow: hidden; }

.ig__item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.ig__item a:hover img { transform: scale(1.05); }

@media (max-width: 900px) {
  .ig--grid { grid-template-columns: repeat(3, 1fr); }
}

/* Force the feed plugin into our own grid. Leaving a plugin's layout in place
   is where these sections start to look like every other WordPress site. */
.ig--feed { margin-top: var(--s-6); }

.ig--feed #sb_instagram,
.ig--feed .sbi_header_link {
  max-width: none !important;
  padding: 0 !important;
}

.ig--feed #sb_instagram #sbi_images {
  padding: 0 !important;
  gap: 2px !important;
}

.ig--feed #sb_instagram .sbi_item { padding: 0 !important; }
.ig--feed .sbi_photo { border-radius: 0 !important; }


/* --- CTA band ------------------------------------------------------------- */

.cta {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: var(--on-dark);
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cta__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.cta__media img,
.cta__media .placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.cta__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(34, 31, 28, 0.62);
}

.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  padding-block: clamp(64px, 9vw, 128px);
}

.cta__title { max-width: 20ch; font-size: var(--fs-800); }
.cta__text  { max-width: 52ch; color: var(--on-dark-2); }

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
}


/* --- Gallery -------------------------------------------------------------- */

.gallery__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-4);
}

.gallery--grid .gallery__list {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* Real masonry via CSS columns — portrait and landscape artwork keeps its own
   height instead of being cropped to a common row. No library, no JS. */
.gallery--masonry .gallery__list {
  display: block;
  columns: 3 240px;
  column-gap: var(--s-4);
}

.gallery--masonry .gallery__item {
  break-inside: avoid;
  margin-bottom: var(--s-4);
}

.gallery--strip .gallery__list {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2px;
}

.gallery__caption {
  margin-top: var(--s-4);
  color: var(--ink-3);
  font-size: var(--fs-200);
}


/* --- Contact -------------------------------------------------------------- */

.contact__inner {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  align-items: start;
  gap: clamp(32px, 6vw, 96px);
}

/* Sticky beside the form: the email address and reply time stay in view while
   someone works down a long form. Offset by --admin-bar per the standing rule,
   plus the header height so it never slides under the sticky header.

   The grid's `align-items: start` is what makes this possible — a stretched
   grid item fills the row and has no room to move within it. */
.contact__details {
  position: sticky;
  top: calc(var(--admin-bar) + var(--header-h) + var(--s-5));
  padding: var(--s-6);
  background: var(--linen);
  border: var(--border);
}

.contact__details-title {
  margin-bottom: var(--s-4);
  font-size: var(--fs-600);
}

.contact__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  font-size: var(--fs-300);
}

.contact__list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact__list span {
  color: var(--ink-3);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.contact__list a:hover { color: var(--mulberry); }

.contact__map { margin-top: var(--s-5); }

.contact__map iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
}

/* The map only loads once the visitor asks, so the page does not hand a third
   party their IP on arrival. */
.contact__map-load {
  width: 100%;
  padding: var(--s-5);
  border: 1px dashed var(--rule);
  color: var(--mulberry);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

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

  /* One column: the details sit below the form, so sticking them would pin a
     block the visitor has already scrolled past. */
  .contact__details { position: static; }
}