/* Our spaces (S15). The signature is the plan: walls in ink, furniture in grey, and one blue line, the Wohl Line on the wall. */

.sp-head .page-head__words { max-width: 760px; }
@media (min-width: 1280px) { .sp-head .t-display { text-wrap: wrap; } }

/* ---------- The plan: one inline SVG with HTML numbers on top. ---------- */
.sp-plan { display: flex; flex-direction: column; gap: 40px; }
.sp-plan__head { max-width: 1100px; }
.sp-plan__body { display: flex; align-items: flex-start; gap: 64px; }
.sp-plan__card { position: relative; flex: 0 0 760px; width: 760px; aspect-ratio: 760 / 520; background: #FFFFFF; border-radius: 12px; }
.sp-plan__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-plan__num {
  position: absolute; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-foreground); color: #FFFFFF; font-family: var(--font-mono); font-size: 12px; line-height: 16px;
}
.sp-plan__tag { position: absolute; line-height: 16px; white-space: nowrap; }
.sp-plan__tag--line { color: var(--color-foreground); }

.sp-rooms { flex: 1; min-width: 0; }
.sp-rooms__row { display: flex; gap: 20px; padding: 18px 0; border-top: 1px solid var(--color-border); }
.sp-rooms__row:first-child { border-top-color: var(--color-foreground); }
.sp-rooms__row:last-child { border-bottom: 1px solid var(--color-border); }
.sp-rooms__n { width: 32px; flex-shrink: 0; line-height: 27px; }
.sp-rooms__words { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sp-rooms__name { font-size: var(--text-body); line-height: var(--leading-body); font-weight: 700; }
.sp-rooms__note { padding-top: 16px; }

/* ---------- What the rooms are made of. ---------- */
.sp-mat { display: flex; flex-direction: column; gap: 40px; }
.sp-mat__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.sp-mat__item { display: flex; flex-direction: column; gap: 12px; }
.sp-mat__slot { aspect-ratio: 298 / 360; }
/* With no photo (the live site until the shoot), each caption sits under a hairline instead. */
.sp-mat__item:not(:has(> .sp-mat__slot)) .sp-mat__cap,
html.is-ship .sp-mat__cap { padding-top: 12px; border-top: 1px solid var(--color-foreground); }

/* ---------- Six doors on a line: ink line, hollow rings. ---------- */
.sp-doors { display: flex; flex-direction: column; gap: 40px; }
.sp-doors__head { max-width: 900px; }
.sp-line { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 16px; row-gap: 40px; }
.sp-stop { position: relative; padding-top: 28px; }
.sp-stop::before { content: ""; position: absolute; left: 0; right: -16px; top: 8px; border-top: 1px solid var(--color-foreground); }
.sp-stop:last-child::before { right: 0; }
.sp-stop::after {
  content: ""; position: absolute; left: 0; top: 2px; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--color-foreground); background: var(--color-background);
}
.sp-stop__link { display: flex; flex-direction: column; gap: 10px; }
.sp-stop__year, .sp-stop__held { display: flex; align-items: center; gap: 8px; }
.sp-stop__year { min-height: 22px; }
.sp-stop__photo { height: 150px; border-radius: 10px; background: #FFFFFF; padding: 8px; }
.sp-stop__photo-label { font-family: var(--font-mono); font-size: var(--text-label); line-height: 16px; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.sp-stop__name { font-weight: 700; line-height: 24px; }
@media (hover: hover) and (pointer: fine) {
  .sp-stop__link:hover .sp-stop__name { text-decoration: underline 1px; text-underline-position: from-font; }
}

/* 1024 to 1279: plan 640, rooms list beside. */
@media (max-width: 1279px) {
  .sp-plan__body { gap: 48px; }
  .sp-plan__card { flex-basis: 640px; width: 640px; }
}

/* Six across needs a sixth of the width to hold THIRUVANANTHAPURAM at 12 mono; below that, three across and the line repeats. */
@media (max-width: 1119px) {
  .sp-line { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-stop:nth-child(3n)::before { right: 0; }
}

/* 768 to 1023: plan full width, rooms list under; photos two by two. */
@media (max-width: 1023px) {
  .sp-plan, .sp-mat, .sp-doors { gap: 32px; }
  .sp-plan__body { flex-direction: column; align-items: stretch; gap: 32px; }
  .sp-plan__card { flex: none; width: 100%; }
  .sp-mat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .sp-mat__slot { aspect-ratio: 4 / 5; }
}

/* Below 768: plan 358 wide, numbers stay 32; the clinics line turns and runs down the left. */
@media (max-width: 767px) {
  .sp-plan, .sp-mat, .sp-doors { gap: 16px; }
  .sp-plan__body { gap: 20px; }
  .sp-plan__card { border-radius: 10px; }
  .sp-plan__walls { stroke-width: 4; }
  .sp-plan__furniture { stroke-width: 2; }
  .sp-plan__line { stroke-width: 5; transform: translateX(2px); }
  .sp-plan__spot, .sp-plan__door, .sp-plan__tag { display: none; }
  .sp-rooms__row { gap: 14px; padding: 12px 0; }
  .sp-rooms__n { width: 22px; line-height: 24px; }
  .sp-rooms__words { gap: 2px; }
  .sp-rooms__name { line-height: 24px; }
  .sp-rooms__note { padding-top: 12px; }

  .sp-mat__grid { gap: 20px 16px; padding-top: 8px; }
  .sp-mat__item { gap: 8px; }
  .sp-mat__slot { padding: 8px; }

  .sp-line { display: flex; flex-direction: column; gap: 22px; padding: 10px 0 0 28px; }
  .sp-stop { padding-top: 0; }
  .sp-stop::before { left: -23px; right: auto; top: 8px; bottom: -30px; border-top: 0; border-left: 1px solid var(--color-foreground); }
  .sp-stop:last-child::before { display: none; }
  .sp-stop::after { left: -28px; }
  .sp-stop__link { display: grid; grid-template-columns: auto minmax(0, 1fr); row-gap: 2px; align-content: start; }
  .sp-stop__link > * { grid-column: 2; }
  .sp-stop__photo { grid-column: 1; grid-row: 1 / span 3; width: 96px; height: 72px; margin-right: 12px; border-radius: 8px; padding: 4px; }
  .sp-stop__photo-label { display: none; }
  .sp-stop__year { min-height: 0; gap: 6px; }
  .sp-stop__link > .t-label { line-height: 16px; }
}