/* ============================================================
   CLUB.CSS — Al Riffa Sports Club · Club Page (Light Theme)
   ============================================================ */

:root {
  --primary: #187A7D;
  --primary-light: #1FA3A7;
  --primary-dark: #115B5D;
  --bg: #FAFBFC;
  --bg2: #FFFFFF;
  --bg3: #F0F2F5;
  --bg4: #E4E7EC;
  --text: #1A2332;
  --text-secondary: #4A5568;
  --grey: #8896A6;
  --border: rgba(24,122,125,0.12);
  --border-hover: rgba(24,122,125,0.35);
  --card-shadow: 0 2px 12px rgba(0,0,0,0.06);
  --card-shadow-hover: 0 8px 30px rgba(0,0,0,0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Barlow', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

/* ══ NAV ══ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3rem;
  height: 96px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}
.nav-logo { display: flex; align-items: center; gap: 0.8rem; }
.nav-logo img { height: 80px; width: 80px; object-fit: contain; }
.nav-club-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 2px;
  color: var(--primary);
}
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  opacity: 0.65;
  transition: opacity 0.2s, color 0.2s;
}
.nav-links a:hover { opacity: 1; color: var(--primary); }
.nav-links a.nav-active { opacity: 1; color: var(--primary); }

.nav-cta-li { display: none; }

/* ---- Language switcher ----
   A globe button that reveals the two languages on hover. :focus-within is there as
   well as :hover so it also opens from the keyboard and on touch, where hover does not
   exist. Grouped with the CTA in .nav-actions, so dir="rtl" flips the pair together. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* Logo and actions share the bar's leftover width equally, so the links sit in the
   true centre of the page rather than midway between two unequal neighbours. The
   logo side is wider than the globe, and wider still in Arabic, so without this the
   links drift toward the globe. Desktop only: on mobile the links live in the drawer. */
@media (min-width: 769px) {
  .nav-logo, .nav-actions { flex: 1 1 0; }
  .nav-actions { justify-content: flex-end; }
}
.nav-lang {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-lang-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--primary);
  background: none;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.nav-lang-toggle svg { width: 22px; height: 22px; display: block; }
.nav-lang:hover .nav-lang-toggle,
.nav-lang:focus-within .nav-lang-toggle {
  background: rgba(24,122,125,0.08);
  border-color: var(--border-hover);
  color: var(--primary-light);
}

.nav-lang-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  inset-inline-end: 0;
  min-width: 170px;
  list-style: none;
  padding: 0.35rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  z-index: 200;
}
/* Invisible bridge across the gap, so the pointer can travel from the globe down to
   the menu without crossing dead space and closing it. */
.nav-lang-menu::before {
  content: '';
  position: absolute;
  top: -0.6rem;
  left: 0;
  right: 0;
  height: 0.6rem;
}
.nav-lang:hover .nav-lang-menu,
.nav-lang:focus-within .nav-lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-lang-opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border-radius: 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
a.nav-lang-opt:hover {
  background: rgba(24,122,125,0.08);
  color: var(--primary);
}
/* The Arabic option is Arabic text even on the English pages, which do not load the
   Arabic webfonts — fall through to whatever Arabic face the system has. */
.nav-lang-opt[lang="ar"] {
  font-family: 'Tajawal', 'Noto Kufi Arabic', sans-serif;
  letter-spacing: normal;
}
/* The language already being read: marked with a tick, and not a link */
.nav-lang-opt--current {
  color: var(--primary);
  font-weight: 700;
  cursor: default;
}
.nav-lang-opt--current::after {
  content: '\2713';
  margin-inline-start: auto;
  padding-inline-start: 0.6rem;
}

/* Each option keeps its flag — inline SVG rather than emoji, which Windows renders
   as bare "GB"/"QA" letters. */
.nav-lang-opt::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 14px;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
.nav-lang-opt[hreflang="ar"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='14' fill='%238A1538'/%3E%3Cpath d='M0 0H5L8 0.778L5 1.556L8 2.333L5 3.111L8 3.889L5 4.667L8 5.444L5 6.222L8 7.000L5 7.778L8 8.556L5 9.333L8 10.111L5 10.889L8 11.667L5 12.444L8 13.222L5 14.000H0Z' fill='%23fff'/%3E%3C/svg%3E");
}
.nav-lang-opt[hreflang="en"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='c'%3E%3Cpath d='M30,15h30v15zv15h-30zh-30v-15zv-15h30z'/%3E%3C/clipPath%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' clip-path='url%28%23c%29' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0V30M0,15H60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0V30M0,15H60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E");
}

.nav-cta {
  display: inline-block;
  padding: 0.55rem 1.4rem;
  background: var(--primary);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  white-space: nowrap;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.nav-cta:hover {
  background: var(--primary-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(24,122,125,0.25);
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  z-index: 300;
}
.nav-hamburger span {
  display: block;
  width: 100%; height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══ HERO ══ */
.club-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 7rem 2rem 4rem;
}

.club-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(24,122,125,0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 50%, rgba(24,122,125,0.05) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(24,122,125,0.04) 0%, transparent 50%),
    var(--bg);
}
.club-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(24,122,125,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,122,125,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.club-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(250,251,252,0.2) 0%,
    transparent 30%,
    transparent 70%,
    rgba(250,251,252,0.6) 100%
  );
}

.hero-corner {
  position: absolute;
  width: 80px; height: 80px;
  border-color: rgba(24,122,125,0.2);
  border-style: solid;
  z-index: 1;
}
.hero-corner--tl { top: 5rem; left: 3rem; border-width: 2px 0 0 2px; }
.hero-corner--br { bottom: 5rem; right: 3rem; border-width: 0 2px 2px 0; }

.club-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.2rem;
  max-width: 800px;
}

