/* ==========================================================================
   CPG COMPONENTS — shared by CPG Holding and CPG Properties
   Depends on: tokens.css, base.css
   Every component here is used by BOTH platforms. Platform-only styling
   lives in holding.css / properties.css.
   ========================================================================== */

/* ==========================================================================
   WORDMARK
   Typography-only. No pictorial logo, no symbol, no icon.
   One construction, two lockups: heavy "CPG" + spaced light qualifier.
   ========================================================================== */
.cpg-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  text-decoration: none;
  color: inherit;
  line-height: 1;
  white-space: nowrap;
}
.cpg-wordmark__mark {
  font-family: var(--cpg-font-display);
  font-weight: var(--cpg-display-weight);
  font-size: var(--cpg-wordmark-size, 1.375rem);
  letter-spacing: var(--cpg-wordmark-tracking);
  text-transform: uppercase;
}
.cpg-wordmark__qualifier {
  font-family: var(--cpg-font-body);
  font-weight: 400;
  font-size: calc(var(--cpg-wordmark-size, 1.375rem) * 0.5);
  letter-spacing: var(--cpg-wordmark-qualifier-tracking);
  text-transform: uppercase;
  color: var(--cpg-text-muted);
}
.cpg-on-ink .cpg-wordmark__qualifier,
[data-cpg-surface="ink"] .cpg-wordmark__qualifier { color: var(--cpg-text-on-ink-dim); }
/* A linked wordmark is an interactive target: WCAG 2.2 AA requires at least
   24x24 CSS px, and the type alone is shorter than that. */
a.cpg-wordmark {
  min-height: 2.75rem;
  padding-block: var(--cpg-space-3xs);
}
.cpg-wordmark--lg { --cpg-wordmark-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); }
.cpg-wordmark--stacked { flex-direction: column; align-items: flex-start; gap: 0.15em; }

/* ==========================================================================
   BUTTONS
   Copper = primary conversion. Ink = secondary / navigational.
   Quiet = tertiary. All are 44px min touch target (WCAG 2.2 target size).
   ========================================================================== */
.cpg-btn {
  --cpg-btn-bg: transparent;
  --cpg-btn-fg: var(--cpg-ink);
  --cpg-btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cpg-space-2xs);
  min-height: 2.75rem;
  padding: 0.6875rem var(--cpg-space-md);
  background: var(--cpg-btn-bg);
  color: var(--cpg-btn-fg);
  border: var(--cpg-border-hair) solid var(--cpg-btn-border);
  border-radius: var(--cpg-radius-control);
  font-family: var(--cpg-font-body);
  font-size: var(--cpg-text-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--cpg-duration-fast) var(--cpg-ease),
    color var(--cpg-duration-fast) var(--cpg-ease),
    border-color var(--cpg-duration-fast) var(--cpg-ease);
}
.cpg-btn[disabled], .cpg-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

.cpg-btn--primary {
  --cpg-btn-bg: var(--cpg-copper);
  --cpg-btn-fg: var(--cpg-white);
  --cpg-btn-border: var(--cpg-copper);
}
.cpg-btn--primary:hover { --cpg-btn-bg: #A63A0C; --cpg-btn-border: #A63A0C; }

.cpg-btn--ink {
  --cpg-btn-bg: var(--cpg-ink);
  --cpg-btn-fg: var(--cpg-white);
  --cpg-btn-border: var(--cpg-ink);
}
.cpg-btn--ink:hover { --cpg-btn-bg: var(--cpg-ink-700); --cpg-btn-border: var(--cpg-ink-700); }

.cpg-btn--outline {
  --cpg-btn-bg: transparent;
  --cpg-btn-fg: var(--cpg-ink);
  --cpg-btn-border: var(--cpg-ink);
}
.cpg-btn--outline:hover { --cpg-btn-bg: var(--cpg-ink); --cpg-btn-fg: var(--cpg-white); }

.cpg-btn--outline-light {
  --cpg-btn-bg: transparent;
  --cpg-btn-fg: var(--cpg-white);
  --cpg-btn-border: var(--cpg-rule-on-ink-strong);
}
.cpg-btn--outline-light:hover { --cpg-btn-bg: var(--cpg-white); --cpg-btn-fg: var(--cpg-ink); --cpg-btn-border: var(--cpg-white); }

.cpg-btn--quiet {
  --cpg-btn-fg: var(--cpg-ink);
  padding-inline: var(--cpg-space-2xs);
}
.cpg-btn--quiet:hover { --cpg-btn-fg: var(--cpg-copper-ink); }

.cpg-btn--sm { min-height: 2.25rem; padding: 0.4375rem var(--cpg-space-sm); font-size: var(--cpg-text-xs); }
.cpg-btn--lg { min-height: 3.25rem; padding: 0.9375rem var(--cpg-space-lg); font-size: var(--cpg-text-md); }
.cpg-btn--block { width: 100%; }

/* Arrow link — the standard editorial "read on" affordance. */
.cpg-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--cpg-space-2xs);
  font-size: var(--cpg-text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cpg-copper-ink);
  text-decoration: none;
  padding-block: var(--cpg-space-3xs);
}
.cpg-arrow-link::after {
  content: "→";
  transition: transform var(--cpg-duration-fast) var(--cpg-ease);
}
.cpg-arrow-link:hover { text-decoration: underline; }
.cpg-arrow-link:hover::after { transform: translateX(3px); }
.cpg-on-ink .cpg-arrow-link,
[data-cpg-surface="ink"] .cpg-arrow-link { color: var(--cpg-copper-lit); }
:root:lang(ka) .cpg-arrow-link::after,
:root:lang(ru) .cpg-arrow-link::after { content: "→"; }

