/* ==========================================================================
   Takszu — objects page (Figma node 3:152, "takszu-objects")

   RECONSTRUCTED SECTION: the Objects Grid frame (3:193) is corrupted in the
   Figma file — it reports a fixed 100px height while each Object Card inside
   it reports a width of 188384px, and it carries no horizontal padding while
   every sibling section has 80px. The card's *internal* structure is intact
   and reproduced exactly; the grid that holds them is rebuilt as a 3-column
   layout (6 cards = 2 clean rows) on the file's own 48px/32px gaps and the
   80px gutter used by the rest of the page. See CLAUDE.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Featured object hero (3:162)
   -------------------------------------------------------------------------- */

.featured {
  background-color: var(--color-surface);
  padding-block: calc(var(--header-clearance) + var(--space-160)) var(--space-80);
}

.featured__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-48);
}

.featured__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  width: 100%;
}

.featured__title {
  font-size: var(--fs-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-snug);
  overflow-wrap: break-word;
}

.featured__body {
  display: flex;
  align-items: center;
  gap: var(--space-80);
  width: 100%;
}

.featured__figure {
  flex: 0 0 auto;
  width: 494px;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
}

.featured__image {
  width: 100%;
  height: 691px;
  object-fit: cover;
  /* The Figma fill is inset from the left, showing the right edge of the
     photograph: a cover fill anchored right reproduces it. */
  object-position: right center;
}

.featured__content {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
  min-width: 0;
}

.featured__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  width: 100%;
}

.featured__kicker {
  color: var(--color-clay);
  font-size: var(--fs-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-credit);
  line-height: normal;
}

.featured__heading {
  font-size: var(--fs-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
  overflow-wrap: break-word;
}

/* In Figma the paragraphs are separated by empty text lines holding a
   zero-width space. Rebuilt as real paragraphs with the same rhythm. */
.featured__prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  font-size: var(--fs-body-lg);
  font-weight: var(--weight-medium);
  line-height: var(--lh-normal);
  opacity: var(--opacity-body);
  overflow-wrap: break-word;
}

.featured__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  width: 100%;
}

.featured__meta-label {
  font-size: var(--fs-caption);
  font-weight: var(--weight-regular);
  line-height: normal;
  opacity: var(--opacity-credit);
}

.featured__meta-value {
  font-size: var(--fs-body-sm);
  font-weight: var(--weight-semibold);
  line-height: normal;
}

.featured__cta {
  padding-block-start: var(--space-24);
  font-size: var(--fs-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-cta);
  line-height: normal;
}

.featured__cta:hover,
.featured__cta:focus-visible { opacity: var(--opacity-body); }

/* --------------------------------------------------------------------------
   Filter bar (3:185)
   Rendered as links, not buttons: with no JavaScript they act as navigation,
   which is also how a server-rendered catalogue would drive them.
   -------------------------------------------------------------------------- */

.filter-bar {
  border-block: var(--hairline) solid var(--color-rule);
  background-color: var(--color-surface);
  padding-block: var(--space-32);
}

.filter-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-48);
  font-size: var(--fs-label);
  line-height: normal;
}

.filter-bar__label {
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-cta);
  opacity: 0.5;
  white-space: nowrap;
}

.filter-bar__list {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-16) var(--space-32);
  letter-spacing: var(--tracking-nav);
}

.filter-bar__link {
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.filter-bar__link:hover,
.filter-bar__link:focus-visible { color: var(--color-clay); }

.filter-bar__link[aria-current="true"] {
  color: var(--color-clay);
  font-weight: var(--weight-bold);
}

/* --------------------------------------------------------------------------
   Objects grid (3:193) — see the reconstruction note at the top
   -------------------------------------------------------------------------- */

.objects {
  background-color: var(--color-surface);
  padding-block: var(--space-80);
}

.objects__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-48) var(--space-32);
}

.object-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
}

.object-card__figure {
  width: 100%;
  margin: 0;
  overflow: hidden;
}

.object-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform var(--transition);
}

.object-card:hover .object-card__image { transform: scale(1.02); }

.object-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  width: 100%;
}

.object-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
  font-weight: var(--weight-semibold);
  line-height: normal;
}

.object-card__name { font-size: var(--fs-body); }

.object-card__price {
  color: var(--color-clay);
  font-size: var(--fs-caption);
  white-space: nowrap;
}

.object-card__material {
  width: 100%;
  font-size: var(--fs-caption);
  line-height: normal;
  opacity: var(--opacity-credit);
}

.object-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-block-start: var(--space-8);
}

.object-card__size {
  font-size: var(--fs-label);
  line-height: normal;
  /* was 0.4, which measured 2.43:1 against the bone ground — below WCAG AA
     at any size. */
  opacity: var(--opacity-credit);
  white-space: nowrap;
}

/* Same icon file as the collections CTA, at the 60% opacity the design uses. */
.object-card__icon {
  width: 16px;
  height: 16px;
  opacity: var(--opacity-credit);
  transition: transform var(--transition);
}

.object-card:hover .object-card__icon { transform: translateX(4px); }

@media (max-width: 1024px) {
  .featured { padding-block: calc(var(--header-clearance) + var(--space-64)) var(--space-48); }

  .featured__body {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-32);
  }

  .featured__figure { width: 100%; }
  .featured__image  { height: auto; aspect-ratio: 494 / 691; }

  .filter-bar__inner { flex-direction: column; align-items: flex-start; gap: var(--space-16); }

  .objects__grid { grid-template-columns: repeat(2, 1fr); }
}

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