.hero-founded-badge {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(24,122,125,0.06);
  border: 1px solid var(--border);
  padding: 0.4rem 1.2rem;
  animation: fadeUp 0.7s 0.1s both;
  border-radius: 2px;
}
.hero-founded-badge span { color: var(--primary-light); }

.hero-crest {
  width: 160px;
  height: 160px;
  object-fit: contain;
  filter: drop-shadow(0 0 30px rgba(24,122,125,0.15));
  animation: fadeUp 0.7s 0.2s both, floatCrest 6s ease-in-out 1s infinite alternate;
}
@keyframes floatCrest {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}

.hero-club-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.9;
  animation: fadeUp 0.7s 0.3s both;
}
.hero-name-line1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(4.5rem, 12vw, 9rem);
  letter-spacing: 6px;
  color: var(--text);
}
.hero-name-line2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2rem, 5vw, 3.8rem);
  letter-spacing: 10px;
  color: var(--primary);
}

.hero-tagline-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  animation: fadeUp 0.7s 0.4s both;
}
.hero-tagline-line {
  width: 50px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(24,122,125,0.35));
}
.hero-tagline-line:last-child {
  background: linear-gradient(90deg, rgba(24,122,125,0.35), transparent);
}
.hero-tagline {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--grey);
}

.hero-stats-bar {
  display: flex;
  align-items: center;
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 0;
  margin-top: 0.5rem;
  animation: fadeUp 0.7s 0.5s both;
  border-radius: 4px;
  box-shadow: var(--card-shadow);
}
.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.9rem 2rem;
  gap: 0.2rem;
}
.hero-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  color: var(--primary);
  letter-spacing: 2px;
  line-height: 1;
}
.hero-stat-lbl {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--grey);
}
.hero-stat-sep {
  width: 1px;
  height: 40px;
  background: var(--border);
}