/* ==========================================================================
   BADGES — source / curation / status
   Never colour alone: every badge carries a text label.
   ========================================================================== */
.cpg-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3125rem 0.5rem;
  font-family: var(--cpg-font-body);
  font-size: var(--cpg-text-3xs);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--cpg-radius-control);
  background: var(--cpg-ink);
  color: var(--cpg-white);
  white-space: nowrap;
}
.cpg-badge--own       { background: var(--cpg-ink);        color: var(--cpg-white); }
.cpg-badge--curated   { background: var(--cpg-copper);     color: var(--cpg-white); }
.cpg-badge--partner   { background: var(--cpg-white);      color: var(--cpg-ink); box-shadow: inset 0 0 0 1px var(--cpg-border-control); }
.cpg-badge--quiet     { background: var(--cpg-shell);      color: var(--cpg-text-subtle); }

.cpg-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--cpg-text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.cpg-status::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: var(--cpg-radius-pill);
  background: currentColor;
  flex: none;
}
.cpg-status--available { color: var(--cpg-status-available); }
.cpg-status--reserved  { color: var(--cpg-status-reserved); }
.cpg-status--sold      { color: var(--cpg-status-sold); }
/* Sold uses a distinct hollow marker so the three states differ by shape as
   well as by colour, for colour-blind users and greyscale printing. */
.cpg-status--sold::before { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.cpg-status--reserved::before { border-radius: 0; }

/* ==========================================================================
   METRICS — verified scale figures
   ========================================================================== */
.cpg-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: var(--cpg-border-hair) solid var(--cpg-rule);
  border-left: var(--cpg-border-hair) solid var(--cpg-rule);
}
.cpg-metric {
  padding: var(--cpg-space-md) var(--cpg-space-sm);
  border-right: var(--cpg-border-hair) solid var(--cpg-rule);
  border-bottom: var(--cpg-border-hair) solid var(--cpg-rule);
}
.cpg-metric__value {
  display: block;
  font-family: var(--cpg-font-display);
  font-weight: var(--cpg-display-weight);
  font-size: var(--cpg-text-3xl);
  letter-spacing: var(--cpg-display-tracking);
  line-height: 1;
  color: var(--cpg-copper-ink);
}
.cpg-metric__label {
  display: block;
  margin-top: var(--cpg-space-2xs);
  font-size: var(--cpg-text-xs);
  line-height: var(--cpg-leading-snug);
  color: var(--cpg-text-muted);
}
.cpg-metric__note {
  display: block;
  margin-top: var(--cpg-space-3xs);
  font-size: var(--cpg-text-3xs);
  color: var(--cpg-text-muted);
}
@media (min-width: 48rem) {
  .cpg-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cpg-metric { padding: var(--cpg-space-lg) var(--cpg-space-md); }
}
.cpg-on-ink .cpg-metrics,
[data-cpg-surface="ink"] .cpg-metrics { border-color: var(--cpg-rule-on-ink); }
.cpg-on-ink .cpg-metric,
[data-cpg-surface="ink"] .cpg-metric { border-color: var(--cpg-rule-on-ink); }
.cpg-on-ink .cpg-metric__value,
[data-cpg-surface="ink"] .cpg-metric__value { color: var(--cpg-copper-lit); }
.cpg-on-ink .cpg-metric__label,
.cpg-on-ink .cpg-metric__note,
[data-cpg-surface="ink"] .cpg-metric__label,
[data-cpg-surface="ink"] .cpg-metric__note { color: var(--cpg-text-on-ink-muted); }

/* ==========================================================================
   CARDS
   One card template, driven by data. Own and partner projects use the same
   markup — only the badge and the attribution line change.
   ========================================================================== */
