@import './custom-properties.css';

.layout-masonry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 10px;
  gap: 18px;
}

.layout-masonry > * {
  background: var(--ff-color-surface-2);
  border-radius: var(--ff-radius-md);
  padding: 18px;
  box-shadow: var(--ff-shadow-soft);
}

.layout-bento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-auto-flow: dense;
  gap: 16px;
}

.layout-bento .wide {
  grid-column: span 2;
}

.layout-bento .tall {
  grid-row: span 2;
}

.magazine-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: 12px;
}

.magazine-grid .lead {
  grid-column: span 7;
}

.magazine-grid .sidebar {
  grid-column: span 5;
}

.asymmetric {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 32px;
}

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

.container-query-box {
  container-type: inline-size;
  border: 1px solid var(--ff-color-border);
  padding: 16px;
  border-radius: var(--ff-radius-md);
}

@container (max-width: 540px) {
  .container-query-box {
    background: rgba(255, 255, 255, 0.04);
  }
}

.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-4-3 { aspect-ratio: 4 / 3; }
.aspect-square { aspect-ratio: 1 / 1; }

/* Responsive breakpoints */
@media (max-width: var(--ff-breakpoint-xl)) {
  .magazine-grid .lead { grid-column: span 8; }
  .magazine-grid .sidebar { grid-column: span 4; }
}

@media (max-width: var(--ff-breakpoint-lg)) {
  .magazine-grid .lead { grid-column: span 12; }
  .magazine-grid .sidebar { grid-column: span 12; }
}

@media (max-width: var(--ff-breakpoint-md)) {
  .layout-bento .wide { grid-column: span 1; }
  .layout-bento .tall { grid-row: span 1; }
}