/* =====================
   RESET
   ===================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #e8e6e1;
}

img {
  display: block;
  max-width: 100%;
}

/* =====================
   TYPOGRAPHY
   ===================== */

body {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  font-weight: 300;
  line-height: 1.75;
  color: #111;
}

h1, h2, h3 {
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.03em;
}

h1 {
  font-size: clamp(3.5rem, 9vw, 8rem);
}

h2 {
  font-size: clamp(3rem, 7vw, 6.5rem);
}

h3 {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
}

p {
  font-weight: 300;
  max-width: 55ch;
}

strong {
  font-weight: 700;
}

/* =====================
   PAGE GRID
   ===================== */

.page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Full-width items span both columns */
.full-width,
.block-full {
  grid-column: 1 / 3;
  position: relative;
  z-index: 1;
}

/* =====================
   BLOCK: IMAGE
   ===================== */

.block-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 1.5rem;
}

.block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =====================
   BLOCK: TEXT
   ===================== */

.block-text {
  padding: 3rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  position: relative;
  z-index: 1;
}

/* =====================
   SITE HEADER
   ===================== */

.site-header {
  background: transparent;
  display: grid;
  grid-template-columns: auto 1fr; /* logo | rest */
  grid-template-rows: auto auto;        /* row 1: logo+nav, row 2: tagline */
  align-items: center;
  column-gap: 2rem;
  row-gap: 0.75rem;
  padding: 1.5rem 2rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: none;
}

/* Push page content below the fixed header — JS writes --header-height on load/resize/scroll */
:root {
  --header-height: 140px; /* fallback before JS runs */
}

.page-grid {
  padding-top: var(--header-height);
}

.site-header__logo-link {
  display: block;
  grid-column: 1;
  grid-row: 1;
  min-width: max-content;
  flex-shrink: 0;
  position: relative;
  z-index: 100;
}

.site-header__logo-img {
  height: clamp(40px, 9vw, 120px);
  width: auto;
  display: block;
}

.site-header__tagline {
  grid-column: 1 / -1; /* full width, row 2 */
  grid-row: 2;
  font-size: 1.5rem;
  line-height: 1.4;
  color: #444;
  opacity: 1;
  transform: translateY(0);
  overflow: hidden;
  transition: none;
}

/* Shrunk state — padding, row-gap, logo, tagline all driven by JS */

/* Navigation */

.nav-toggle {
  display: none; /* hidden on desktop */
}

.site-header__nav {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  overflow: visible;
  font-size: 1rem;
}

.nav-item,
a.nav-item--icon {
  background: rgba(232, 230, 225, 0.7);
  border-radius: 1.5rem;
  padding: 0.4rem 0.9rem;
  transition: background 0.2s ease;
}

.nav-item:hover,
a.nav-item--icon:hover {
  background: #e8e6e1;
}

.nav-item {
  position: relative;
}

.nav-item > a,
a.nav-item--icon {
  text-decoration: none;
  color: inherit;
  padding: 0;
}

.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #e8e6e1;
  list-style: none;
  padding: 0.4rem;
  min-width: 180px;
  z-index: 101;
  border-radius: 1.0rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-top: 0.5rem;
}

.nav-dropdown li a {
  display: block;
  padding: 0.4rem 0.9rem;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  border-radius: 0.6rem;
}

.nav-dropdown__spacer {
  height: 0.5rem;
}

.nav-dropdown li a:hover {
  background: #e8e6e1;
}

.nav-item--has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0.5rem; /* bridges the margin-top gap */
}

.nav-item.is-open .nav-dropdown {
  display: block;
}

a.nav-item--icon {
  display: flex;
  align-items: center;
}

.site-header__contact {
  background: black;
  color: white;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: 999px;
}

/* =====================
   FULL WIDTH BLOCKS
   ===================== */

.block-full {
  padding: 4rem 3rem;
}

/* =====================
   BLOCK: STRIP
   ===================== */

.block-strip {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: 24rem 1fr;
  gap: 2rem;
  align-items: start;
  padding: 2rem 3rem;
  border-top: 1px solid #ccc;
}

.block-strip:last-of-type {
  border-bottom: 1px solid #ccc;
}

.strip-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

.strip-name {
  font-size: 2.75rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.strip-desc {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #444;
  max-width: 28ch;
}

.strip-photos {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.strip-photos::-webkit-scrollbar {
  display: none;
}

.strip-photos img {
  flex-shrink: 0;
  width: 200px;
  height: 200px;
  object-fit: cover;
  scroll-snap-align: start;
  border-radius: 1.5rem;
}

/* =====================
   SITE FOOTER
   ===================== */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 2rem 3rem;
  border-top: 1px solid #ccc;
}

.site-footer a {
  text-decoration: none;
  color: inherit;
}

/* =====================
   BLOCK: QUOTE
   ===================== */

.block-quote {
  grid-column: 1 / 3;
  padding: 5rem 3rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.block-quote blockquote {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 300;
  font-style: italic;
  max-width: 40ch;
  line-height: 1.3;
}

.block-quote cite {
  font-size: 1rem;
  font-weight: 300;
  font-style: normal;
  opacity: 0.6;
}

/* =====================
   BLOCK: FLOOR PLAN
   ===================== */

.block-floorplan {
  padding: 3rem;
}

/* Plan centred, ~75% wide. position:relative is the anchor for the overlaid cards. */
.floorplan-container {
  position: relative;
  width: 75%;
  margin: 0 auto;
  aspect-ratio: 2500 / 1231;
}

.floorplan-img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 1.5rem;
  object-fit: contain;
}

.floorplan-room {
  position: absolute;
  cursor: pointer;
}

/* Cards — absolutely positioned inside the container, over the white space corners.
   They never affect layout or cause any shift. */
.floorplan-card[hidden] {
  display: none;
}

.floorplan-card {
  position: absolute;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background: rgba(232, 230, 225, 0.92);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
  max-width: 18rem;
}

.floorplan-card[data-card="studio"] {
  top: 1%;
  left: 18%;
}

.floorplan-card[data-card="atelier"] {
  top: 1%;
  right: 28%;
}

.floorplan-card h3 {
  font-size: clamp(1.25rem, 2vw, 2rem);
}

.floorplan-card__size {
  font-size: 1rem;
  color: #666;
  margin: 0;
}

.floorplan-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.floorplan-card__list li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 1rem;
  color: #444;
}