.cpg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cpg-surface-raised);
  border: var(--cpg-border-hair) solid var(--cpg-rule);
  border-radius: var(--cpg-radius-card);
  overflow: hidden;
  transition: border-color var(--cpg-duration-fast) var(--cpg-ease);
}
.cpg-card:hover { border-color: var(--cpg-border-control); }
.cpg-card__media { position: relative; }
.cpg-card__badges {
  position: absolute;
  inset-block-start: var(--cpg-space-xs);
  inset-inline-start: var(--cpg-space-xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--cpg-space-3xs);
  z-index: var(--cpg-z-raised);
}
.cpg-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--cpg-space-2xs);
  padding: var(--cpg-space-md);
  flex: 1;
}
.cpg-card__title {
  font-family: var(--cpg-font-display);
  font-weight: var(--cpg-display-weight);
  font-size: var(--cpg-text-xl);
  letter-spacing: var(--cpg-display-tracking);
  line-height: var(--cpg-leading-snug);
}
.cpg-card__meta {
  font-size: var(--cpg-text-sm);
  color: var(--cpg-text-muted);
}
.cpg-card__attribution {
  font-size: var(--cpg-text-xs);
  color: var(--cpg-text-muted);
}
.cpg-card__foot {
  margin-top: auto;
  padding-top: var(--cpg-space-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cpg-space-sm);
}
/* Whole-card link target without nesting interactive elements. */
.cpg-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cpg-card:focus-within { border-color: var(--cpg-border-control); }

/* ==========================================================================
   FORMS
   ========================================================================== */
.cpg-field { display: flex; flex-direction: column; gap: var(--cpg-space-3xs); }
.cpg-label {
  font-size: var(--cpg-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cpg-text-subtle);
}
.cpg-label__optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--cpg-text-muted); }

.cpg-input, .cpg-select, .cpg-textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem var(--cpg-space-sm);
  background: var(--cpg-white);
  color: var(--cpg-text);
  border: var(--cpg-border-hair) solid var(--cpg-border-control);
  border-radius: var(--cpg-radius-control);
  font-size: var(--cpg-text-md);
  transition: border-color var(--cpg-duration-fast) var(--cpg-ease);
}
.cpg-textarea { min-height: 7rem; resize: vertical; }
.cpg-input:hover, .cpg-select:hover, .cpg-textarea:hover { border-color: var(--cpg-ink-600); }
.cpg-input::placeholder, .cpg-textarea::placeholder { color: var(--cpg-text-muted); opacity: 1; }
.cpg-input[aria-invalid="true"], .cpg-select[aria-invalid="true"], .cpg-textarea[aria-invalid="true"] {
  border-color: var(--cpg-danger);
  border-width: var(--cpg-border-thick);
}
.cpg-field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.4em;
  font-size: var(--cpg-text-xs);
  font-weight: 700;
  color: var(--cpg-danger);
}
.cpg-field__error::before { content: "!"; flex: none; font-weight: 900; }
.cpg-field__hint { font-size: var(--cpg-text-xs); color: var(--cpg-text-muted); }
/* On an ink surface the muted token is far too dark to read; hints, captions
   and meta text switch to the on-ink muted token. */
.cpg-on-ink .cpg-field__hint,
[data-cpg-surface="ink"] .cpg-field__hint,
.cpg-on-ink .cpg-card__meta,
[data-cpg-surface="ink"] .cpg-card__meta,
.cpg-on-ink .cpg-result-count,
[data-cpg-surface="ink"] .cpg-result-count,
.cpg-on-ink .cpg-metric__note,
[data-cpg-surface="ink"] .cpg-metric__note,
.cpg-on-ink .cpg-breadcrumbs ol,
[data-cpg-surface="ink"] .cpg-breadcrumbs ol { color: var(--cpg-text-on-ink-muted); }

/* Honeypot — hidden from sight and from assistive tech, but not display:none
   (some bots skip display:none fields). Removed from the tab order. */
.cpg-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cpg-alert {
  padding: var(--cpg-space-sm) var(--cpg-space-md);
  border-left: var(--cpg-border-thick) solid currentColor;
  font-size: var(--cpg-text-sm);
}
.cpg-alert--error   { color: var(--cpg-danger);  background: var(--cpg-danger-bg); }
.cpg-alert--success { color: var(--cpg-success); background: var(--cpg-success-bg); }

/* ==========================================================================
   HEADER + PRIMARY NAVIGATION
   ========================================================================== */
.cpg-header {
  position: sticky;
  top: 0;
  z-index: var(--cpg-z-header);
  background: var(--cpg-surface);
  border-bottom: var(--cpg-border-hair) solid var(--cpg-rule);
}
.cpg-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cpg-space-md);
  min-height: var(--cpg-header-height-sm);
}
.cpg-header__nav { display: none; }
.cpg-header__actions { display: flex; align-items: center; gap: var(--cpg-space-2xs); }

