/* Home: hero, article grid, skills, method, FAQ. */

.hero {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
  color: var(--white);
}

.hero__grid {
  display: grid;
  align-items: center;
  gap: 2.5rem;
}

.hero__title {
  font-size: var(--fs-hero);
  animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero__lead {
  max-width: 36rem;
  margin-top: 1.25rem;
  font-size: var(--fs-lead);
  animation: rise 0.7s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
  animation: rise 0.7s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
  list-style: none;
}

.hero__fact {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(16, 48, 62, 0.35);
  font-size: var(--fs-small);
}

.hero__value {
  color: var(--gold);
  font-family: var(--ff-head);
}

.hero__art {
  max-width: 34rem;
  justify-self: center;
  animation: float-in 0.9s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero__img {
  width: 100%;
  filter: drop-shadow(0 24px 30px rgba(16, 48, 62, 0.35));
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes float-in {
  from {
    opacity: 0;
    transform: translateY(24px) rotate(2deg) scale(0.96);
  }
}

@media (min-width: 60em) {
  .hero__grid {
    grid-template-columns: 1.1fr 1fr;
  }
}

/* ---------- Article grid ---------- */

.topics {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

@media (min-width: 44em) {
  .topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 66em) {
  .topics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Skills ---------- */

.skills {
  display: grid;
  gap: 1.25rem;
  list-style: none;
}

@media (min-width: 40em) {
  .skills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 66em) {
  .skills {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- Method ---------- */

.method {
  display: grid;
  gap: 2rem;
}

.method__title {
  color: var(--white);
  font-size: var(--fs-h2);
}

.method__list {
  display: grid;
  gap: 1rem;
  list-style: none;
  counter-reset: method;
}

.method__item {
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 4.5rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  counter-increment: method;
}

.method__item::before {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-family: var(--ff-head);
  font-weight: 700;
  content: counter(method);
}

.method__name {
  margin-bottom: 0.35rem;
  color: var(--white);
  font-size: var(--fs-h3);
}

.method__text {
  color: var(--on-dark-soft);
}

@media (min-width: 60em) {
  .method {
    grid-template-columns: 1fr 1.2fr;
    align-items: start;
    gap: 4rem;
  }
}

/* ---------- FAQ ---------- */

.faq__list {
  display: grid;
  gap: 0.75rem;
  max-width: 50rem;
}

.faq__item {
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-s);
}

.faq__question {
  position: relative;
  padding: 1.1rem 3.5rem 1.1rem 1.375rem;
  font-family: var(--ff-head);
  font-size: 1.0625rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::after {
  position: absolute;
  top: 50%;
  right: 1.25rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-deep);
  content: "+";
  transform: translateY(-50%);
  transition: transform var(--ease);
}

.faq__item[open] .faq__question::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq__answer {
  padding: 0 1.375rem 1.25rem;
  color: var(--navy-soft);
}