.floorplan-card__number {
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #111;
}

/* =====================
   MOBILE
   ===================== */

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

  .full-width,
  .block-full {
    grid-column: 1;
  }

  .block-text {
    padding: 3rem 2rem;
  }

  .block-quote {
    grid-column: 1;
  }

  .block-strip {
    grid-column: 1;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 2rem;
  }

  .strip-photos img {
    width: 160px;
    height: 160px;
  }

  /* Floor plan: full width on mobile, cards still overlaid in corners */
  .block-floorplan {
    padding: 1.5rem;
  }

  .floorplan-container {
    width: 100%;
  }

  /* Cards shown on tap — hidden attribute respected on mobile too */

  .floorplan-card[data-card="studio"] {
    left: 8%;
  }

  .floorplan-card[data-card="atelier"] {
    right: 4%;
  }

  /* Header: logo | hamburger on row 1, tagline already on row 2 */
  .site-header {
    grid-template-columns: auto 1fr; /* same as desktop, hamburger goes in col 2 */
  }

  .site-header__tagline p {
    max-width: none;
  }

  /* Hamburger button */
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: auto;
    height: auto;
    background: rgba(232, 230, 225, 0.92);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    padding: 0.5rem 0.65rem;
    gap: 4px;
    flex-shrink: 0;
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    z-index: 100;
  }

  .nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #111;
    border-radius: 1px;
  }

  /* Mobile nav: hidden by default, spans full width on row 3 when open */
  .site-header__nav {
    display: none;
    grid-column: 1 / -1;
    grid-row: 3;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: 1rem;
  }

  .site-header__nav.is-open {
    display: flex;
    position: fixed;
    inset: 0;
    background: #e8e6e1;
    border-radius: 0;
    padding: 3rem 2rem 2rem;
    margin-top: 0;
    z-index: 99;
    overflow-y: auto;
    align-items: flex-start;
    align-content: flex-start;
  }

  /* Remove individual pills inside open drawer */
  .site-header__nav.is-open .nav-item,
  .site-header__nav.is-open a.nav-item--icon {
    background: none;
    border-radius: 0;
    padding: 0;
  }

  .site-header__nav.is-open a.nav-item--icon {
    padding-top: 0.5rem;
  }

  .nav-item {
    width: 100%;
    border-top: 1px solid #d0d0d0;
  }

  .nav-item:first-child {
    border-top: none;
  }

  .nav-item > a,
  a.nav-item--icon {
    display: block;
    padding: 0.3rem 0;
    white-space: nowrap;
  }

  /* Mobile dropdowns: always visible, indented */
  .nav-dropdown {
    display: block;
    position: static;
    box-shadow: none;
    background: none;
    padding: 0 0 0.25rem 1rem;
  }

  .nav-dropdown li a {
    padding: 0.15rem 0;
  }

  .site-header__contact {
    margin-top: 0.5rem;
    align-self: flex-start;
  }
}

/* =====================
   INFODECK
   ===================== */

.block-infodeck {
  padding-block: 3rem;
  overflow: hidden; /* clip the scrollable track to the page edge */
}

.infodeck-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 1.5rem;
  padding-inline: 3rem;
  /* last card gets breathing room on the right */
  padding-inline-end: 3rem;
}

.infodeck-track::-webkit-scrollbar {
  display: none;
}

.infodeck-card {
  flex-shrink: 0;
  width: 22rem;
  scroll-snap-align: start;
  padding: 1.5rem 2rem;
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.infodeck-card h3 {
  font-size: 1.3em;
  margin-bottom: 0.75rem;
}

.infodeck-card p,
.infodeck-card ul {
  margin: 0;
}

.infodeck-card p + ul,
.infodeck-card p + p,
.infodeck-card ul + p {
  margin-top: 0.5rem;
}

.infodeck-card ul + ul {
  margin-top: 0.15rem;
}

.infodeck-card ul {
  list-style: none;
  font-size: 0.9em;
  color: #444;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.infodeck-card li {
  padding-left: 1.2em;
  text-indent: -1.2em;
}

.infodeck-card li::before {
  content: '■ ';
  font-size: 0.6em;
  vertical-align: 0.15em;
}

.infodeck-sublist {
  padding-left: 0;
  margin-top: 0.1rem;
  gap: 0;
}

.infodeck-sublist li {
  padding-left: 0;
  text-indent: 0;
  color: #444;
}

.infodeck-sublist li::before {
  content: none;
}

@media (max-width: 1024px) {
  .block-infodeck {
    padding-block: 1.5rem;
  }

  .infodeck-track {
    gap: 1rem;
    padding-inline: 1.5rem;
    padding-inline-end: 1.5rem;
  }

  .infodeck-card {
    width: 42vw;
  }
}