/* ==========================================================
   SECTION 2 / EVENTOS
========================================================== */

.events-section {
  position: relative;

  width: 100%;
  min-height: 745px;

  background-color: #171716;

  color: #ffffff;

  overflow: hidden;
}


/* ----------------------------------------------------------
   BACKGROUND
---------------------------------------------------------- */

.events-background {
  position: absolute;
  inset: 0;

  background-image: url("../images/section2.png");

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  opacity: 1;

  z-index: 0;
}


/* Capa oscura para garantizar contraste */

.events-background::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(23, 23, 22, 0.14) 0%,
      rgba(23, 23, 22, 0.28) 55%,
      rgba(23, 23, 22, 0.5) 100%
    );
}


/* ----------------------------------------------------------
   CONTAINER
---------------------------------------------------------- */

.events-container {
  position: relative;

  min-height: 745px;

  padding-top: 55px;
  padding-bottom: 85px;

  z-index: 2;
}


/* ----------------------------------------------------------
   HEADING
---------------------------------------------------------- */

.events-heading {
  max-width: 850px;

  margin-bottom: 70px;
}


/* EYEBROW */

.events-eyebrow {
  display: block;

  margin-bottom: 22px;

  font-family: var(--font-primary);

  font-size: 12px;
  font-weight: 600;

  line-height: 1;

  letter-spacing: 0.26em;

  text-transform: uppercase;

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


/* TITLE */

.events-title {
  margin: 0;

  font-family: var(--font-serif);

  font-size: clamp(54px, 4.4vw, 82px);

  font-weight: 400;

  line-height: 1.02;

  letter-spacing: -0.025em;

  color: #ffffff;
}


/* ==========================================================
   EVENTS GRID
========================================================== */

.events-grid {
  position: relative;

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  border-top: 1px solid rgba(255, 255, 255, 0.14);
}


/* ----------------------------------------------------------
   CARD
---------------------------------------------------------- */

.event-card {
  position: relative;

  min-height: 325px;

  padding:
    42px
    30px
    35px;

  border-right: 1px solid rgba(255, 255, 255, 0.13);

  transition:
    background-color 0.35s ease,
    transform 0.35s ease;
}


/* primera columna alineada al borde */

.event-card:first-child {
  padding-left: 0;
}


/* quitar línea del último */

.event-card:last-child {
  border-right: 0;
}


/* ----------------------------------------------------------
   NUMBER
---------------------------------------------------------- */

.event-number {
  display: block;

  margin-bottom: 78px;

  font-family: var(--font-primary);

  font-size: 10px;
  font-weight: 400;

  letter-spacing: 0.15em;

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


/* ----------------------------------------------------------
   CONTENT
---------------------------------------------------------- */

.event-card-content {
  max-width: 315px;
}


.event-card h3 {
  margin: 0 0 18px;

  font-family: var(--font-serif);

  font-size: clamp(27px, 1.7vw, 34px);

  font-weight: 400;

  line-height: 1.1;

  color: #ffffff;
}


.event-card p {
  margin: 0;

  font-family: var(--font-primary);

  font-size: 14px;

  line-height: 1.8;

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


/* ==========================================================
   HOVER
========================================================== */

@media (hover: hover) {

  .event-card:hover {
    background-color: rgba(255, 255, 255, 0.025);
  }

  .event-card:hover h3 {
    transform: translateX(5px);
  }

  .event-card h3 {
    transition: transform 0.35s ease;
  }

}


/* ==========================================================
   RESPONSIVE
========================================================== */


/* ----------------------------------------------------------
   SMALL DESKTOP
---------------------------------------------------------- */

@media (max-width: 1440px) {

  .events-section,
  .events-container {
    min-height: 700px;
  }

  .events-container {
    padding-top: 55px;
    padding-bottom: 70px;
  }

  .events-heading {
    margin-bottom: 60px;
  }

  .event-card {
    min-height: 300px;

    padding-top: 36px;
    padding-right: 25px;
    padding-left: 25px;
  }

  .event-card:first-child {
    padding-left: 0;
  }

  .event-number {
    margin-bottom: 65px;
  }

}


/* ----------------------------------------------------------
   TABLET
---------------------------------------------------------- */

@media (max-width: 1024px) {

  .events-section,
  .events-container {
    min-height: auto;
  }

  .events-container {
    padding-top: 75px;
    padding-bottom: 75px;
  }

  .events-heading {
    margin-bottom: 55px;
  }

  .events-title {
    font-size: clamp(48px, 7vw, 70px);
  }

  .events-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .event-card {
    min-height: 280px;

    padding: 35px;
  }

  .event-card:first-child {
    padding-left: 35px;
  }

  .event-card:nth-child(2) {
    border-right: 0;
  }

  .event-card:nth-child(1),
  .event-card:nth-child(2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  }

  .event-number {
    margin-bottom: 60px;
  }

}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width: 768px) {

  .events-container {
    padding-top: 65px;
    padding-bottom: 65px;
  }

  .events-heading {
    margin-bottom: 45px;
  }

  .events-eyebrow {
    margin-bottom: 18px;

    font-size: 10px;
  }

  .events-title {
    font-size: clamp(43px, 11vw, 58px);

    line-height: 1;
  }

  .events-grid {
    grid-template-columns: 1fr;
  }

  .event-card {
    min-height: auto;

    padding: 30px 0 35px;

    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  }

  .event-card:first-child {
    padding-left: 0;
  }

  .event-card:last-child {
    border-bottom: 0;
  }

  .event-number {
    margin-bottom: 35px;
  }

  .event-card-content {
    max-width: 520px;
  }

  .event-card h3 {
    font-size: 30px;
  }

}


/* ----------------------------------------------------------
   SMALL MOBILE
---------------------------------------------------------- */

@media (max-width: 480px) {

  .events-container {
    padding-top: 55px;
    padding-bottom: 55px;
  }

  .events-title {
    font-size: 42px;
  }

  .event-card h3 {
    font-size: 27px;
  }

  .event-card p {
    font-size: 13px;

    line-height: 1.7;
  }

  .events-section {
    padding: 0 2em;
  }

}