.hero-scroll-cue {
  position: relative;
  z-index: 2;
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--grey);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  transition: color 0.2s;
  animation: fadeUp 0.7s 0.7s both;
}
.hero-scroll-cue:hover { color: var(--primary); }
.scroll-arrow {
  font-size: 1.2rem;
  animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ══ SHARED SECTION STYLES ══ */
.section-intro {
  text-align: center;
  padding: 5rem 2rem 3.5rem;
  max-width: 700px;
  margin: 0 auto;
}
.section-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}
.section-eyebrow::before,
.section-eyebrow::after {
  content: '';
  display: block;
  width: 24px; height: 1px;
  background: var(--primary);
  opacity: 0.4;
}
.section-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  letter-spacing: 3px;
  margin-bottom: 1rem;
  line-height: 1;
  color: var(--text);
}
.section-sub {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--text-secondary);
}

/* ══ TIMELINE ══ */
.timeline-section {
  padding: 0 3rem 6rem;
  max-width: 1200px;
  margin: 0 auto;
}
.timeline {
  position: relative;
  padding: 2rem 0;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(24,122,125,0.2) 8%,
    rgba(24,122,125,0.2) 92%,
    transparent 100%
  );
}

.timeline-item {
  display: flex;
  justify-content: flex-end;
  padding-right: calc(50% + 2.5rem);
  margin-bottom: 3rem;
  position: relative;
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s, transform 0.6s;
}
.timeline-item[data-side="right"] {
  justify-content: flex-start;
  padding-right: 0;
  padding-left: calc(50% + 2.5rem);
  transform: translateX(30px);
}
.timeline-item.visible {
  opacity: 1;
  transform: translateX(0);
}

.timeline-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 1.6rem 1.8rem;
  max-width: 440px;
  width: 100%;
  position: relative;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  border-radius: 4px;
  box-shadow: var(--card-shadow);
}
.timeline-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
}
.timeline-card--current {
  border-color: var(--border-hover);
  background: rgba(24,122,125,0.03);
}
.timeline-card--current::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), transparent);
}

.timeline-card-year {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 3px;
  color: var(--primary);
  margin-bottom: 0.5rem;
}
.timeline-card-icon {
  display: flex;
  align-items: center;
  margin-bottom: 0.8rem;
}
.timeline-card-icon svg {
  width: 28px;
  height: 28px;
  color: #187A7D;
  flex-shrink: 0;
}
.timeline-card-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  color: var(--text);
}
.timeline-card-body {
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}
.timeline-card-tag {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  background: rgba(24,122,125,0.06);
  border: 1px solid var(--border);
  color: var(--primary);
  border-radius: 2px;
}
.timeline-card-tag--pos { color: #16a34a; background: rgba(22,163,74,0.06); border-color: rgba(22,163,74,0.2); }
.timeline-card-tag--warn { color: #d97706; background: rgba(217,119,6,0.06); border-color: rgba(217,119,6,0.2); }
.timeline-card-tag--current { color: var(--primary); background: rgba(24,122,125,0.08); border-color: var(--border-hover); }

.live-badge {
  display: inline-block;
  font-size: 0.55rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
  background: #e74c3c;
  color: #fff;
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
  animation: pulse-red 2s infinite;
  vertical-align: middle;
}
@keyframes pulse-red {
  0%,100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.timeline-node {
  position: absolute;
  top: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg2);
  border: 2px solid rgba(24,122,125,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.timeline-node-inner {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.5;
}
.timeline-node--current {
  border-color: var(--primary);
  box-shadow: 0 0 12px rgba(24,122,125,0.2);
}
.timeline-node--current .timeline-node-inner {
  opacity: 1;
  animation: pulse-node 2s infinite;
}
@keyframes pulse-node {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.4); }
}

/* ══ IDENTITY ══ */
.identity-section {
  background: var(--bg3);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-bottom: 5rem;
}
.identity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 3rem;
}
.identity-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 2rem 2.2rem;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s, transform 0.6s, border-color 0.3s, box-shadow 0.3s;
  border-radius: 4px;
  box-shadow: var(--card-shadow);
}
.identity-card.visible { opacity: 1; transform: translateY(0); }
.identity-card:hover { border-color: var(--border-hover); box-shadow: var(--card-shadow-hover); }
.identity-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.identity-card:hover::before { opacity: 1; }
.identity-card--wide { grid-column: 1 / -1; }
.identity-card--philosophy { grid-column: 1 / -1; }

