/* =========================================================
   SportTeam — hub landing page
   ========================================================= */
:root {
  --garage: #22b85a;
  --garage-dark: #0a4d25;
  --thouk: #2f7df0;
  --thouk-dark: #12346e;
}

.hub { min-height: 100vh; display: flex; flex-direction: column; background: var(--ink-900); color: #eaf2ed; }

/* Top */
.hub__top { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.hub__brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-head); }
.hub__brand-logo { height: 40px; width: auto; display: block; }
.hub__logo { height: clamp(96px, 17vw, 200px); width: auto; display: inline-block; filter: drop-shadow(0 10px 30px rgba(0,0,0,.4)); }
.hub__brand-mark { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, var(--garage), var(--thouk)); box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.hub__brand-mark svg { width: 26px; height: 26px; fill: #fff; }
.hub__brand-text strong { display: block; font-size: 1.3rem; font-weight: 900; letter-spacing: .01em; line-height: 1; }
.hub__brand-text small { font-size: .64rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--slate-400); }
.hub__top-links { display: flex; gap: 22px; align-items: center; font-family: var(--font-head); font-weight: 700; font-size: .92rem; }
.hub__top-links a { color: #cdd9d2; transition: color .2s; }
.hub__top-links a:hover { color: #fff; }

/* Hero */
.hub__hero { text-align: center; padding: clamp(40px, 8vw, 90px) 0 clamp(30px, 5vw, 56px); }
.hub__eyebrow { display: inline-block; font-family: var(--font-head); font-weight: 800; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--garage); margin-bottom: 18px; }
.hub__title { font-family: var(--font-head); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(2.8rem, 9vw, 6rem); line-height: .95; letter-spacing: -.01em; }
.hub__title .g { color: var(--garage); }
.hub__title .t { color: var(--thouk); }
.hub__lead { max-width: 620px; margin: 20px auto 0; color: #a9bcb2; font-size: clamp(1.05rem, 2.2vw, 1.3rem); }

/* Section cards */
.hub__sections { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding-bottom: clamp(50px, 8vw, 90px); }
.sec-card {
  position: relative; border-radius: 22px; overflow: hidden; min-height: 460px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 38px; color: #fff; isolation: isolate;
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .35s var(--ease), box-shadow .35s;
}
.sec-card:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.sec-card__bg { position: absolute; inset: 0; z-index: -2; }
.sec-card__bg img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.sec-card:hover .sec-card__bg img { transform: scale(1.06); }
.sec-card__scrim { position: absolute; inset: 0; z-index: -1; }
.sec-card--garage .sec-card__scrim { background: linear-gradient(to top, rgba(6,40,20,.96) 8%, rgba(6,40,20,.5) 55%, rgba(10,77,37,.25) 100%); }
.sec-card--thouk .sec-card__scrim { background: linear-gradient(to top, rgba(8,22,50,.96) 8%, rgba(8,22,50,.5) 55%, rgba(18,52,110,.3) 100%); }

.sec-card__logo { position: absolute; top: 24px; right: 24px; height: 56px; width: auto; z-index: 2; filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); }
.sec-card__logo--round { height: 54px; width: 54px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); object-fit: cover; }

.sec-card__tag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-family: var(--font-head); font-weight: 800; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; margin-bottom: auto; }
.sec-card--garage .sec-card__tag { background: var(--garage); color: #04280f; }
.sec-card--thouk .sec-card__tag { background: var(--thouk); color: #fff; }
.sec-card h2 { font-family: var(--font-head); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1; margin: 24px 0 10px; }
.sec-card p { color: #d7e2dc; margin-bottom: 22px; max-width: 42ch; }
.sec-card__list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.sec-card__list span { font-size: .82rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.12); backdrop-filter: blur(4px); }
.sec-card__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.sec-card .btn--enter { background: #fff; }
.sec-card--garage .btn--enter { color: var(--garage-dark); }
.sec-card--thouk .btn--enter { color: var(--thouk-dark); }
.sec-card .btn--enter:hover { background: #eef4f0; }
.sec-card .btn--ghost2 { background: rgba(255,255,255,.1); color: #fff; border: 2px solid rgba(255,255,255,.5); }
.sec-card .btn--ghost2:hover { background: rgba(255,255,255,.2); border-color: #fff; }

/* Clickable-card enter hint */
.sec-card__enter { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-family: var(--font-head); font-weight: 800; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; color: #fff; padding: 11px 22px; border-radius: 999px; background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.5); backdrop-filter: blur(4px); transition: background .25s, gap .25s; }
.sec-card__enter svg { width: 20px; height: 20px; fill: currentColor; transition: transform .25s var(--ease); }
.sec-card:hover .sec-card__enter { background: #fff; color: var(--ink-900); border-color: #fff; }
.sec-card:hover .sec-card__enter svg { transform: translateX(4px); }

/* Contact */
.hub-contact { padding: clamp(40px, 7vw, 80px) 0 clamp(30px, 5vw, 60px); }
.hub-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.hub__eyebrow--contact { color: var(--garage); }
.hub-contact__title { font-family: var(--font-head); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1; }
.hub-contact__lead { color: #a9bcb2; margin: 12px 0 26px; max-width: 46ch; }
.hub-contact__list { display: grid; gap: 16px; margin-bottom: 28px; }
.hub-contact__list li { display: flex; align-items: center; gap: 14px; }
.hub-contact__ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.07); display: grid; place-items: center; }
.hub-contact__ico svg { width: 20px; height: 20px; fill: var(--garage); }
.hub-contact__list a { color: #dce7e1; font-weight: 600; transition: color .2s; }
.hub-contact__list a:hover { color: #fff; }
.hub-contact__cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hub-contact__call { background: #fff; color: var(--garage-dark); }
.hub-contact__call:hover { background: var(--cream); }
.hub-contact__social { display: flex; gap: 12px; }
.hub-contact__social a { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.08); transition: background .2s, transform .2s; }
.hub-contact__social a svg { width: 22px; height: 22px; fill: #fff; }
.hub-contact__social a:hover { background: var(--garage); transform: translateY(-3px); }
.hub-contact__map { border-radius: 20px; overflow: hidden; min-height: 340px; height: 100%; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.08); }
.hub-contact__map iframe { display: block; min-height: 340px; }

/* Footer */
.hub__footer { margin-top: auto; border-top: 1px solid rgba(255,255,255,.08); padding: 26px 0; color: var(--slate-400); font-size: .88rem; }
.hub__footer-inner { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.hub__footer a { color: var(--slate-400); transition: color .2s; }
.hub__footer a:hover { color: #fff; }

@media (max-width: 820px) {
  .hub__sections { grid-template-columns: 1fr; }
  .sec-card { min-height: 400px; padding: 30px; }
  .hub__top-links { gap: 14px; font-size: .82rem; }
  .hub-contact__grid { grid-template-columns: 1fr; }
  .hub-contact__map { min-height: 300px; order: -1; }
}
@media (max-width: 480px) {
  .hub__top-links a.hub__hide-sm { display: none; }
  .sec-card__actions .btn { flex: 1; }
}