/* Quinta sezione: proposta 3, Lo stemma. */
#club {
  --club-gutter: clamp(40px, 4.444vw, 80px);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: clamp(720px, 58.889vw, 900px);
  background: var(--ink);
  color: #fff;
}

#club .club-portrait {
  position: absolute;
  inset: 0 0 0 auto;
  width: 61%;
  overflow: hidden;
  z-index: -1;
}

#club .club-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% center;
}

#club .club-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #201e1d 0%, #201e1de6 6%, #201e1d44 26%, transparent 48%),
    linear-gradient(0deg, #201e1daa, transparent 20%);
  pointer-events: none;
}

#club .club-content {
  position: relative;
  width: 49%;
  max-width: 720px;
  padding: clamp(44px, 4.028vw, 64px) 0 72px var(--club-gutter);
}

#club .eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 450px;
  color: var(--yellow);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .14em;
}

#club .eyebrow::before {
  content: "";
  flex: 0 0 35px;
  height: 3px;
  background: currentColor;
}

#club h2 {
  margin-top: clamp(45px, 4.93vw, 71px);
  font-size: clamp(64px, 5.486vw, 88px);
  line-height: .99;
  letter-spacing: -.02em;
}

#club h2 span {
  display: block;
  margin-top: 5px;
  color: var(--yellow);
  font-size: clamp(88px, 7.986vw, 128px);
}

#club .club-description {
  max-width: min(450px, 36vw);
  margin-top: 30px;
  color: #dedee1;
  font-size: 18px;
  line-height: 1.7;
}

#club .button {
  min-width: 308px;
  max-width: 100%;
  min-height: 56px;
  margin-top: 31px;
  padding: 17px 22px;
  font-weight: 600;
  line-height: 1.35;
}

#club .button span { font: 28px/1 Barlow, sans-serif; }
#club .button:focus-visible { outline-color: #fff; }

#club .club-signature {
  display: flex;
  justify-content: space-between;
  gap: 18px 32px;
  margin: auto var(--club-gutter) 30px;
  padding-top: 17px;
  border-top: 1px solid #ffffff40;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .13em;
}

@media (max-width: 1000px) {
  #club { --club-gutter: 40px; min-height: 0; }
  #club .club-portrait {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 1.49;
    max-height: 580px;
    z-index: 0;
  }
  #club .club-portrait img { object-position: center; }
  #club .club-portrait::after {
    background: linear-gradient(0deg, #201e1d, #201e1d55 12%, transparent 24%);
  }
  #club .club-content {
    width: 100%;
    max-width: none;
    padding: 24px var(--club-gutter) 48px;
  }
  #club h2 { margin-top: 30px; font-size: 72px; }
  #club h2 span { font-size: 104px; }
  #club .club-description { max-width: 580px; }
  #club .club-signature { margin-bottom: 28px; flex-wrap: wrap; }
}

@media (max-width: 600px) {
  #club { --club-gutter: 23px; }
  #club .club-portrait { aspect-ratio: 1.15; }
  #club .club-content { padding-top: 18px; padding-bottom: 36px; }
  #club .eyebrow { gap: 12px; font-size: 11px; letter-spacing: .11em; }
  #club .eyebrow::before { flex-basis: 25px; }
  #club h2 { margin-top: 28px; font-size: clamp(49px, 12.3vw, 70px); }
  #club h2 span { font-size: clamp(73px, 18vw, 100px); }
  #club .club-description { margin-top: 23px; font-size: 16px; line-height: 1.65; }
  #club .button { min-width: 0; width: 100%; margin-top: 26px; gap: 16px; }
  #club .club-signature { flex-direction: column; gap: 9px; font-size: 10px; margin-bottom: 23px; }
}

@media (max-width: 360px) {
  #club { --club-gutter: 19px; }
  #club .button { padding-inline: 18px; font-size: 15px; }
}