.identity-card-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
}
.identity-icon { font-size: 1.2rem; color: var(--primary); line-height: 1; }
.identity-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--primary);
}
.identity-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 0.9rem;
  line-height: 1.25;
  color: var(--text);
}
.identity-body {
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--text-secondary);
}

.values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-top: 0.5rem;
}
.value-item { display: flex; gap: 1rem; align-items: flex-start; }
.value-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  color: rgba(24,122,125,0.2);
  line-height: 1;
  flex-shrink: 0;
  padding-top: 0.1rem;
}
.value-item strong {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text);
  margin-bottom: 0.25rem;
}
.value-item p {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.philosophy-pillars {
  display: flex;
  align-items: flex-end;
  gap: 1.2rem;
  height: 80px;
  margin-top: 1.4rem;
  padding-top: 0.5rem;
}
.phil-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}
.phil-bar {
  width: 100%;
  height: var(--h);
  background: linear-gradient(0deg, var(--primary) 0%, rgba(24,122,125,0.2) 100%);
  border-top: 2px solid var(--primary);
  position: relative;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 2px 2px 0 0;
}
.identity-card.visible .phil-bar { transform: scaleY(1); }
.phil-pillar span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--grey);
  text-align: center;
}

/* ══ MANAGEMENT ══ */
/* The top two rows are pairs of equal cards. --card-w and --pair-gap set both the
   cards and the connector shapes between rows, so the lines always land on the
   middle of each card. */
.management-section { padding-bottom: 6rem; --card-w: 330px; --pair-gap: 2rem; }
.mgmt-tier {
  display: flex;
  justify-content: center;
  position: relative;
}
.mgmt-pair { gap: var(--pair-gap); }
.mgmt-pair > .mgmt-card {
  width: var(--card-w);
  display: grid;
  grid-template-columns: 120px 1fr;
}
.mgmt-branch-line {
  width: 80%;
  max-width: 900px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(24,122,125,0.15) 15%, rgba(24,122,125,0.15) 85%, transparent 100%);
  margin: 0 auto;
  position: relative;
}
.mgmt-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: default;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s, transform 0.6s, border-color 0.3s, box-shadow 0.3s;
  border-radius: 4px;
  box-shadow: var(--card-shadow);
}
.mgmt-card.visible { opacity: 1; transform: translateY(0); }
.mgmt-card:hover { border-color: var(--border-hover); transform: translateY(-4px); box-shadow: var(--card-shadow-hover); }
.mgmt-card--president::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), rgba(24,122,125,0.1));
}
.mgmt-card-img-wrap {
  position: relative;
  overflow: hidden;
  background: var(--bg3);
}
.mgmt-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.4s;
}
.mgmt-card:hover .mgmt-card-img-wrap img { transform: scale(1.04); }
.mgmt-card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(24,122,125,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.mgmt-card-body {
  padding: 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
}
.mgmt-role-badge {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(24,122,125,0.06);
  border: 1px solid var(--border);
  padding: 0.2rem 0.6rem;
  width: fit-content;
  margin-bottom: 0.3rem;
  border-radius: 2px;
}
.mgmt-role-badge--dept { font-size: 0.58rem; letter-spacing: 2px; padding: 0.15rem 0.5rem; }
.mgmt-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.2;
  color: var(--text);
}
.mgmt-name--sm { font-size: 0.95rem; }
/* Connectors between rows, spanning from the middle of one paired card to the middle
   of the other. A join is "╰─┬─╯": both cards above feed one stem. A split is
   "╭─┴─╮": one stem feeds both cards below. Stacked, they say the two rows report
   to each other as a whole rather than card to card. */