.cpg-nav__list { display: flex; align-items: center; gap: var(--cpg-space-md); }
.cpg-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.125rem;
  font-size: var(--cpg-text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--cpg-text-subtle);
  border-bottom: var(--cpg-border-thick) solid transparent;
  transition: color var(--cpg-duration-fast) var(--cpg-ease), border-color var(--cpg-duration-fast) var(--cpg-ease);
}
.cpg-nav__link:hover { color: var(--cpg-ink); border-bottom-color: var(--cpg-rule-strong); }
.cpg-nav__link[aria-current="page"] { color: var(--cpg-ink); border-bottom-color: var(--cpg-copper); }

/* Cross-site action — must read as a peer platform, not a footer link. */
.cpg-crosslink {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 2.25rem;
  padding: 0.375rem var(--cpg-space-sm);
  border: var(--cpg-border-hair) solid var(--cpg-ink);
  border-radius: var(--cpg-radius-control);
  font-size: var(--cpg-text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--cpg-ink);
  white-space: nowrap;
  transition: background-color var(--cpg-duration-fast) var(--cpg-ease), color var(--cpg-duration-fast) var(--cpg-ease);
}
.cpg-crosslink:hover { background: var(--cpg-ink); color: var(--cpg-white); }
.cpg-crosslink__mark { font-family: var(--cpg-font-display); font-weight: var(--cpg-display-weight); letter-spacing: var(--cpg-wordmark-tracking); }
.cpg-crosslink::after { content: "↗"; font-size: 0.85em; }

/* Language switcher — a native <details> disclosure so it works without JS. */
.cpg-lang { position: relative; }
.cpg-lang__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 2.25rem;
  padding: 0.375rem var(--cpg-space-2xs);
  font-size: var(--cpg-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  color: var(--cpg-text-subtle);
}
.cpg-lang__summary::-webkit-details-marker { display: none; }
.cpg-lang__summary::after { content: "▾"; font-size: 0.7em; }
.cpg-lang[open] .cpg-lang__summary { color: var(--cpg-ink); }
.cpg-lang__menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 0.25rem);
  min-width: 9.5rem;
  padding: var(--cpg-space-3xs);
  background: var(--cpg-white);
  border: var(--cpg-border-hair) solid var(--cpg-rule-strong);
  box-shadow: var(--cpg-shadow-md);
  z-index: var(--cpg-z-drawer);
}
.cpg-lang__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cpg-space-sm);
  min-height: 2.5rem;
  padding: var(--cpg-space-3xs) var(--cpg-space-2xs);
  font-size: var(--cpg-text-sm);
  text-decoration: none;
  color: var(--cpg-text);
}
.cpg-lang__link:hover { background: var(--cpg-shell); }
.cpg-lang__link[aria-current="true"] { font-weight: 700; }
.cpg-lang__link[aria-current="true"]::after { content: "✓"; color: var(--cpg-copper-ink); }

/* Mobile menu toggle + drawer */
.cpg-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-width: 2.75rem;
  min-height: 2.75rem;
  font-size: var(--cpg-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cpg-menu-toggle__bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 1.125rem;
}
.cpg-menu-toggle__bars span {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform var(--cpg-duration-fast) var(--cpg-ease), opacity var(--cpg-duration-fast) var(--cpg-ease);
}
.cpg-menu-toggle[aria-expanded="true"] .cpg-menu-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.cpg-menu-toggle[aria-expanded="true"] .cpg-menu-toggle__bars span:nth-child(2) { opacity: 0; }
.cpg-menu-toggle[aria-expanded="true"] .cpg-menu-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.cpg-drawer {
  display: none;
  border-top: var(--cpg-border-hair) solid var(--cpg-rule);
  background: var(--cpg-surface);
  max-height: calc(100dvh - var(--cpg-header-height-sm));
  overflow-y: auto;
}
.cpg-drawer.is-open { display: block; }
.cpg-drawer__list { display: flex; flex-direction: column; padding-block: var(--cpg-space-2xs); }
.cpg-drawer__link {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding-block: var(--cpg-space-2xs);
  font-size: var(--cpg-text-lg);
  font-weight: 700;
  text-decoration: none;
  color: var(--cpg-text);
  border-bottom: var(--cpg-border-hair) solid var(--cpg-rule);
}
.cpg-drawer__link[aria-current="page"] { color: var(--cpg-copper-ink); }
.cpg-drawer__foot { display: flex; flex-direction: column; gap: var(--cpg-space-2xs); padding-block: var(--cpg-space-md); }

