/* ––––––––– HERO –––––––– */

section.hero {
  position: relative;
  isolation: isolate;
  height: 95dvh;
}
section.hero::before {
  content: "";
  position: absolute;
  inset: 0;

  z-index: -1;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 1) 100%);

  pointer-events: none;
  user-select: none;
}

section.hero .circle {
  top: calc(var(--header-height) + 5%);
  left: -2rem;
  width: 243px;
}
section.hero .circle2 {
  top: calc(100% - 75px);
  left: unset;
  right: -2.5rem;
  width: 150px;
}
section.hero .container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}
section.hero .container h1 {
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--color-white);
  text-align: center;
}
section.hero .container p {
  font-weight: 400;
  font-size: var(--text-lg);
  color: var(--color-white);
  text-align: center;
}
section.hero .container .btn {
  margin-top: 2rem;
}

/* ––––––––– ABOUT –––––––– */

section.about {
  background-position: center;
}

section.about .container {
  position: relative;
  isolation: isolate;
}
section.about .container .circle {
  top: calc(90% - 160px);
  left: -8rem;
  width: 313px;
  z-index: -1;
}
section.about .container div:not(.circle) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;

  border-radius: 50px;
  padding: 2.4rem;

  backdrop-filter: blur(24px);
  background-color: #ffffff0d;
}
section.about .container h2 {
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--color-primary);
}
section.about .container p {
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--color-white);
  letter-spacing: 0.02em;
}

@media screen and (min-width: 1024px) {
  section.about .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  section.about .container div:not(.circle) {
    align-items: start;
  }
}

/* ––––––––– ACTIVITIES –––––––– */

section.activities {
  background-position: 30%;
  background-size: cover;
  background-repeat: no-repeat;
}

section.activities .container ul {
  display: grid;
  gap: 1rem;

  margin-top: 3rem;
}
section.activities .container ul li {
  display: grid;
  grid-template-columns: 0.3fr 1fr;
  align-items: center;
  gap: 1rem;
  width: 100%;

  background-color: #ffffff0d;
  border-radius: 50px;
  backdrop-filter: blur(24px);
  padding: 1rem 2rem;

  color: var(--hover-primary);
}
section.activities .container ul li h3 {
  color: var(--color-white);
}

@media screen and (min-width: 1024px) {
  section.activities .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  section.activities .container ul {
    margin-top: 0;
  }
}

/* –––––––––– EVENTS ––––––––  */

section.events {
  position: relative;
  isolation: isolate;
}
section.events .circle {
  width: 282px;
  left: -2rem;
  top: 10rem;
  background-color: var(--color-primary);
  z-index: -1;
}
section.events .circle2 {
  width: 356px;
  left: unset;
  right: -10rem;
  top: calc(80% - 300px);
}
section.events .container h2 {
  text-align: center;
}

section.events .container ul {
  margin-top: 3rem;
  display: grid;
  gap: 1rem;
}
section.events .container ul .card {
  grid-template-rows: subgrid;
  grid-row: span 5;
}

section.events .container > .buttons {
  display: flex;
  gap: 1rem;
  flex-direction: column;
  margin-top: 3rem;
}
section.events .container > .buttons .btn {
  width: 100%;
}

@media screen and (min-width: 768px) {
  section.events .container ul {
    grid-template-columns: repeat(2, 1fr);
  }
  section.events .container > .buttons {
    flex-direction: row;
  }
  section.events .container > .buttons .btn {
    width: unset;
  }
}

@media screen and (min-width: 1024px) {
  section.events .circle2 {
    top: calc(100% - 300px);
  }
}
@media screen and (min-width: 1280px) {
  section.events .circle:not(.circle2) {
    top: var(--section-padding);
  }

  section.events .container ul {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ––––––––– NEWS –––––––– */

section.news {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

section.news .container h2 {
  text-align: center;
}
section.news .container > p {
  font-weight: 700;
  font-size: var(--text-20);
  line-height: var(--leading-20);
  color: var(--color-white);
  text-align: center;
  margin-bottom: 3rem;
}

section.news .container ul {
  display: grid;
  gap: 1rem;
}
section.news .container ul .card {
  grid-template-rows: subgrid;
  grid-row: span 5;
}

section.news .container .btn {
  margin-inline: auto;
  margin-top: 3rem;
}

@media screen and (min-width: 1024px) {
  section.news .container ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1280px) {
  section.news .container ul {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ––––––––– PARTNERS –––––––– */

section.partners {
  position: relative;
  isolation: isolate;
}
section.partners .circle {
  width: 356px;
  left: -120px;
  top: 8rem;
  background-color: var(--color-primary);
  z-index: -1;
}
section.partners .circle2 {
  width: 181px;
  left: unset;
  right: -4rem;
  top: calc(100% - 200px);
}

section.partners .container h2 {
  text-align: center;
}
section.partners .container p {
  margin-bottom: 3rem;
  text-align: center;

  font-size: var(--text-20);
  font-weight: 700;
  line-height: var(--leading-20);
  color: var(--color-white);
}

section.partners .container ul {
  display: grid;
  grid-template-columns: var(--auto-fit);
  gap: 1rem;
}
section.partners .container ul li {
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #ffffff0d;
  border-radius: 50px;
  backdrop-filter: blur(24px);
}
section.partners .container ul li a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

@media screen and (min-width: 1280px) {
  section.partners .circle:not(.circle2) {
    top: -100px;
  }
}

/* –––––––––– CONTACTS –––––––– */

section.contacts {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

section.contacts h2 {
  text-align: center;
}

section.contacts .container ul {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
}

section.contacts .container ul li {
  display: grid;
  align-items: center;
  grid-template-columns: 0.4fr 1fr;
  gap: 1rem;
  border-radius: 50px;
  padding: 1rem;
  background-color: #ffffff0d;
  backdrop-filter: blur(24px);
  position: relative;
}
section.contacts .container ul li a {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
section.contacts .container ul li a span {
  display: none;
}
section.contacts .container ul li p {
  font-weight: 400;
  font-size: var(--leading-20);
  color: var(--color-white);
}
section.contacts .container ul li div {
  border-radius: 20px;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

section.contacts .container ul li svg {
  margin-inline: auto;
  color: var(--color-white);
}

@media screen and (min-width: 1024px) {
  section.contacts .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  section.contacts .container ul {
    margin-top: 0;
  }
}