/* core/layout.css — page grids and containers */

.cfm-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.cfm-ribbon {
  background: var(--color-bg-primary);
  text-align: center;
  padding: var(--space-2);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  border-bottom: 1px solid var(--color-border-subtle);
}

.cfm-ribbon strong { color: var(--color-accent-primary); font-weight: var(--font-weight-medium); }
.cfm-ribbon em { color: var(--color-accent-secondary); font-style: normal; font-weight: var(--font-weight-medium); }

/* Booth layout — three-column desktop, single-column mobile.
 * Tablet breakpoint stacks the right column under the player.
 */
.cfm-main--booth {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 260px;
  gap: var(--space-3);
  padding: var(--space-4);
  flex: 1;
}

@media (max-width: 1024px) {
  .cfm-main--booth {
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-areas:
      "left center"
      "right right";
  }
  .cfm-main--booth > :nth-child(1) { grid-area: left; }
  .cfm-main--booth > :nth-child(2) { grid-area: center; }
  .cfm-main--booth > :nth-child(3) { grid-area: right; }
}

@media (max-width: 720px) {
  .cfm-main--booth {
    grid-template-columns: 1fr;
    grid-template-areas: "center" "left" "right";
    padding: var(--space-3);
    gap: var(--space-3);
  }
  .cfm-ribbon {
    font-size: 9px;
    padding: var(--space-1) var(--space-2);
    letter-spacing: 0.05em;
  }
}

.cfm-main--dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  flex: 1;
}

@media (max-width: 720px) {
  .cfm-main--dashboard {
    padding: var(--space-3);
    gap: var(--space-3);
  }
}

.cfm-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

/* Modal overlay safe-area for mobile */
@media (max-width: 720px) {
  .cfm-card { padding: var(--space-3); }
}