/* Page-specific layout for the designers and visit pages. */

.designer-page.texture-draft {
  background-color: var(--oat);
  background-image:
    linear-gradient(rgba(74, 52, 37, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 52, 37, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(166, 124, 61, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(166, 124, 61, 0.025) 1px, transparent 1px);
  background-position: 0 0, 0 0, 0 0, 0 0;
  background-size: 32px 32px, 32px 32px, 160px 160px, 160px 160px;
}

.visit-page.texture-brass {
  background-color: #f1e7d8;
  background-image:
    repeating-linear-gradient(0deg, rgba(74, 52, 37, 0.025) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(255, 250, 240, 0.18) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(112deg, transparent 0 25px, rgba(166, 124, 61, 0.045) 26px, transparent 27px 78px);
}

.designer-opening {
  align-items: center;
}

.designer-opening .split-copy {
  max-width: 42rem;
}

.designer-opening .actions {
  margin-top: 1.5rem;
}

.studio-photo-slot {
  min-height: 0;
  aspect-ratio: 3 / 2;
  background-color: #d8cebf;
  background-image: linear-gradient(135deg, rgba(255, 250, 241, 0.3), rgba(74, 52, 37, 0.08));
}

.studio-photo-slot::before {
  z-index: -1;
  opacity: 0.28;
  background-image:
    repeating-linear-gradient(0deg, rgba(74, 52, 37, 0.16) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, rgba(255, 250, 241, 0.18) 0 1px, transparent 1px 24px);
}

.studio-photo-slot::after {
  display: none;
}

.studio-photo-flat-lay {
  aspect-ratio: 4 / 5;
}

.studio-photo-table {
  aspect-ratio: 3 / 2;
  background-color: #cec1ae;
}

.studio-photo-window {
  aspect-ratio: 16 / 9;
  background-color: #ddd4c6;
}

.studio-photo-seating {
  aspect-ratio: 4 / 5;
  background-color: #cfc5b7;
}

.studio-photo-entrance {
  aspect-ratio: 3 / 2;
  background-color: #d8ccba;
}

.studio-photo-context {
  aspect-ratio: 16 / 9;
  background-color: #d4c8b7;
}

.studio-photo-wayfinding {
  aspect-ratio: 4 / 5;
  background-color: #cbc0b0;
}

.studio-photo-hours {
  aspect-ratio: 3 / 2;
  background-color: #e0d4c2;
}

.studio-photo-slot .photo-label {
  max-width: min(25rem, calc(100% - 2rem));
}

.studio-photo-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.studio-photo-grid .studio-photo-slot {
  grid-column: span 4;
}

.designer-photo-grid .studio-photo-slot:nth-child(1) {
  grid-column: span 5;
}

.designer-photo-grid .studio-photo-slot:nth-child(2) {
  grid-column: span 4;
}

.designer-photo-grid .studio-photo-slot:nth-child(3) {
  grid-column: span 3;
}

.visit-photo-grid .studio-photo-slot:nth-child(1),
.visit-photo-grid .studio-photo-slot:nth-child(4) {
  grid-column: span 3;
}

.visit-photo-grid .studio-photo-slot:nth-child(2),
.visit-photo-grid .studio-photo-slot:nth-child(3) {
  grid-column: span 4;
}

.designer-steps .material-step {
  min-height: 260px;
}

.designer-steps .material-step p {
  max-width: 32ch;
}

.designer-cta {
  display: grid;
  gap: 0.2rem;
}

.designer-cta .actions {
  margin-top: 0.8rem;
}

.visit-details-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: start;
}

.visit-details h2 {
  max-width: 9ch;
}

.studio-address {
  max-width: 34ch;
  margin: 1.4rem 0 1.7rem;
  color: var(--espresso);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.7vw, 2.35rem);
  font-style: normal;
  line-height: 1.08;
}

.studio-address strong {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 1.12em;
  font-weight: 600;
}

.studio-hours {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  max-width: 28rem;
  gap: 0.35rem 1rem;
  margin: 0 0 1.7rem;
  font-size: 0.92rem;
}

.studio-hours dt {
  color: var(--ink-soft);
}

.studio-hours dd {
  margin: 0;
}

.visit-link-list {
  display: grid;
  gap: 0.85rem;
  margin: 0;
}

.visit-link-list > div {
  display: grid;
  gap: 0.12rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}

.visit-link-list strong {
  color: var(--walnut);
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 600;
}

.visit-link-list a {
  width: fit-content;
}

.visit-link-list .social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
}

.studio-map-frame {
  min-height: 430px;
  background-color: #d5c5ad;
}

.studio-map-frame iframe {
  min-height: 390px;
}

.map-note {
  margin: 0;
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.45;
}

.visit-photo-section .section-heading {
  margin-bottom: 2rem;
}

.visit-enquiry-grid {
  align-items: start;
}

.visit-enquiry-grid .contact-copy {
  max-width: 37rem;
}

.visit-enquiry-grid .contact-copy .actions {
  margin-top: 1.4rem;
}

.studio-enquiry {
  gap: 1rem;
}

.studio-enquiry > .lede {
  margin-bottom: 0.2rem;
  font-size: 1rem;
}

.studio-enquiry .field small {
  color: var(--ink-soft);
  font-size: 0.76rem;
}

.studio-enquiry [data-form-note] {
  margin-top: 0.1rem;
}

.studio-enquiry [data-form-submit] {
  width: fit-content;
  margin-top: 0.15rem;
}

html:not(.script-ready) .studio-enquiry [data-form-submit] {
  display: none;
}

html:not(.script-ready) .studio-enquiry.reveal,
html:not(.script-ready) .visit-enquiry-grid .contact-copy.reveal {
  opacity: 1;
  transform: none;
}

html:not(.script-ready) .studio-enquiry [data-js-field] {
  cursor: not-allowed;
}

.direct-whatsapp {
  margin: 0;
  font-size: 0.82rem;
}

.direct-whatsapp a {
  color: var(--walnut);
}

@media (max-width: 820px) {
  .visit-details-grid {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }

  .studio-map-frame {
    min-height: 350px;
  }

  .studio-map-frame iframe {
    min-height: 310px;
  }

  .studio-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-photo-grid .studio-photo-slot,
  .designer-photo-grid .studio-photo-slot:nth-child(1),
  .designer-photo-grid .studio-photo-slot:nth-child(2),
  .designer-photo-grid .studio-photo-slot:nth-child(3),
  .visit-photo-grid .studio-photo-slot:nth-child(1),
  .visit-photo-grid .studio-photo-slot:nth-child(2),
  .visit-photo-grid .studio-photo-slot:nth-child(3),
  .visit-photo-grid .studio-photo-slot:nth-child(4) {
    grid-column: span 1;
  }
}

@media (max-width: 560px) {
  .studio-photo-grid {
    grid-template-columns: 1fr;
  }

  .studio-hours {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .studio-hours dt {
    margin-top: 0.55rem;
  }

  .studio-hours dd {
    margin-bottom: 0.15rem;
  }

  .studio-map-frame,
  .studio-map-frame iframe {
    min-height: 280px;
  }
}