/* Modulszekció: mint háttér, csempék bento-rácsban, sorszámmal.
   Megrendelői döntés (2026-09-20): a csempe TARTALMA vízszintesen és függőlegesen
   KÖZÉPRE igazított, a sorszám pedig a JOBB FELSŐ sarokban ül felső indexként —
   ezért a csempe `position: relative`, a sorszám `position: absolute`. */

.modules {
  background: var(--f-mint);
  color: var(--f-on-shape);
  margin-top: calc(var(--r-section) * -1);
}

.modules .section__head h2 {
  max-width: 14ch;
}

.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 28px;
  min-height: 220px;
  /* Felül több hely, hogy a szöveg ne érjen a sarokban ülő sorszámhoz. */
  padding: 44px 26px 30px;
  text-align: center;
  border-radius: var(--r-tile);
  background: var(--f-card);
  color: var(--f-ink);
  transition: transform var(--dur) var(--ease);
}

.tile:hover {
  color: var(--f-ink);
  transform: translateY(-3px);
}

.tile--wide {
  grid-column: span 2;
}

.tile--primary {
  background: var(--f-primary);
  color: var(--f-on-primary);
}

.tile--primary:hover {
  color: var(--f-on-primary);
}

.tile--mustard {
  background: var(--f-mustard);
  color: var(--f-on-shape);
}

.tile--coral {
  background: var(--f-coral);
  color: var(--f-on-shape);
}

.tile--sky {
  background: var(--f-sky);
  color: var(--f-on-shape);
}

.tile--ink {
  background: var(--f-dark);
  color: var(--f-on-dark-strong);
}

.tile--mustard:hover,
.tile--coral:hover,
.tile--sky:hover {
  color: var(--f-on-shape);
}

.tile--ink:hover {
  color: var(--f-on-dark-strong);
}

.tile__num {
  position: absolute;
  top: 16px;
  right: 18px;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.1em;
  opacity: 0.7;
}

.tile__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.tile h3 {
  font-size: clamp(1.375rem, 2vw, 1.75rem);
}

.tile--wide h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
}

.tile p {
  max-width: 44ch;
  margin-inline: auto;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: inherit;
}

.tile--wide p,
.tile:not(.tile--primary):not(.tile--ink) p {
  font-size: 1rem;
}

.tile:not(.tile--primary):not(.tile--ink):not(.tile--mustard):not(.tile--coral):not(.tile--sky) p {
  color: var(--f-ink-soft);
}

.tile--ink p {
  color: var(--f-on-dark);
}

@media (max-width: 1000px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .bento {
    grid-template-columns: minmax(0, 1fr);
  }

  .tile--wide {
    grid-column: span 1;
  }

  .tile {
    min-height: 0;
    gap: 20px;
  }
}

/* 07 — Videótár: menta, széles csempe (a modulsor lezárása). */
.tile--mint {
  background: var(--f-mint);
}

.tile--mint:hover {
  transform: translateY(-2px);
}

/* Állapotjelölő a modulcsempéken: mi él ma, mi készül még. */
.tile__status {
  align-self: center;
  order: -1;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(16, 16, 16, 0.12);
  font-family: var(--f-font-mono, "DM Mono", monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tile--ink .tile__status {
  background: rgba(255, 255, 255, 0.18);
}