/* Original TolK interface components, grouped by the task they support. */
.tc-ui-kit {
  margin-top: 2rem;
}
.tc-ui-collections > .tc-ui-collection:first-child { margin-top: 0; }
.tc-ui-kit-heading { max-width: 55rem; margin-bottom: 2rem; }
.tc-ui-kit img { max-width: var(--tc-kit-width); max-height: var(--tc-kit-height); }
.tc-ui-kit-heading p { margin-top: 1rem; color: var(--tc-quiet); font: .875rem/1.5 var(--font-mono), monospace; }
.tc-ui-kit :where(h4) { margin: 0; font: 400 1.125rem/1.3 var(--font-sans), sans-serif; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.tc-ui-kit .tc-image-hint { inset: auto .25rem .25rem auto; opacity: 0; }
.tc-ui-kit .tc-image-link:is(:hover, :focus-visible) .tc-image-hint { opacity: 1; }
@media (hover: none) { .tc-ui-kit .tc-image-hint { opacity: 1; } }

/* Templates and organisms are exact Figma renders; preview stages never crop. */
.tc-ui-collection { margin-top: 3rem; }
.tc-ui-collection-heading { display: grid; gap: .75rem; margin-bottom: 1.5rem; }
.tc-ui-collection-label { display: block; margin-bottom: .5rem; color: var(--tc-quiet); font: .75rem/1.4 var(--font-mono), monospace; }
.tc-ui-collection-heading > p { max-width: 34rem; color: var(--tc-quiet); font: .8125rem/1.5 var(--font-mono), monospace; }
.tc-ui-module-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 1.5rem; }
.tc-ui-module { display: grid; grid-template-rows: auto 1fr; min-width: 0; border: 1px solid var(--tc-rule); }
.tc-ui-module-media { height: clamp(13rem, 62vw, 24rem); padding: 1rem; background: var(--tc-scene-bg); }
.tc-ui-module-media--pair { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.tc-ui-module-media .tc-image-link { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 2.75rem; height: 100%; }
.tc-ui-module-media img { width: 100%; height: 100%; object-fit: contain; }
.tc-ui-module figcaption { padding: 1.25rem; }
.tc-ui-module figcaption p { margin-top: .5rem; color: var(--tc-quiet); font: .8125rem/1.5 var(--font-mono), monospace; }
/* Content-led mosaic: wide maps, a larger apartment selection, tall states.
   DOM order follows the top-left of each tile; no dense packing or reordering. */
@media (min-width: 75rem) {
  .tc-ui-module-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 22rem; }
  .tc-ui-module { grid-area: var(--tc-kit-area); grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
  .tc-ui-module-media { min-height: 0; height: auto; }
  .tc-ui-module-media .tc-image-link { min-height: 0; }
  .tc-ui-module-grid--places {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 30rem;
    grid-template-areas:
      "project-map project-map masterplan"
      "infrastructure construction construction"
      "window-view window-view finishes";
  }
  .tc-ui-module-grid--purchase {
    grid-template-areas:
      "offers offers mortgage mortgage"
      "offers offers documents-framed managers"
      "booking-states booking-states sales-offices-clean sales-offices-clean";
  }
  .tc-ui-module-grid--states {
    grid-template-rows: repeat(7, 22rem) 20rem;
    grid-template-areas:
      "commercial commercial storerooms parking"
      "favorites banks queue-framed queue-framed"
      "favorites banks filter-city price-range"
      "input-states comment-states flat-default flat-actions"
      "payment-options comment-states flat-default flat-actions"
      "payment-options tooltip atoms atoms"
      "copy-feedback infrastructure-controls atoms atoms"
      "buttons buttons buttons buttons";
  }
}
@media (min-width: 48rem) {
  .tc-ui-collection-heading { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 1.5rem; }
  .tc-ui-module-media { padding: 1.5rem; }
  .tc-ui-module figcaption { padding: 1.5rem; }
}
@media (min-width: 48rem) and (max-width: 74.999rem) {
  .tc-ui-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc-ui-module-media { height: clamp(17rem, 29vw, 24rem); }
}