@media (min-width: 64rem) {
  .cpg-header__inner { min-height: var(--cpg-header-height); }
  .cpg-header__nav { display: block; }
  .cpg-menu-toggle { display: none; }
  .cpg-drawer { display: none !important; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.cpg-footer {
  background: var(--cpg-surface-ink);
  color: var(--cpg-text-on-ink);
  padding-block: var(--cpg-section-y-tight);
}
.cpg-footer a { color: inherit; }
.cpg-footer__top {
  display: grid;
  gap: var(--cpg-space-xl);
  padding-bottom: var(--cpg-space-xl);
  border-bottom: var(--cpg-border-hair) solid var(--cpg-rule-on-ink);
}
.cpg-footer__cols { display: grid; gap: var(--cpg-space-lg); }
.cpg-footer__col-title {
  font-size: var(--cpg-text-2xs);
  font-weight: 700;
  letter-spacing: var(--cpg-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--cpg-text-on-ink-dim);
  margin-bottom: var(--cpg-space-2xs);
}
.cpg-footer__list { display: flex; flex-direction: column; gap: var(--cpg-space-3xs); }
.cpg-footer__list a {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  font-size: var(--cpg-text-sm);
  color: var(--cpg-text-on-ink-muted);
  text-decoration: none;
}
.cpg-footer__list a:hover { color: var(--cpg-white); text-decoration: underline; }
.cpg-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cpg-space-sm);
  padding-top: var(--cpg-space-md);
  font-size: var(--cpg-text-xs);
  color: var(--cpg-text-on-ink-dim);
}
@media (min-width: 48rem) {
  .cpg-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .cpg-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
  .cpg-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   CROSS-PLATFORM BAND — the visible "one group" statement
   ========================================================================== */
.cpg-sibling {
  display: grid;
  gap: var(--cpg-space-md);
  padding: var(--cpg-space-xl) 0;
}
.cpg-sibling__label {
  font-size: var(--cpg-text-2xs);
  font-weight: 700;
  letter-spacing: var(--cpg-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--cpg-text-muted);
}
@media (min-width: 64rem) {
  .cpg-sibling {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--cpg-space-xl);
  }
}

/* ==========================================================================
   PLACEHOLDER / VERIFICATION FLAG
   Content the source documents do not support is rendered with a visible
   editorial flag rather than invented copy.
   ========================================================================== */
.cpg-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.125rem 0.4em;
  font-size: var(--cpg-text-3xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cpg-copper-ink);
  background: var(--cpg-copper-tint);
  border-radius: var(--cpg-radius-control);
}

/* --- Header action cluster ---------------------------------------------------
   On small screens the cross-link, language switcher and primary action move
   into the drawer so the bar keeps one clear row. */
.cpg-header__desktop-actions { display: none; align-items: center; gap: var(--cpg-space-2xs); }
@media (min-width: 64rem) {
  .cpg-header__desktop-actions { display: flex; }
}
.cpg-header.is-scrolled { box-shadow: var(--cpg-shadow-sm); }

/* --- Editorial hero ----------------------------------------------------------
   Shared skeleton; each platform tunes proportion in its own stylesheet. */
.cpg-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: var(--cpg-hero-min-height, 34rem);
  background: var(--cpg-surface-ink);
  color: var(--cpg-text-on-ink);
  overflow: hidden;
}
.cpg-hero__media { position: absolute; inset: 0; }
.cpg-hero__media img,
.cpg-hero__media video { width: 100%; height: 100%; object-fit: cover; }
.cpg-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,13,12,0.55) 0%, rgba(13,13,12,0.72) 55%, rgba(13,13,12,0.90) 100%);
}
.cpg-hero__inner {
  position: relative;
  z-index: var(--cpg-z-raised);
  width: 100%;
  padding-block: var(--cpg-space-2xl) var(--cpg-space-xl);
}
.cpg-hero__title {
  font-size: var(--cpg-text-5xl);
  max-width: 18ch;
  margin-bottom: var(--cpg-space-md);
}
.cpg-hero__lead { margin-bottom: var(--cpg-space-lg); }
.cpg-hero__actions { display: flex; flex-wrap: wrap; gap: var(--cpg-space-xs); }
.cpg-hero__media-note {
  position: absolute;
  inset-block-start: var(--cpg-space-md);
  inset-inline-end: var(--cpg-gutter);
  z-index: var(--cpg-z-raised);
  font-size: var(--cpg-text-3xs);
  font-weight: 700;
  letter-spacing: var(--cpg-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--cpg-text-on-ink-dim);
}

