/* Recreates Squarespace Fluid Engine grid behavior (24 cols desktop, 8 cols mobile)
   so the "before" bug can be reproduced outside Squarespace. */
:root { --gap: 11px; --gutter: 4vw; --max: 1500px; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; font-family: 'Epilogue', system-ui, sans-serif; color: #111; background: #fff; }
img { display: block; }

.hero {
  position: relative;
  background: #6a5d54 url("https://images.squarespace-cdn.com/content/v1/6a7dea0b0dbc561511fbcaa0/8259e71f-68b5-47cd-9522-6f5e651ba020/773120157_27824075413922115_7602638554950177076_n.jpg?format=1500w") center / cover no-repeat;
}
.hero::before { content: ""; position: absolute; inset: 0; background: #fff; opacity: .43; }

.grid {
  --container: min(var(--max), calc(100vw - var(--gutter) * 2));
  --cell: calc((var(--max) - (var(--gap) * 23)) / 24);
  position: relative;
  display: grid;
  gap: var(--gap);
  overflow-x: clip;
  grid-template-rows: repeat(33, minmax(calc(var(--container) * 0.0215), auto));
  grid-template-columns: minmax(calc(var(--gutter) - var(--gap)), 1fr) repeat(24, minmax(0, var(--cell))) minmax(calc(var(--gutter) - var(--gap)), 1fr);
}

/* desktop positions (copied from the Squarespace page source) */
.k-logo  { grid-area: 3/18/6/22;  z-index: 5; }
.k-photo { grid-area: 6/16/17/24; z-index: 1; }   /* mirrors Amanda: starts below the banner, same size */
.k-text  { grid-area: 17/16/34/25; z-index: 2; }
.a-logo  { grid-area: 3/7/6/11;   z-index: 6; }
.a-photo { grid-area: 6/5/17/13;  z-index: 3; }
.a-text  { grid-area: 17/4/34/13; z-index: 4; }

.logo { display: flex; align-items: center; justify-content: center; }
.logo img { width: 100%; height: 100%; object-fit: contain; }
.photo { position: relative; aspect-ratio: 1 / 1; align-self: center; border-radius: 50%; overflow: hidden; }  /* always a true circle */
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.text { background: rgba(255,255,255,.22); padding: 3%; text-align: center; }
.text h4 { margin: 0 0 .9em; font-family: 'Anton', 'Epilogue', sans-serif; font-size: 1.5rem; font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: 1.15; word-break: break-word; }
.text a { color: inherit; }
.text .phone { text-decoration: underline; }

.footer { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; max-width: 900px; margin: 0 auto; padding: 24px 4vw; }
.footer img { width: 100%; height: auto; }
.footer a { color: #111; word-break: break-all; }

/* ===== BEFORE: what Squarespace does under 768px (the bug) =====
   8-column grid, 53 rows, every block gets its own stacked position. */
@media (max-width: 767px) {
  :root { --gutter: 6vw; }
  .grid {
    --cell: calc((var(--max) - (var(--gap) * 7)) / 8);
    grid-template-rows: repeat(53, minmax(24px, auto));
    grid-template-columns: minmax(calc(var(--gutter) - var(--gap)), 1fr) repeat(8, minmax(0, var(--cell))) minmax(calc(var(--gutter) - var(--gap)), 1fr);
  }
  .k-logo  { grid-area: 1/2/7/10; }
  .k-photo { grid-area: 8/3/13/8; }
  .k-text  { grid-area: 13/3/26/9; }
  .a-logo  { grid-area: 26/2/32/10; }
  .a-photo { grid-area: 34/3/39/8; }
  .a-text  { grid-area: 39/3/53/9; }
}