.mgmt-link {
  --line: 2px solid rgba(24,122,125,0.18);
  position: relative;
  width: calc(var(--card-w) + var(--pair-gap));
  height: 1.25rem;
  margin: 0 auto;
}
.mgmt-link::before,
.mgmt-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 50%;
}
.mgmt-link--join::before { top: 0; border: var(--line); border-top: 0; }
.mgmt-link--join::after  { bottom: 0; left: 50%; right: auto; border-left: var(--line); }
.mgmt-link--split::before { top: 0; left: 50%; right: auto; border-left: var(--line); }
.mgmt-link--split::after  { bottom: 0; border: var(--line); border-bottom: 0; }
.mgmt-tier--managers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 3rem;
}
.mgmt-card--manager {
  display: grid;
  grid-template-columns: 80px 1fr;
  min-height: 100px;
}
.mgmt-card-img-wrap--sm { min-height: 90px; }

/* ══ FOOTER ══ */
footer {
  background: var(--primary-dark);
  border-top: 1px solid rgba(24,122,125,0.1);
  padding: 2rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-logo { display: flex; align-items: center; gap: 0.8rem; }
.footer-logo img { height: 40px; }
.footer-club { font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; color: rgba(255,255,255,0.9); letter-spacing: 2px; }
.footer-copy { font-size: 0.75rem; color: rgba(255,255,255,0.55); }

/* ══ ANIMATIONS ══ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══ RESPONSIVE — TABLET ══ */
@media (max-width: 1024px) {
  nav { padding: 0 1.5rem; }
  .nav-links { gap: 1.2rem; }
  .nav-links a { font-size: 0.95rem; }
  .hero-corner { display: none; }
  .hero-stats-bar { flex-wrap: wrap; }
  .hero-stat { padding: 0.7rem 1.2rem; }
  .timeline-section { padding: 0 1.5rem 5rem; }
  .identity-grid { padding: 0 1.5rem; gap: 1.2rem; }
  .management-section { --card-w: 290px; }
  .mgmt-pair > .mgmt-card { grid-template-columns: 100px 1fr; }
  .mgmt-tier--managers { padding: 0 1.5rem; grid-template-columns: repeat(3, 1fr); }
  footer { padding: 1.5rem; }
}

/* ══ RESPONSIVE — MOBILE ══ */
@media (max-width: 768px) {
  nav { padding: 0 1rem; height: 76px; }
  .nav-logo img { height: 60px; width: 60px; }
  .nav-club-name { font-size: 1.1rem; }
  .nav-hamburger { display: flex; }
  .nav-cta { display: none; }
  .nav-cta-li { display: block; padding: 1rem 1.5rem 0; }
  .nav-cta-li a {
    background: var(--primary);
    color: #fff;
    padding: 0.75rem;
    border-bottom: none;
    border-radius: 2px;
    font-size: 0.85rem;
    letter-spacing: 2.5px;
  }
  .nav-cta-li a:hover { background: var(--primary-light); color: #fff; }
  /* The CTA drops into the drawer on mobile, so the pill keeps its place in the
     bar, grouped against the hamburger. */
  .nav-actions {
    margin-inline-start: auto;
    margin-inline-end: 0.9rem;
  }
  .nav-links {
    display: none;
    position: fixed;
    top: 76px; left: 0; right: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(16px);
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 0 2rem;
    gap: 0;
    border-bottom: 1px solid var(--border);
    z-index: 150;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; text-align: center; }
  .nav-links a {
    display: block;
    padding: 0.9rem 0;
    font-size: 1rem;
    letter-spacing: 3px;
    border-bottom: 1px solid rgba(24,122,125,0.06);
    opacity: 1;
    color: var(--text);
  }
  .nav-links a:hover { color: var(--primary); background: rgba(24,122,125,0.04); }
  .nav-links .nav-cta-li a {
    color: #fff;
    background: var(--primary);
    border-bottom: none;
  }
  .nav-links .nav-cta-li a:hover {
    color: #fff;
    background: var(--primary-light);
  }
  .club-hero { padding: 5rem 1rem 3rem; min-height: 85vh; }
  .hero-crest { width: 110px; height: 110px; }
  .hero-name-line1 { font-size: clamp(3rem, 14vw, 5rem); }
  .hero-name-line2 { font-size: clamp(1.3rem, 6vw, 2.2rem); letter-spacing: 6px; }
  .hero-stats-bar { width: 100%; justify-content: center; }
  .hero-stat { padding: 0.6rem 1rem; }
  .hero-stat-num { font-size: 1.3rem; }
  .section-intro { padding: 3.5rem 1.2rem 2.5rem; }
  .timeline-section { padding: 0 1rem 4rem; }
  .timeline::before { left: 1rem; }
  .timeline-item,
  .timeline-item[data-side="right"] {
    padding-right: 0;
    padding-left: 3rem;
    justify-content: flex-start;
    transform: translateX(-20px);
  }
  .timeline-item[data-side="right"] { transform: translateX(20px); }
  .timeline-item.visible { transform: translateX(0); }
  .timeline-card { max-width: 100%; }
  .timeline-node { left: 1rem; top: 1.4rem; }
  .identity-grid { grid-template-columns: 1fr; padding: 0 1rem; }
  .identity-card--wide, .identity-card--philosophy { grid-column: 1; }
  .values-grid { grid-template-columns: 1fr; }
  .philosophy-pillars { height: 60px; }
  /* Too narrow for pairs side by side: each pair stacks, and the connectors become
     a plain vertical line, since there are no longer two cards abreast to span. */
  .mgmt-pair { flex-direction: column; align-items: center; gap: 1rem; padding: 0 1rem; }
  .mgmt-pair > .mgmt-card { width: 100%; max-width: 340px; }
  .mgmt-link { width: 0; height: 2rem; }
  .mgmt-link::before { display: none; }
  .mgmt-link::after { top: 0; bottom: 0; left: 0; height: auto; border: 0; border-left: var(--line); }
  .mgmt-link--join + .mgmt-link--split { display: none; }
  .mgmt-tier--managers { grid-template-columns: 1fr 1fr; padding: 0 1rem; gap: 0.8rem; }
  .mgmt-branch-line { width: 60%; }
  footer {
    flex-direction: column;
    gap: 0.8rem;
    text-align: center;
    padding: 1.5rem 1rem;
  }
}

/* ══ RESPONSIVE — SMALL MOBILE ══ */
@media (max-width: 480px) {
  .club-hero { padding: 4.5rem 0.8rem 2.5rem; }
  .hero-crest { width: 90px; height: 90px; }
  .hero-tagline-wrap { gap: 0.5rem; }
  .hero-tagline-line { width: 25px; }
  .hero-stats-bar { flex-direction: column; gap: 0; width: 100%; }
  .hero-stat-sep { width: 80%; height: 1px; }
  .hero-stat { width: 100%; flex-direction: row; justify-content: space-between; padding: 0.5rem 1.2rem; }
  .timeline-section { padding: 0 0.8rem 3rem; }
  .timeline-card { padding: 1.2rem; }
  .timeline-card-title { font-size: 1rem; }
  .identity-grid { padding: 0 0.8rem; }
  .identity-card { padding: 1.4rem; }
  .values-grid { gap: 0.8rem; }
  .mgmt-tier--managers { grid-template-columns: 1fr; padding: 0 0.8rem; }
  .mgmt-card--manager { grid-template-columns: 70px 1fr; }
  .mgmt-branch-line { display: none; }
  footer { padding: 1rem 0.8rem; }
  .footer-copy { font-size: 0.65rem; }
}