/* --- Editorial list (sectors, proof points, propositions) -------------------- */
.cpg-list-item {
  display: flex;
  flex-direction: column;
  gap: var(--cpg-space-2xs);
  padding-block: var(--cpg-space-md);
  border-top: var(--cpg-border-hair) solid var(--cpg-rule);
}
.cpg-list-item__index {
  font-family: var(--cpg-font-mono);
  font-size: var(--cpg-text-2xs);
  letter-spacing: 0.1em;
  color: var(--cpg-copper-ink);
}
.cpg-list-item__title { font-size: var(--cpg-text-xl); }
.cpg-list-item__text { color: var(--cpg-text-muted); max-width: var(--cpg-measure-tight); }
.cpg-on-ink .cpg-list-item,
[data-cpg-surface="ink"] .cpg-list-item { border-color: var(--cpg-rule-on-ink); }
.cpg-on-ink .cpg-list-item__text,
[data-cpg-surface="ink"] .cpg-list-item__text { color: var(--cpg-text-on-ink-muted); }
.cpg-on-ink .cpg-list-item__index,
[data-cpg-surface="ink"] .cpg-list-item__index { color: var(--cpg-copper-lit); }

/* --- Feature row: media beside editorial text -------------------------------- */
.cpg-feature { display: grid; gap: var(--cpg-grid-gap); align-items: center; }
@media (min-width: 64rem) {
  .cpg-feature { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--cpg-space-2xl); }
  .cpg-feature--reverse > :first-child { order: 2; }
}

/* --- Data table with a mobile card fallback ---------------------------------- */
.cpg-table-wrap { overflow-x: auto; }
.cpg-table { font-size: var(--cpg-text-sm); }
.cpg-table th, .cpg-table td {
  padding: var(--cpg-space-xs) var(--cpg-space-sm);
  text-align: start;
  border-bottom: var(--cpg-border-hair) solid var(--cpg-rule);
  white-space: nowrap;
}
.cpg-table th {
  font-size: var(--cpg-text-2xs);
  letter-spacing: var(--cpg-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--cpg-text-muted);
}

/* ==========================================================================
   INTERIOR PAGE HERO + BREADCRUMBS
   ========================================================================== */
.cpg-page-hero {
  padding-block: var(--cpg-section-y-tight) var(--cpg-space-xl);
  border-bottom: var(--cpg-border-hair) solid var(--cpg-rule);
}
.cpg-page-hero h1 {
  font-size: var(--cpg-text-4xl);
  max-width: 20ch;
  margin-block: var(--cpg-space-2xs) var(--cpg-space-md);
}
.cpg-breadcrumbs { margin-bottom: var(--cpg-space-md); }
.cpg-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cpg-space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--cpg-text-xs);
  color: var(--cpg-text-muted);
}
.cpg-breadcrumbs li + li::before {
  content: "/";
  margin-inline-end: var(--cpg-space-2xs);
  color: var(--cpg-rule-strong);
}
.cpg-breadcrumbs a { color: inherit; }
.cpg-breadcrumbs [aria-current="page"] { color: var(--cpg-text); font-weight: 700; }

/* ==========================================================================
   FORMS — layout
   ========================================================================== */
.cpg-form {
  display: flex;
  flex-direction: column;
  gap: var(--cpg-space-sm);
  padding: var(--cpg-space-lg);
  background: var(--cpg-white);
  color: var(--cpg-text);
  border-radius: var(--cpg-radius-card);
}
.cpg-form .cpg-field__hint { color: var(--cpg-text-muted); }
@media (min-width: 48rem) {
  .cpg-form { padding: var(--cpg-space-xl); }
  .cpg-form--two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cpg-space-sm) var(--cpg-space-md);
    align-items: start;
  }
  .cpg-form--two-column > .cpg-form__wide,
  .cpg-form--two-column > button,
  .cpg-form--two-column > .cpg-alert,
  .cpg-form--two-column > .cpg-field__hint { grid-column: 1 / -1; }
}

/* ==========================================================================
   FILTER BAR — Projects, Discover, Availability
   ========================================================================== */
