.competitions { position: relative; isolation: isolate; padding: 52px 0 112px; background: #f5f9ff; }
/* Background-only layers preserve the four corners without stretching or cropping the artwork. */
.competitions::before, .competitions::after { content: ''; position: absolute; left: 0; right: 0; height: 56.25vw; max-height: 100%; z-index: -1; pointer-events: none; background-image: url('assets/foundation-games-bg.webp'); background-repeat: no-repeat; background-size: 100% auto; }
.competitions::before { top: 0; background-position: center top; mask-image: linear-gradient(#000 0%, #000 45%, transparent 72%); }
.competitions::after { bottom: 0; background-position: center bottom; mask-image: linear-gradient(transparent 28%, #000 66%, #000 100%); }
@media (min-width: 1025px) {
  .competitions::before, .competitions::after { opacity: .86; }
}
@media (max-width: 1024px) {
  .competitions::before { opacity: .62; }
  .competitions::after { opacity: .46; }
}
@media (max-width: 640px) {
  .competitions::before { opacity: .24; }
  .competitions::after { opacity: .18; }
}
.games-wrap { width: min(1640px, 92%); margin-inline: auto; }
.games-heading { margin: 0 auto 34px; text-align: center; }
.games-eyebrow { display: flex; justify-content: center; align-items: center; gap: 19px; color: #1d4ed8; font-weight: 600; font-size: clamp(10px, 1vw, 16px); letter-spacing: .42em; margin-bottom: 10px; }
.games-eyebrow:before, .games-eyebrow:after { content: ''; height: 1px; width: 80px; background: linear-gradient(90deg, transparent, #1d4ed8); }
.games-eyebrow:after { transform: rotate(180deg); }
.games-heading h2 { font-size: clamp(38px, 4.1vw, 68px); font-weight: 800; letter-spacing: -.035em; line-height: 1.15; margin-bottom: 15px; }
.games-heading h2 span { color: #1d4ed8; background: linear-gradient(135deg, #2563eb, #0647d9); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.games-heading > p:last-child { color: #1f2937; font-size: clamp(13px, 1.2vw, 20px); line-height: 1.5; max-width: 1040px; margin-inline: auto; }
.competition-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.competition-card { min-width: 0; background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 8px 24px #0b1f5c12; display: flex; flex-direction: column; align-items: center; gap: 10px; transition: transform .2s, box-shadow .2s; }
.competition-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px #0b1f5c1a; }
.competition-art { display: block; width: 100%; aspect-ratio: 1.63 / 1; overflow: hidden; border-radius: 12px; background: linear-gradient(140deg, #edf5ff, #e2e9fd); }
.competition-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.competition-card:hover .competition-art img { transform: scale(1.035); }
.competition-card h3 { font-size: clamp(13px, 1.12vw, 19px); line-height: 1.35; letter-spacing: -.035em; font-weight: 700; text-align: center; margin: 0; min-height: 2.7em; display: flex; align-items: center; justify-content: center; }
.event-badge { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 999px; min-height: 34px; padding: 4px 17px 4px 7px; font-size: 13px; line-height: 1.3; font-weight: 600; white-space: nowrap; }
.badge-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--badge-color); color: #fff; flex-shrink: 0; }
.badge-icon svg { display: block; width: 20px; height: 20px; }
.gaming { --badge-color: #1d4ed8; color: #1d4ed8; background: #e6eeff; }
.sports { --badge-color: #15803d; color: #15803d; background: #e7f8ee; }
.fun { --badge-color: #ea8b09; color: #c2410c; background: #fff3e0; }
.technical { --badge-color: #7c3aed; color: #7c3aed; background: #f1e8ff; }
.creative { --badge-color: #e11d48; color: #e11d48; background: #ffe6ee; }
.cultural { --badge-color: #dc2626; color: #dc2626; background: #ffe6e6; }
.register-button { width: 100%; min-height: 45px; padding: 10px 12px; gap: 8px; margin-top: auto; font-size: clamp(12px, 1vw, 17px); font-weight: 700; border-color: #eeb13b80; box-shadow: inset 0 2px 1px #ffffffa6, 0 4px 10px #e9a21c33; }
@media (min-width: 1500px) {
  .competition-card h3 { min-height: 0; font-size: 18px; }
}
@media (max-width: 1200px) {
  .games-wrap { width: 94%; }
  .competition-grid { gap: 13px; }
  .competition-card { padding: 11px; gap: 9px; border-radius: 15px; }
  .event-badge { font-size: 11px; gap: 6px; padding-right: 10px; }
  .badge-icon { width: 24px; height: 24px; }
  .register-button { font-size: 12px; padding-inline: 8px; }
}
@media (max-width: 1000px) {
  .competitions { padding-top: 40px; }
  .games-wrap { width: 90%; }
  .competition-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .competition-card { padding: 13px; gap: 11px; }
  .competition-card h3 { font-size: 16px; }
  .event-badge { font-size: 12px; }
  .register-button { font-size: 13px; }
  .games-heading h2 { font-size: clamp(34px, 5.3vw, 52px); }
  .games-heading > p:last-child { font-size: 15px; }
  .games-subtitle-break { display: none; }
}
@media (max-width: 640px) {
  .competitions { padding: 36px 0 72px; }
  .games-heading { margin-bottom: 25px; }
  .games-eyebrow { font-size: 9px; gap: 9px; letter-spacing: .25em; }
  .games-eyebrow:before, .games-eyebrow:after { width: 25px; }
  .games-heading h2 { font-size: clamp(32px, 8vw, 44px); line-height: 1.16; margin-bottom: 13px; }
  .games-heading > p:last-child { font-size: 13px; line-height: 1.65; }
  .competition-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
  .competition-card { padding: 10px; gap: 10px; border-radius: 14px; }
  .competition-art { border-radius: 9px; }
  .competition-card h3 { font-size: 13px; line-height: 1.4; min-height: 2.8em; letter-spacing: -.02em; }
  .event-badge { font-size: 10px; gap: 5px; min-height: 29px; padding: 3px 9px 3px 4px; }
  .badge-icon { width: 23px; height: 23px; }
  .badge-icon svg { width: 17px; height: 17px; }
  .register-button { min-height: 42px; font-size: 11px; padding: 8px 6px; gap: 5px; }
  .register-button span { font-size: 17px; }
}
@media (max-width: 359px) {
  .games-wrap { width: 92%; }
  .competition-grid { gap: 9px; }
  .competition-card { padding: 8px; }
  .competition-card h3 { font-size: 12px; }
  .event-badge { font-size: 9px; }
  .register-button { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .competition-card, .competition-art img { transition: none; }
}