/* myStuf Online - a custom type's designed item layout (js/item-layout.js), on the item form and the View page.
   Shared with the Type Designer's phone canvas, so the preview and the real page can't drift apart.
   Colours come from site.css's tokens, which already switch for dark mode. */

/* Form: 3 across, like .field-pair-row's 2 (shell.css); both stack on a narrow screen. */
.field-triple-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.field-triple-row > * { min-width: 0; }
@media (max-width: 560px) { .field-triple-row { grid-template-columns: 1fr; } }

.il-section {
  margin-top: var(--space-5);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
  color: var(--teal-dark);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.il-divider { border: 0; border-top: 1px solid var(--border); margin: var(--space-3) 0; }

/* View page */
.il-view { display: flex; flex-direction: column; gap: var(--space-5); }
.il-hero { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-alt); }
.il-hero img { display: block; width: 100%; max-height: 280px; object-fit: cover; cursor: zoom-in; }
.il-photo-strip { display: flex; gap: var(--space-3); overflow-x: auto; }
.il-photo-strip:empty { display: none; }
.il-photo-strip img { width: 96px; height: 96px; flex: 0 0 auto; object-fit: cover; border-radius: var(--radius-md); cursor: zoom-in; background: var(--surface-alt); }
.il-head { display: flex; flex-direction: column; gap: var(--space-2); }
.il-head:empty { display: none; }
.il-subtitle { color: var(--ink-soft); font-size: var(--text-md); }
.il-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.il-chip {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--teal-tint);
  color: var(--teal-dark);
  font-size: var(--text-sm);
  font-weight: 600;
}
.il-view .dyn-field-group { display: flex; flex-direction: column; gap: var(--space-4); }
.il-view-row { display: grid; gap: var(--space-5); align-items: start; }
.il-view-row.il-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.il-view-row.il-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 420px) { .il-view-row.il-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.il-cell { min-width: 0; }
.il-cell-label { color: var(--ink-faint); font-size: var(--text-xs); margin-bottom: 2px; }
.il-cell-value { color: var(--ink); font-size: var(--text-base); overflow-wrap: anywhere; }