.cpg-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--cpg-space-sm);
  padding-block: var(--cpg-space-md);
  border-block: var(--cpg-border-hair) solid var(--cpg-rule);
}
.cpg-filters__group { display: flex; flex-direction: column; gap: var(--cpg-space-3xs); min-width: 10rem; }
.cpg-filters__actions { margin-inline-start: auto; display: flex; gap: var(--cpg-space-2xs); }
.cpg-chips { display: flex; flex-wrap: wrap; gap: var(--cpg-space-2xs); }
.cpg-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.375rem var(--cpg-space-sm);
  border: var(--cpg-border-hair) solid var(--cpg-border-control);
  border-radius: var(--cpg-radius-control);
  font-size: var(--cpg-text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--cpg-text-subtle);
}
.cpg-chip:hover { border-color: var(--cpg-ink); color: var(--cpg-ink); }
.cpg-chip[aria-current="true"] {
  background: var(--cpg-ink);
  border-color: var(--cpg-ink);
  color: var(--cpg-white);
}
.cpg-result-count {
  font-size: var(--cpg-text-sm);
  color: var(--cpg-text-muted);
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.cpg-empty {
  display: flex;
  flex-direction: column;
  gap: var(--cpg-space-2xs);
  padding: var(--cpg-space-xl);
  border: var(--cpg-border-hair) dashed var(--cpg-rule-strong);
  text-align: center;
  color: var(--cpg-text-muted);
}

/* ==========================================================================
   RESPONSIVE TABLE / CARD SWAP
   The same records are rendered both ways; only one is ever shown, and the
   hidden one is removed from the accessibility tree so nothing is announced
   twice.
   ========================================================================== */
.cpg-only-wide { display: none; }
.cpg-only-narrow { display: grid; }
@media (min-width: 64rem) {
  .cpg-only-wide { display: block; }
  .cpg-only-narrow { display: none; }
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.cpg-pagination { margin-top: var(--cpg-space-lg); }
.cpg-pagination .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cpg-space-3xs);
  padding: 0;
  margin: 0;
  list-style: none;
}
.cpg-pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: var(--cpg-space-2xs);
  border: var(--cpg-border-hair) solid var(--cpg-rule-strong);
  font-size: var(--cpg-text-sm);
  font-weight: 700;
  text-decoration: none;
  color: var(--cpg-text);
}
.cpg-pagination .page-item.active .page-link {
  background: var(--cpg-ink);
  border-color: var(--cpg-ink);
  color: var(--cpg-white);
}
.cpg-pagination .page-item.disabled .page-link { opacity: 0.45; pointer-events: none; }

/* Illustrative-data notice: deliberately unmissable. */
.cpg-sample-notice { margin-block: var(--cpg-space-sm) var(--cpg-space-md); }
.cpg-sample-notice strong { display: block; letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--cpg-text-2xs); }

/* Curated project grid: fewer, larger cards. Never an MLS density. */
.cpg-project-grid { margin-top: var(--cpg-space-lg); }
.cpg-card--large .cpg-card__body { padding: var(--cpg-space-lg); gap: var(--cpg-space-xs); }
.cpg-card--large .cpg-card__title { font-size: var(--cpg-text-2xl); }
.cpg-card--large .cpg-media { --cpg-media-ratio: 3 / 2; }

/* ==========================================================================
   PROJECT SUB-NAVIGATION — shared by every project page
   ========================================================================== */
.cpg-subnav {
  position: sticky;
  top: var(--cpg-header-height-sm);
  z-index: var(--cpg-z-sticky);
  background: var(--cpg-surface);
  border-bottom: var(--cpg-border-hair) solid var(--cpg-rule);
}
.cpg-subnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cpg-space-sm);
  min-height: 3.25rem;
}
.cpg-subnav__list {
  display: flex;
  gap: var(--cpg-space-md);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.cpg-subnav__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--cpg-text-sm);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  color: var(--cpg-text-muted);
  border-bottom: var(--cpg-border-thick) solid transparent;
}
.cpg-subnav__link:hover { color: var(--cpg-ink); }
.cpg-subnav__link[aria-current="true"] { color: var(--cpg-ink); border-bottom-color: var(--cpg-copper); }
@media (min-width: 64rem) {
  .cpg-subnav { top: var(--cpg-header-height); }
}

.cpg-hero--project { --cpg-hero-min-height: clamp(24rem, 58vh, 34rem); }
.cpg-hero--project .cpg-breadcrumbs ol { color: var(--cpg-text-on-ink-dim); }
.cpg-hero--project .cpg-breadcrumbs [aria-current="page"] { color: var(--cpg-white); }
.cpg-spec-list--rail { grid-template-columns: 1fr; }

/* ==========================================================================
   MASTERPLAN
   Status is conveyed by fill AND by a text label on every control, never by
   colour alone.
   ========================================================================== */
.cpg-masterplan { display: flex; flex-direction: column; gap: var(--cpg-space-md); }
.cpg-masterplan__figure { margin: 0; }
.cpg-masterplan__svg {
  width: 100%;
  height: auto;
  background: var(--cpg-surface-media);
  border: var(--cpg-border-hair) solid var(--cpg-rule-strong);
}
.cpg-masterplan__caption { margin-top: var(--cpg-space-2xs); font-size: var(--cpg-text-xs); color: var(--cpg-text-muted); }

