/* CNC cabinet catalog (/cnc-kasalar) and detail page. Uses only design tokens and the shared catalog components
   (lc-product-card, lc-media-frame, lc-chip-row); this file adds the type cards, the photo/drawing sizing and the
   detail layout. */

[hidden] { display: none; }

/* ---------- Height chips ---------- */
.lc-cnc-heights { margin-top: var(--lc-space-2); align-items: center; }
.lc-cnc-heights__label { font-size: var(--lc-text-xs); color: var(--lc-text-subtle); white-space: nowrap; }

/* ---------- Cabinet picture in a media frame ----------
   The photo keeps its own pixels (never upscaled) on a light ground, like the other product photos; a cabinet
   without a photo gets the drawn picture (.lc-cnc-photo--drawn) in the same frame. */
.lc-media-frame:has(> .lc-cnc-photo) { background: var(--lc-paper-0); }
.lc-media-frame:has(> .lc-cnc-photo)::before { content: none; }
.lc-media-frame > .lc-cnc-photo {
  --lc-photo-pad: var(--lc-space-3);
  position: absolute;
  inset: var(--lc-photo-pad);
  margin: auto;
  width: auto;
  height: auto;
  max-width: calc(100% - 2 * var(--lc-photo-pad));
  max-height: calc(100% - 2 * var(--lc-photo-pad));
}
.lc-theme-store .lc-cnc-card .lc-cnc-photo { mix-blend-mode: multiply; }
/* The photos are square with a wide white margin: a square frame lets the cabinet fill the card. The drawn
   picture is cropped tight to the cabinet, so it gets a margin of its own. */
.lc-product-card.lc-cnc-card .lc-media-frame { --lc-media-ratio: 1 / 1; }
.lc-cnc-card .lc-media-frame > .lc-cnc-photo { --lc-photo-pad: 0px; }
.lc-cnc-card .lc-media-frame > .lc-cnc-photo--drawn { --lc-photo-pad: var(--lc-space-5); }

.lc-cnc-art { display: block; width: 100%; height: 100%; padding: var(--lc-space-4); }
.lc-cnc-art--layout { height: auto; max-height: 22rem; padding: 0; }

.lc-cnc-card__note {
  position: absolute;
  inset-block-end: var(--lc-space-2);
  inset-inline-start: var(--lc-space-2);
  padding: 0.125rem var(--lc-space-2);
  border-radius: var(--lc-radius-sm);
  background: color-mix(in srgb, var(--lc-surface-raised) 88%, transparent);
  font-family: var(--lc-font-mono);
  font-size: var(--lc-text-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lc-text-subtle);
}


/* ---------- Detail ---------- */
.lc-cnc-hero { padding-block: var(--lc-space-5) var(--lc-space-10); }
.lc-cnc-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lc-space-8); margin-top: var(--lc-space-5); align-items: start; }
@media (min-width: 1024px) { .lc-cnc-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 1.5rem + 3vw, 4.5rem); } }

.lc-cnc-hero__visual { display: grid; gap: var(--lc-space-3); min-width: 0; }
.lc-cnc-hero__media { --lc-media-ratio: 1 / 1; border-radius: var(--lc-radius-xl); box-shadow: var(--lc-shadow-lg); }
@media (min-width: 640px) { .lc-cnc-hero__media { --lc-media-ratio: 4 / 3; } }
/* The photo brings its own white margin; the tight drawn picture gets one from the frame. */
.lc-media-frame > .lc-cnc-photo--hero { --lc-photo-pad: 0px; }
.lc-media-frame > .lc-cnc-photo--hero.lc-cnc-photo--drawn { --lc-photo-pad: var(--lc-space-6); }
.lc-cnc-hero__note { margin: 0; font-size: var(--lc-text-xs); color: var(--lc-text-subtle); }

.lc-cnc-hero__info { display: grid; gap: var(--lc-space-4); min-width: 0; overflow-wrap: break-word; }
.lc-cnc-hero__title { margin: 0; }
.lc-cnc-hero__summary { margin: 0; font-size: var(--lc-text-base); }

.lc-cnc-specs {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-md);
  background: var(--lc-border);
  overflow: hidden;
}
.lc-cnc-specs > div { padding: var(--lc-space-3) var(--lc-space-4); background: var(--lc-surface-raised); }
.lc-cnc-specs__wide { grid-column: 1 / -1; }
.lc-cnc-specs dt { font-size: var(--lc-text-xs); color: var(--lc-text-subtle); }
.lc-cnc-specs dd { margin: var(--lc-space-1) 0 0; font-weight: var(--lc-weight-semibold); }

.lc-cnc-sizes { display: grid; gap: var(--lc-space-2); }
.lc-cnc-sizes__label { margin: 0; font-size: var(--lc-text-sm); color: var(--lc-text-muted); }
.lc-cnc-sizes .lc-chip[aria-current="page"] { border-color: var(--lc-accent); color: var(--lc-text); box-shadow: inset 0 0 0 1px var(--lc-accent); }
.lc-cnc-other { display: grid; gap: var(--lc-space-2); }
.lc-cnc-other__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--lc-space-1); }

.lc-cnc-contact {
  display: grid;
  gap: var(--lc-space-3);
  padding: var(--lc-space-5);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-md);
  background: var(--lc-surface-raised);
}
.lc-cnc-contact p { margin: 0; color: var(--lc-text-muted); }
.lc-cnc-contact strong { display: block; color: var(--lc-text); }

.lc-cnc-details { padding-top: 0; }
.lc-cnc-details__grid { display: grid; gap: var(--lc-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.lc-cnc-facts__list { margin: var(--lc-space-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--lc-space-3); }
.lc-cnc-facts__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--lc-space-2); align-items: start; }
.lc-cnc-facts__list .lc-icon { color: var(--lc-ok-text); margin-top: 0.2em; }
.lc-cnc-layout { margin: 0; display: grid; gap: var(--lc-space-3); }
.lc-cnc-layout__caption { font-size: var(--lc-text-xs); color: var(--lc-text-subtle); }