/* Project page composition: brand, section placement, responsive shell and footer.
 * Component usage and ownership: docs/technology-stack.md#design-system
 */

.public-project {
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  padding: var(--space-30) 0 var(--space-80);
  overflow-wrap: anywhere;
}

.page-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  height: 72px;
  position: relative;
  padding: 0 max(var(--space-24), calc((100% - var(--space-1180)) / 2));
  border-bottom: 1px solid var(--color-brand-line);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-11);
  text-decoration: none;
}

.brand-mark {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  position: relative;
  border: 2px solid var(--color-blue);
  border-radius: var(--radius-9) var(--radius-9) var(--radius-15) var(--radius-15);
  transform: rotate(45deg);
}

.brand-mark::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid var(--color-navy);
  border-radius: var(--radius-round);
}

.brand-mark span {
  position: absolute;
  width: 8px;
  height: 8px;
  top: -5px;
  right: -5px;
  border-radius: var(--radius-round);
  background: var(--color-blue);
}

.brand-copy {
  display: grid;
  line-height: var(--leading-solid);
}

.brand-copy strong {
  color: var(--color-navy);
  font-size: var(--font-size-17);
  letter-spacing: var(--tracking-label);
}

.brand-copy small {
  margin-top: var(--space-6);
  color: var(--color-brand-caption);
  font-size: var(--font-size-8);
  letter-spacing: var(--tracking-brand-caption);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-20);
}

.header-contact {
  display: grid;
  text-align: right;
  text-decoration: none;
}

.header-contact span {
  color: var(--color-header-caption);
  font-size: var(--font-size-10);
}

.header-contact strong {
  margin-top: var(--space-3);
  color: var(--color-blue);
  font-size: var(--font-size-12);
}

.project-intro {
  padding: var(--space-27) 0 var(--space-25);
  border-bottom: 1px solid var(--color-line);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-30);
}

.project-options {
  flex: 0 0 auto;
  padding-bottom: var(--space-3);
  color: var(--color-navy);
  font-size: var(--font-size-13);
  font-weight: var(--weight-extrabold);
  text-decoration: none;
}

.status {
  display: block;
  margin-bottom: var(--space-7);
  color: var(--color-blue);
  font-size: var(--font-size-11);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.project-intro p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-14);
}

.project-intro .project-short-description {
  margin-top: var(--space-14);
  max-width: 760px;
  white-space: pre-line;
}

.project-layout {
  padding-top: var(--space-42);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
  gap: var(--space-55);
}

.project-content {
  min-width: 0;
}

.project-content > section:not(.project-investment), .project-commercial > section {
  padding-bottom: var(--space-48);
  scroll-margin-top: 24px;
}

.project-content > section + section:not(.project-investment), .project-content > section + .project-commercial > .project-typologies, .project-commercial:has(> .project-typologies):not(:has(> .project-offers)) + section, .project-content > section + .project-commercial:not(:has(> section)) + section {
  padding-top: var(--space-44);
  border-top: 1px solid var(--color-line);
}

.description-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-30);
}

.project-location > .project-prose {
  max-width: 650px;
  color: var(--color-muted);
  font-size: var(--font-size-14);
  line-height: var(--leading-offer);
}

.project-location address {
  margin-top: var(--space-18);
  font-style: normal;
  line-height: var(--leading-address);
  color: var(--color-muted);
  font-size: var(--font-size-13);
}

.map-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--space-8);
  color: var(--color-navy);
  font-size: var(--font-size-11);
  font-weight: var(--weight-extrabold);
  text-decoration: none;
}

.nearby-places {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-20);
  margin: var(--space-18) 0 0;
  padding: 0;
  list-style: none;
}

.nearby-places li {
  display: grid;
  min-width: 0;
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--color-line);
}

.nearby-places h3 {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-11);
  font-weight: var(--weight-regular);
}

.nearby-places .project-prose {
  margin-top: var(--space-5);
  font-size: var(--font-size-11);
}

.nearby-facts {
  order: -1;
  margin: 0;
  color: var(--color-blue);
  font-size: var(--font-size-15);
  font-weight: var(--weight-bold);
}

.mobile-contact {
  display: none;
  color: var(--color-ink);
}

.project-footer {
  padding: var(--space-28) 0;
  color: var(--color-footer-copy);
  background: var(--color-navy);
}

.project-footer > div {
  width: min(calc(100% - 48px), 1180px);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  gap: var(--space-20);
  font-size: var(--font-size-10);
}

.project-footer strong {
  color: var(--color-white);
  letter-spacing: var(--tracking-label);
}

@media (max-width: 900px) {
  .project-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--space-30);
  }

  .description-grid {
    grid-template-columns: minmax(0, 1fr);
  }

}