.cpg-hotspot polygon { fill: var(--cpg-shell); stroke: var(--cpg-ink); stroke-width: 1.5; opacity: 0.65; }
.cpg-hotspot text {
  font-family: var(--cpg-font-body);
  font-size: 13px;
  font-weight: 700;
  fill: var(--cpg-ink);
}
.cpg-hotspot__rect {
  cursor: pointer;
  stroke: var(--cpg-ink);
  stroke-width: 1.5;
  transition: opacity var(--cpg-duration-fast) var(--cpg-ease);
}
.cpg-hotspot__rect:hover { opacity: 0.85; }
.cpg-hotspot__rect:focus-visible { outline: var(--cpg-focus-width) solid var(--cpg-focus-ring); outline-offset: 2px; }
.cpg-hotspot__rect.is-selected { stroke-width: 4; }
.cpg-hotspot--available, .cpg-hotspot__rect.cpg-hotspot--available { fill: var(--cpg-status-available-bg); }
.cpg-hotspot--reserved, .cpg-hotspot__rect.cpg-hotspot--reserved { fill: var(--cpg-status-reserved-bg); }
.cpg-hotspot--sold, .cpg-hotspot__rect.cpg-hotspot--sold { fill: var(--cpg-status-sold-bg); }

.cpg-legend { display: flex; flex-wrap: wrap; gap: var(--cpg-space-md); }

.cpg-masterplan__body { display: grid; gap: var(--cpg-space-md); }
.cpg-plot-list {
  display: grid;
  gap: var(--cpg-space-3xs);
  max-height: 26rem;
  overflow-y: auto;
  padding-right: var(--cpg-space-3xs);
}
.cpg-plot {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: var(--cpg-space-sm);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--cpg-space-2xs) var(--cpg-space-xs);
  border: var(--cpg-border-hair) solid var(--cpg-rule);
  background: var(--cpg-white);
  text-align: start;
}
.cpg-plot:hover { border-color: var(--cpg-border-control); }
.cpg-plot[aria-pressed="true"] { border-color: var(--cpg-ink); border-width: var(--cpg-border-thick); }
.cpg-plot__reference { font-weight: 700; }
.cpg-plot__meta { font-size: var(--cpg-text-xs); color: var(--cpg-text-muted); }

.cpg-plot-panel {
  display: flex;
  flex-direction: column;
  gap: var(--cpg-space-2xs);
  padding: var(--cpg-space-md);
  background: var(--cpg-white);
  border: var(--cpg-border-hair) solid var(--cpg-rule-strong);
}
.cpg-plot-panel__empty { color: var(--cpg-text-muted); font-size: var(--cpg-text-sm); }
.cpg-plot-panel__title { font-family: var(--cpg-font-display); font-size: var(--cpg-text-xl); }
.cpg-plot-panel__price {
  font-family: var(--cpg-font-display);
  font-weight: var(--cpg-display-weight);
  font-size: var(--cpg-text-2xl);
  color: var(--cpg-copper-ink);
}
.cpg-plot-panel__specs { display: grid; gap: var(--cpg-space-3xs); margin: 0; }
.cpg-plot-panel__specs > div { display: flex; justify-content: space-between; gap: var(--cpg-space-sm); border-bottom: var(--cpg-border-hair) solid var(--cpg-rule); padding-block: var(--cpg-space-3xs); }
.cpg-plot-panel__specs dt { font-size: var(--cpg-text-xs); color: var(--cpg-text-muted); }
.cpg-plot-panel__specs dd { margin: 0; font-size: var(--cpg-text-sm); font-weight: 700; }

@media (min-width: 64rem) {
  .cpg-masterplan__body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 20rem); align-items: start; }
  .cpg-spec-list--rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   TARGET SIZE (WCAG 2.2 AA, 2.5.8)
   Links that sit in navigation, tables and lists are pointer targets, not
   prose. Padding brings each of them to at least 24x24 CSS px without
   changing the visual rhythm.
   ========================================================================== */
.cpg-breadcrumbs a,
.cpg-breadcrumbs [aria-current="page"] {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding-block: var(--cpg-space-3xs);
}
.cpg-table th a,
.cpg-table td a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  /* A short reference such as "2A" is only ~19px wide; 2.5.8 requires 24px in
     BOTH dimensions, so the minimum is set on width as well as height. */
  min-width: 1.5rem;
  min-height: 1.5rem;
  padding-block: var(--cpg-space-3xs);
}

/* An eyebrow that carries a link is a pointer target too. */
.cpg-eyebrow a {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding-block: var(--cpg-space-3xs);
}
.cpg-unit-card__price,
.cpg-card__title a,
.cpg-unit-card .cpg-card__title a {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
}
.cpg-footer__list a { min-height: 1.5rem; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.cpg-contact-list, .cpg-routing { display: grid; gap: var(--cpg-space-sm); }
.cpg-contact-list li, .cpg-routing li {
  display: flex;
  flex-direction: column;
  gap: var(--cpg-space-3xs);
  padding-block: var(--cpg-space-2xs);
  border-top: var(--cpg-border-hair) solid var(--cpg-rule);
}
.cpg-contact-list a { font-size: var(--cpg-text-lg); font-weight: 700; text-decoration: none; }
.cpg-contact-list a:hover { text-decoration: underline; }