.school-section {
  min-height: 0;
  padding: 100px 10% 112px;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  column-gap: 8%;
}
.school-index { position: relative; z-index: 1; margin-bottom: 24px; }
.school-copy { padding-top: 48px; z-index: 1; }
.about-copy {
  align-self: start;
  position: relative;
  z-index: 1;
  max-width: 620px;
  padding: 48px 0 0;
}
.about-copy p {
  margin: 0 0 17px;
  color: #536552;
  font: 400 13px/1.8 'DM Sans', sans-serif;
}
.focus-block { margin: 25px 0 27px; }
.focus-block h3 {
  margin: 0 0 13px;
  color: #304b37;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.focus-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.focus-tags li {
  padding: 7px 10px;
  border: 1px solid #c8cfb9;
  border-radius: 30px;
  color: #456044;
  font-size: 9px;
  letter-spacing: .015em;
}
.club-motto {
  display: grid;
  gap: 8px;
  margin-top: 26px;
  padding-top: 19px;
  border-top: 1px solid #cbd0be;
}
.club-motto span { color: #78836e; font-size: 8px; letter-spacing: .18em; }
.club-motto strong { color: #486441; font: italic 500 22px/1.35 'Playfair Display', serif; }
.footer { display: block; min-height: 0; padding: 42px 8% 20px; background: #10271f; }
.footer-top { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.35fr) auto; align-items: center; gap: clamp(22px, 4vw, 56px); padding-bottom: 34px; }
.footer-top:has(.footer-social) { grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.35fr) auto auto; }
.footer-brand { gap: 15px; font: inherit; }
.footer-brand-copy { display: grid; gap: 7px; }
.footer-brand-copy strong { color: #f1eee4; font: 600 17px/1 'DM Sans', sans-serif; letter-spacing: .015em; }
.footer-brand-copy small { color: #a9b7a8; font: 10px/1.7 'DM Sans', sans-serif; letter-spacing: .025em; }
.footer-links,.footer-credit { display: grid; justify-items: start; gap: 8px; text-align: left; }
.footer-links { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 9px; width: 100%; min-width: 0; }
.footer-link-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 9px; width: 100%; min-width: 0; overflow-x: auto; padding: 1px 2px 7px; scrollbar-width: none; scroll-snap-type: x proximity; }
.footer-link-row::-webkit-scrollbar { display: none; }
.footer-label { color: #82937f; font-size: 8px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
.footer-links a { flex: 0 0 auto; min-height: 36px; justify-content: center; padding: 8px 11px; color: #dce3d3; font-size: 10px; line-height: 1.3; text-align: center; white-space: nowrap; scroll-snap-align: start; transition: color .2s ease; }
.footer-links a:hover { color: #c8db93; }
.footer-links a span { margin-left: 4px; color: #c8db93; }
.footer-social { display: grid; justify-items: start; gap: 11px; }
.example-2 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.example-2 .icon-content { position: relative; }
.example-2 .icon-content a {
  position: relative;
  display: flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #496252;
  border-radius: 50%;
  background: #18352a;
  color: #dce3d3;
  transition: color .25s ease, border-color .25s ease, transform .25s ease;
}
.example-2 .icon-content a:hover,
.example-2 .icon-content a:focus-visible { color: #fff; border-color: transparent; transform: translateY(-2px); outline: 2px solid #c8db93; outline-offset: 3px; }
.example-2 .icon-content a svg { position: relative; z-index: 1; width: 17px; height: 17px; }
.example-2 .icon-content a .filled { position: absolute; inset: auto 0 0; height: 0; transition: height .25s ease; }
.example-2 .icon-content a:hover .filled,
.example-2 .icon-content a:focus-visible .filled { height: 100%; }
.example-2 .icon-content a[data-social="whatsapp"] .filled,
.example-2 .icon-content a[data-social="whatsapp"] ~ .tooltip { background: #128c7e; }
.example-2 .icon-content a[data-social="facebook"] .filled,
.example-2 .icon-content a[data-social="facebook"] ~ .tooltip { background: #3b5998; }
.example-2 .icon-content a[data-social="instagram"] .filled,
.example-2 .icon-content a[data-social="instagram"] ~ .tooltip { background: linear-gradient(45deg,#405de6,#5b51db,#b33ab4,#c135b4,#e1306c,#fd1f1f); }
.example-2 .tooltip { position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translate(-50%, 4px); padding: 5px 8px; border-radius: 4px; color: #fff; font-size: 9px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.example-2 .icon-content:hover .tooltip,
.example-2 .icon-content:focus-within .tooltip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.footer-credit { color: #dce3d3; font-size: 11px; line-height: 1.4; }
.footer-credit strong { color: #f1eee4; font: 500 18px/1.1 'Playfair Display', serif; }
.footer-class { color: #aebe91; font-size: 9px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 15px; border-top: 1px solid #ffffff1c; }
.footer-bottom small { color: #89998a; font-size: 8px; letter-spacing: .04em; }
.footer-bottom .footer-motto { color: #aebe91; letter-spacing: .11em; text-transform: uppercase; }
@media (max-width: 900px) and (min-width: 701px) {
  .footer-top,.footer-top:has(.footer-social) { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; }
  .footer-credit { grid-column: 1 / -1; }
  .footer-links { width: 100%; max-width: 380px; }
}
@media (max-width: 700px) {
  .school-section { padding: 82px 8% 96px; }
  .school-copy { padding-top: 0; }
  .about-copy { padding: 42px 0 0; }
  .about-copy p { font-size: 13px; }
  .club-motto strong { font-size: 20px; }
  .footer { padding: 36px 8% 20px; }
  .footer-top,.footer-top:has(.footer-social) { position: relative; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 0 0 27px; }
  .footer-links { gap: 7px; width: 100%; }
  .footer-link-row { gap: 6px; }
  .footer-links a { min-height: 34px; padding: 7px 8px; font-size: 8px; }
  .footer-brand { padding-right: 48px; }
  .footer-top .back-top { position: absolute; top: 0; right: 0; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
}
