/* ==========================================================
   EXPERIENCE
========================================================== */

.ala-experience {
  padding: 120px 0;

  background: #f7f9fc;
}

.experience-grid {
  display: grid;

  grid-template-columns: 2fr 1fr;

  grid-template-rows: 320px 320px;

  gap: 28px;
}

.experience-card {
  position: relative;

  overflow: hidden;

  border-radius: 28px;

  cursor: pointer;
}

.experience-image {
  position: absolute;

  inset: 0;

  z-index: 0;

  overflow: hidden;
}

.experience-image img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transform: scale(1);

  transition: transform 0.8s ease;
}

.experience-overlay {
  position: absolute;

  inset: 0;

  z-index: 1;

  background: linear-gradient(
    180deg,
    rgba(20, 58, 90, 0.08),
    rgba(20, 58, 90, 0.78)
  );

  transition: 0.45s;
}

.experience-content {
  position: absolute;

  inset: 0;

  z-index: 2;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 36px;

  color: #fff;
}

.experience-tag {
  align-self: flex-start;

  margin-bottom: 18px;

  padding: 8px 18px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.18);

  backdrop-filter: blur(12px);

  border: 1px solid rgba(255, 255, 255, 0.2);

  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.15em;
}

.experience-content h3 {
  margin: 0 0 14px;

  font-size: 2.3rem;

  font-weight: 800;

  line-height: 1;

  color: #fff;

  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
}

.experience-content p {
  max-width: 380px;

  margin: 0 0 22px;

  line-height: 1.7;

  color: rgba(255, 255, 255, 0.92);
}

.experience-content a {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: #fff;

  text-decoration: none;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  transition: gap 0.35s ease;
}

.experience-card:hover .experience-image img {
  transform: scale(1.08);
}

.experience-card:hover .experience-overlay {
  background: linear-gradient(
    180deg,
    rgba(20, 58, 90, 0.03),
    rgba(20, 58, 90, 0.65)
  );
}

.experience-card:hover .experience-content a {
  gap: 18px;
}

.open-day {
  grid-column: 1;

  grid-row: 1 / span 2;
}

.nordic {
  grid-column: 2;

  grid-row: 1;
}

.run4fun {
  grid-column: 2;

  grid-row: 2;
}

.eventi {
  grid-column: 1 / span 2;

  min-height: 320px;

  margin-top: 28px;
}