/*
V7-HEADER
Title: Buktika - Teams Page Styles
Filename: assets/css/teams/teams.css
Version: v1.5.2
Issued: 2026-07-17
Owner: Buktika - Binka
Purpose: Main styles for teams.html.
ChangeLog:
  v1.5.2 (2026-07-17): Scope unclassed-link colours to main content so the shared
                        footer retains its own dark-surface link palette.
*/

.page-teams {
  --page-bg:            var(--sdx-color-teams-bg);
  --page-primary:       var(--sdx-color-mama-amber);
  --page-secondary:     var(--sdx-color-green-deep);
  --page-accent:        var(--sdx-color-stem-olive);
  --page-depth:         var(--sdx-color-stem-olive);
  --page-dark-base:     var(--sdx-color-livingtower-dark-base);
  --page-dark-surface:  var(--sdx-color-livingtower-dark-surface);
  --hero:         url('/assets/images/teams/teams-hero.webp');
  --hero-vignette-from: rgba(70, 72, 32, 0.20);
  --hero-vignette-to:   rgba(70, 72, 32, 0);
  background: var(--page-bg);
  color: var(--fg);
}

.page-teams .container {
  max-width: 1200px;
  margin: 0 auto;
}

.page-teams .hero-wrap {
  background-image:    var(--hero);
  background-size:     cover;
  background-position: center 40%;
  min-height:          var(--hero-min);
}

.page-teams .hero-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--hero-vignette-from) 0%,
    var(--hero-vignette-to) 32%
  );
  pointer-events: none;
}

.page-teams .hero {
  min-height: var(--hero-min);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem;
}

.page-teams .hero-body {
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
}

.page-teams .headline {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  margin: 0 0 1.5rem;
}

.page-teams .hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

.page-teams .btn-hero-primary,
.page-teams .btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.75rem;
  font-family: var(--text-font);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  min-height: 3rem;
  cursor: pointer;
  transition: filter 0.28s ease, box-shadow 0.28s ease;
}

body.page-teams .btn-hero-primary {
  background: linear-gradient(135deg, var(--sdx-color-mama-amber) 0%, var(--sdx-color-stem-olive) 100%);
  color: var(--sdx-color-white);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.80),
              0 4px 20px rgba(70, 72, 32, 0.45);
}
body.page-teams .btn-hero-primary:hover {
  filter: brightness(1.08);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.80),
              0 8px 28px rgba(70, 72, 32, 0.55);
}

body.page-teams .btn-hero-secondary {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--sdx-color-white);
  border: 1.5px solid rgba(255, 255, 255, 0.60);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.page-teams .sdx-card-section > h2 {
  margin-bottom: 1.5rem;
}

.page-teams main a:not([class]) {
  color: var(--page-secondary);
}

.page-teams main a:not([class]):hover {
  filter: brightness(0.85);
}

.page-teams .slider-bar {
  margin-bottom: 1.5rem;
}

.page-teams .slider-bar-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.page-teams .slider-bar-text h2 {
  color: var(--fg);
  margin: 0 0 0.375rem;
}

.page-teams .slider-bar-text .helper {
  color: var(--muted);
  font-size: var(--small);
  margin: 0;
}

.page-teams .slider-bar-cta {
  flex-shrink: 0;
  align-self: center;
  font-size: var(--small);
  color: var(--page-accent);
  border: 1.5px solid var(--page-accent);
  border-radius: var(--radius);
  padding: 0.375rem 0.875rem;
  background: transparent;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.page-teams .slider-bar-cta:hover,
.page-teams .slider-bar-cta:focus {
  color: var(--page-depth);
}

.page-teams .sdx-cta-band .sdx-btn-primary {
  background: linear-gradient(135deg, var(--sdx-color-mama-amber) 0%, var(--sdx-color-stem-olive) 100%);
  color: var(--sdx-color-white);
  box-shadow: 0 4px 16px rgba(245, 176, 20, 0.24);
}

.page-teams .teams-intro .section-intro {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 600;
  color: var(--page-secondary);
  text-align: center;
}

.page-teams {
  --strip-line:       var(--page-primary);
  --strip-arrow-mask: var(--card);
}

@media (min-width: 2560px)                         { .page-teams .hero-wrap, .page-teams .hero { min-height: 1150px; } }
@media (min-width: 1920px) and (max-width: 2559px) { .page-teams .hero-wrap, .page-teams .hero { min-height: 1000px; } }
@media (min-width: 1680px) and (max-width: 1919px) { .page-teams .hero-wrap, .page-teams .hero { min-height: 750px;  } }
@media (min-width: 1280px) and (max-width: 1439px) { .page-teams .hero-wrap, .page-teams .hero { min-height: 650px;  } }
@media (min-width: 968px)  and (max-width: 1279px) { .page-teams .hero-wrap, .page-teams .hero { min-height: 580px;  } }
@media (min-width: 768px)  and (max-width:  967px) { .page-teams .hero-wrap, .page-teams .hero { min-height: 520px;  } }
@media (min-width: 641px)  and (max-width:  767px) { .page-teams .hero-wrap, .page-teams .hero { min-height: 500px;  } }

@media (max-width: 640px) {
  .page-teams .hero-wrap,
  .page-teams .hero { min-height: 480px; }

  .page-teams .hero { padding: 3rem 1.5rem; }
}

@media (max-width: 480px) {
  .page-teams .hero-wrap,
  .page-teams .hero { min-height: 440px; }

  .page-teams .hero { padding: 3rem 1.25rem; }

  .page-teams .hero-actions {
    flex-direction: column;
  }

  .page-teams .hero-actions a,
  .page-teams .hero-actions .btn-hero-primary,
  .page-teams .hero-actions .btn-hero-secondary {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .page-teams .slider-bar-content {
    flex-direction: column;
    gap: 0.75rem;
  }

  .page-teams .slider-bar-cta {
    align-self: flex-start;
  }
}

[data-theme="dark"] .page-teams {
  background: var(--sdx-color-slate-dark);
  color: var(--sdx-color-ui-dark-text);
}

[data-theme="dark"] .page-teams main a:not([class]) {
  color: var(--page-primary);
}

[data-theme="dark"] .page-teams .slider-bar-text .helper {
  color: var(--muted);
}

[data-theme="dark"] .page-teams .slider-bar-cta {
  color: var(--page-primary);
  border-color: var(--page-primary);
}

[data-theme="dark"] .page-teams .slider-bar-cta:hover,
[data-theme="dark"] .page-teams .slider-bar-cta:focus {
  color: var(--fg);
  background: rgba(from var(--page-primary) r g b / 0.08);
}

[data-theme="dark"] .page-teams .teams-intro .section-intro {
  color: var(--fg);
}