/**
 * Bythium Bento Grid Layout System & Geometric Ratios — v12.0.0
 * Architecture Modulaire Prédictible sur Grille 8-pt & Ratios d'Aspect Fixes (Zero CLS)
 * Dimensions calculées : 
 * - Module 1x1 : aspect-ratio: 1 / 1 (260x260px)
 * - Module 2x1 : aspect-ratio: 27 / 13 (540x260px)
 * - Module 1x2 : aspect-ratio: 13 / 27 (260x540px)
 * - Module 2x2 : aspect-ratio: 1 / 1 (540x540px)
 * Conteneur adaptatif avec Container Queries activées (container: bento-card / inline-size)
 */

/* ==========================================================================
 * Conteneur de Grille Bento Principal
 * ========================================================================== */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-5, 20px);
  max-inline-size: 1440px;
  margin-inline: auto;
  padding: var(--space-6, 24px);
  box-sizing: border-box;
}

/* ==========================================================================
 * Modules Bento & Emprises Géométriques avec Ratios Fixes (Zéro CLS)
 * ========================================================================== */

/* Module 1x1 — Carré de Contrôle / Primitives L1 (260x260px) */
.bento-1x1 {
  grid-column: span 3;
  aspect-ratio: 1 / 1;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  container: bento-card / inline-size;
}

/* Module 2x1 — Bandeau Horizontal / Organismes L2 (540x260px) */
.bento-2x1 {
  grid-column: span 6;
  aspect-ratio: 27 / 13;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  container: bento-card / inline-size;
}

/* Module 1x2 — Colonne Verticale / Flux L2 (260x540px) */
.bento-1x2 {
  grid-column: span 3;
  grid-row: span 2;
  aspect-ratio: 13 / 27;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  container: bento-card / inline-size;
}

/* Module 2x2 — Panneau Maître & Cockpits L3 (540x540px) */
.bento-2x2 {
  grid-column: span 6;
  grid-row: span 2;
  aspect-ratio: 1 / 1;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  container: bento-card / inline-size;
}

/* Module 3x1 — Bandeau Large (820x260px) */
.bento-3x1 {
  grid-column: span 9;
  aspect-ratio: 41 / 13;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  container: bento-card / inline-size;
}

/* Module 4x1 — Pleine Largeur (1100x260px) */
.bento-4x1 {
  grid-column: span 12;
  aspect-ratio: 55 / 13;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  container: bento-card / inline-size;
}

/* ==========================================================================
 * Carte Bento Fondamentale & Rayons Concentriques Formels
 * r_inner = max(0px, r_outer - padding)
 * ========================================================================== */
.bento-card {
  --radius-outer: var(--radius-card, 16px);
  --card-padding: var(--space-5, 20px);

  background: var(--bythium-surface-card, #131b2e);
  border: 1px solid var(--bythium-border-subtle, #1e293b);
  border-radius: var(--radius-outer);
  padding: var(--card-padding);
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  transition: border-color var(--duration-fast, 160ms) var(--ease-kinetic),
              box-shadow var(--duration-fast, 160ms) var(--ease-kinetic),
              transform var(--duration-fast, 160ms) var(--ease-kinetic);
}

.bento-card:hover {
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 12px 32px -4px rgba(2, 132, 199, 0.16);
  transform: translateY(-2px);
}

/* Application automatique du rayon concentrique sur les éléments internes */
.bento-card > .card-badge,
.bento-card > .card-inner-box,
.bento-card > .bento-inner-panel {
  border-radius: max(0px, calc(var(--radius-outer) - var(--card-padding)));
}

.bento-card-title {
  font-size: var(--text-md, 20px);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px 0;
  line-height: var(--line-height-tight, 1.15);
}

.bento-card-desc {
  font-size: var(--text-sm, 14px);
  line-height: var(--line-height-normal, 1.50);
  color: var(--bythium-text-secondary, #94a3b8);
  margin: 0;
}

/* ==========================================================================
 * Adaptabilité Responsive Déterministe
 * ========================================================================== */
@media (max-width: 1024px) {
  .bento-1x1 { grid-column: span 6; aspect-ratio: auto; }
  .bento-2x1 { grid-column: span 12; aspect-ratio: auto; }
  .bento-1x2 { grid-column: span 6; grid-row: span 1; aspect-ratio: auto; }
  .bento-2x2 { grid-column: span 12; grid-row: span 1; aspect-ratio: auto; }
  .bento-3x1 { grid-column: span 12; aspect-ratio: auto; }
}

@media (max-width: 640px) {
  .bento-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4, 16px);
    padding: var(--space-4, 16px);
  }
  .bento-1x1,
  .bento-2x1,
  .bento-1x2,
  .bento-2x2,
  .bento-3x1,
  .bento-4x1 {
    grid-column: span 1;
    grid-row: auto;
    aspect-ratio: auto;
    min-height: auto;
  }
}