/* ==========================================================================
   AL MOSTAQBAL FOODS — Bento Grid system
   12-col desktop grid, collapsing to 6-8 col tablet, 1 col mobile stack.
   Composition per section is set via .col-* / .row-* utilities and, where
   a deliberate layout is needed, grid-template-areas in pages.css.
   ========================================================================== */

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(64px, auto);
  gap: var(--grid-gap);
  align-items: stretch;
}

.bento + .bento { margin-block-start: var(--grid-gap); }

/* ---- Base cell ---- */
.cell {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-cell);
  padding: var(--cell-pad);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.cell--start { justify-content: flex-start; }
.cell--between { justify-content: space-between; }

.cell--pad-sm { padding: var(--cell-pad-sm); }

/* Interactive cells: subtle lift on hover */
.cell.is-interactive:hover,
a.cell:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* ---- Cell color variants ---- */
.cell--surface-alt { background: var(--color-surface-alt); box-shadow: none; }

.cell--outline {
  background: transparent;
  box-shadow: none;
  border: 1.5px dashed var(--color-border-strong);
}

.cell--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: transparent;
}
.cell--primary .text-muted,
.cell--primary p { color: var(--color-on-primary-muted); }
.cell--primary h1, .cell--primary h2, .cell--primary h3 { color: var(--color-on-primary); }

.cell--gold {
  background: linear-gradient(160deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
  color: var(--color-primary-dark);
  border-color: transparent;
}

.cell--tertiary {
  background: var(--color-tertiary);
  color: #FBEDE7;
  border-color: transparent;
}

.cell--image {
  color: var(--color-on-primary);
  background-color: var(--color-primary);
  background-size: cover;
  background-position: center;
  min-height: 220px;
}

.cell--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(34, 54, 41, 0.15) 0%, rgba(24, 38, 29, 0.82) 100%);
}

.cell--image > * { position: relative; z-index: 1; }

/* ---- Texture motif: subtle dotted world-map / grain, used sparingly ---- */
.cell--texture::after {
  content: "";
  position: absolute;
  inset-inline-end: -10%;
  inset-block-end: -18%;
  width: 65%;
  height: 65%;
  background-image: radial-gradient(currentColor 1.4px, transparent 1.4px);
  background-size: 14px 14px;
  opacity: 0.08;
  pointer-events: none;
}

/* ---- Cell content helpers ---- */
.cell-eyebrow {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.72;
}

.cell-title { font-size: var(--text-h3); font-weight: 700; line-height: var(--leading-snug); }
.cell-title--lg { font-size: var(--text-h2); }
.cell-body { font-size: var(--text-small); line-height: var(--leading-normal); }
.cell-body--lg { font-size: var(--text-body-lg); }
.cell-body--accent { color: var(--color-primary-dark); font-weight: 500; }

/* ---- Column span utilities (desktop: 12-col) ---- */
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-12 { grid-column: span 12; }

.row-2 { grid-row: span 2; }

/* ---- Scroll reveal ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px) scale(0.94);
  transition: opacity 0.65s var(--ease-standard),
              transform 0.7s cubic-bezier(0.22, 1.12, 0.36, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Icon chips get a small delayed "pop" after their card has faded in,
   so a reveal reads as two beats instead of one flat fade. */
[data-reveal] .icon-chip {
  opacity: 0;
  transform: scale(0.5) rotate(-8deg);
  transition: opacity 0.5s var(--ease-standard) 0.14s,
              transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.14s;
}

[data-reveal].is-visible .icon-chip {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal] .icon-chip { opacity: 1; transform: none; transition: none; }
  .cell.is-interactive:hover, a.cell:hover { transform: none; }
}

/* ==========================================================================
   Responsive collapse
   Tablet (768–1199px): simplify to a denser grid, halve the largest spans.
   Mobile (<768px): single-column stack, importance order preserved by markup.
   ========================================================================== */

@media (max-width: 1199px) {
  .bento { grid-template-columns: repeat(8, 1fr); }

  .col-2 { grid-column: span 2; }
  .col-3 { grid-column: span 4; }
  .col-4 { grid-column: span 4; }
  .col-5 { grid-column: span 5; }
  .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 8; }
  .col-8 { grid-column: span 8; }
  .col-9 { grid-column: span 8; }
  .col-12 { grid-column: span 8; }
}

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

  .bento .col-2,
  .bento .col-3,
  .bento .col-4,
  .bento .col-5,
  .bento .col-6,
  .bento .col-7,
  .bento .col-8,
  .bento .col-9,
  .bento .col-12 {
    grid-column: 1 / -1;
  }

  .row-2 { grid-row: auto; }

  .cell { padding: var(--cell-pad-sm); border-radius: var(--radius-cell-sm); }

  /* values / why-us small square grid becomes a 2-col grid on mobile, not full stack */
  .bento--pairs-mobile { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .bento--pairs-mobile .cell { grid-column: span 1; }
}