@media (max-width: 720px) {
  body:has(.mobile-contact) {
    padding-bottom: var(--space-62);
  }

  .public-project {
    width: calc(100% - 24px);
    padding: var(--space-12) 0 var(--space-55);
  }

  .page-brand {
    height: 60px;
    padding: 0 var(--space-12);
    gap: var(--space-12);
  }

  .brand-copy small, .header-contact span {
    display: none;
  }

  .header-actions {
    gap: var(--space-5);
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
  }

  .brand { flex-shrink: 0; }

  .header-contact {
    display: none;
  }

  .project-intro {
    padding: var(--space-19) 0 var(--space-20);
    align-items: start;
    flex-direction: column;
    gap: var(--space-14);
  }

  .project-options {
    display: none;
  }

  .status {
    font-size: var(--font-size-9);
  }

  .project-intro p {
    font-size: var(--font-size-11);
    line-height: var(--leading-intro);
  }

  .project-layout {
    padding-top: var(--space-28);
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-30);
  }

  .project-content {
    grid-row: 2;
  }

  .project-content > section:not(.project-investment), .project-commercial > section {
    padding-bottom: var(--space-36);
  }

  .project-content > section + section:not(.project-investment), .project-content > section + .project-commercial > .project-typologies, .project-commercial:has(> .project-typologies):not(:has(> .project-offers)) + section, .project-content > section + .project-commercial:not(:has(> section)) + section {
    padding-top: var(--space-34);
  }

  .description-grid {
    gap: var(--space-12);
  }

  .description-grid .project-prose {
    font-size: var(--font-size-14);
  }

  .mobile-contact {
    position: fixed;
    z-index: 25;
    inset: auto 0 0;
    min-height: 62px;
    padding: 0 var(--space-18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-white);
    background: var(--color-navy);
    box-shadow: var(--shadow-mobile-contact);
    text-decoration: none;
  }

  .mobile-contact span {
    font-size: var(--font-size-10);
  }

  .mobile-contact strong {
    font-size: var(--font-size-11);
  }

  .mobile-contact:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: calc(-1 * var(--space-3));
  }

  .project-footer > div {
    width: calc(100% - 24px);
  }

}

.project-commercial > .project-offers {
  padding-top: 0;
  border-top: 0;
}

.project-investment { scroll-margin-top: 24px; }
.project-investment + section, .project-investment + .project-commercial { margin-top: var(--space-48); }
@media (max-width: 720px) {
  .project-investment + section, .project-investment + .project-commercial { margin-top: var(--space-36); }
}

/* Website currency shares the language menu; investment controls remain independent. */
.project-currency.currency-control { display: block; margin-left: 0; width: 64px; padding-right: 0; border-right: 0; }
.project-currency .project-language-menu { right: 0; }
.project-currency .currency-link[aria-current="true"] { background: var(--color-sky); color: var(--color-blue); }
.project-currency .project-language-current:focus-visible { outline: 3px solid var(--color-focus); outline-offset: var(--space-3); }

/* Shared public navigation and footer. */
.home-nav {
  display: flex;
  gap: var(--space-24);
  align-items: center;
  margin-left: auto;
  margin-right: var(--space-24);
}
.home-nav a {
  font-size: var(--font-size-13);
  font-weight: var(--weight-bold);
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
}
.home-nav a[aria-current=page] { color: var(--color-blue); }
.brand:focus-visible, .home-nav a:focus-visible, .footer-links a:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-20); }
.footer-links a { color: var(--color-muted); text-decoration: none; }

@media (max-width: 900px) {
  .home-nav { margin-right: 0; gap: var(--space-18); }
}
@media (max-width: 720px) {
  .page-brand { margin-bottom: var(--space-42); }
  .home-nav { position: absolute; left: 12px; right: 12px; top: 60px; height: 42px; justify-content: flex-start; border-bottom: 1px solid var(--color-line); margin: 0; }
}

/* Bounded operator access pages reuse shared fields, facts, prose and actions. */
.operator-access {
  display: grid;
  gap: var(--space-30);
}

.operator-navigation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-16);
}

.operator-saved-text + .operator-saved-text {
  margin-top: var(--space-20);
}

/* Exact draft controls and section notices follow the client presentation. */
.draft-toolbar, .draft-toolbar * { box-sizing: border-box; }
.draft-toolbar {
  position: sticky;
  top: 0;
  z-index: 15;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-review-toolbar);
}
.draft-toolbar-row {
  width: min(calc(100% - 48px), 1180px);
  margin-inline: auto;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding-block: var(--space-8);
}
.draft-label { color: var(--color-muted); font-size: var(--font-size-12); font-weight: var(--weight-bold); }
.draft-view-control { display: flex; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-7); background: var(--color-review-control); }
.draft-view-control button, .draft-view-control a {
  padding: var(--space-7) var(--space-12);
  border: 0;
  border-radius: var(--radius-5);
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-size: var(--font-size-11);
  font-weight: var(--weight-bold);
  cursor: pointer;
  text-decoration: none;
}
.draft-view-control button[aria-pressed="true"], .draft-view-control a[aria-current="page"] { background: var(--color-white); color: var(--color-navy); box-shadow: var(--shadow-review-choice); }
.draft-view-control noscript { display: flex; gap: var(--space-3); }
.review-comparison { margin-bottom: var(--space-20); }
.page-notice {
  margin-bottom: var(--space-22);
  padding: var(--space-15) var(--space-18);
  background: var(--color-review-notice);
  border-left: 3px solid var(--color-review-notice-border);
  color: var(--color-constraint-copy);
  border-radius: 0 var(--radius-8) var(--radius-8) 0;
  font-size: var(--font-size-13);
  line-height: var(--leading-offer);
}
#investment .page-notice { background: var(--color-white); margin-bottom: 0; }
.review-finding + .review-finding::before, .review-operation-issues span + span::before { content: " "; }
[data-controller="review-preview"] :is(#investment, #typologies, #offers, .project-description, .project-location) { scroll-margin-top: 76px; }
@media (max-width: 720px) {
  .draft-toolbar-row { width: min(calc(100% - 24px), 1180px); }
}
@media (max-width: 520px) {
  .draft-toolbar-row { gap: var(--space-7); }
  .draft-label { font-size: var(--font-size-10); }
  .draft-view-control button, .draft-view-control a { padding: var(--space-8); font-size: var(--font-size-10); }
}