/*
V7-HEADER
* Title:    Buktika - Teams Council Shell Styles
* Filename: assets/css/teams/teams-council.css
* Version:  v1.8.2
* Issued:   2026-04-04
* Author:   Buktika Webdesk (Binka)
* Owner:    Buktika — Binka
* Purpose:  Shell styles for teams-council.html.
*           This file owns shared council-shell binding, hero geometry,
*           council switcher chrome, CTA styling, and dark shell surfaces.
*           Grid/card layout, lightbox styling, and council-domain overrides
*           are split into explicit Teams partial CSS files.
* Type:     CSS stylesheet
* PIL:      BKT-PIL-11 Teams v1.0.0
* Colour Map:    v3.14.x (PIL-11 §2 locked palette)
* Design System: v4.0.0
* ISO Reference: ISO 27001, ISO 9241-110
* Source Naming Standard: Buktika v7.1 (ISO Aligned)
* License:  © Buktika, 2026. All rights reserved.
* ChangeLog:
*   v1.8.2 (2026-04-04): Council switcher hover/focus now follows readable nav treatment.
*           Removed underline state and amber-on-white text shift. Hover uses subtle
*           Teams-tinted surface with structural text colour in both themes.
*   v1.8.0 (2026-04-03): Shell file reduced and split per BKT-DOC-www-B §B.1.
*           Grid/card rules moved to teams-council-grid.css.
*           Lightbox rules moved to teams-council-lightbox.css.
*           Council-domain overrides moved to management / axis / nova / iris partial CSS files.
*   v1.7.0 (2026-04-03): Re-scoped the council shell back to .page-teams-council.
*/

/* 0) Header and dependency notes
   depends on: global.css, themes.css, partials/footer.css,
   teams-council-grid.css, teams-council-lightbox.css,
   teams-council-management.css, teams-council-axis.css,
   teams-council-nova.css, teams-council-iris.css */

/* ======================================================================================================
   1) Page variable binding
   ====================================================================================================== */

.page-teams-council {
  --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-image:         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);
  scroll-behavior: smooth;
}

/* ======================================================================================================
   2) Hero
   ====================================================================================================== */

.page-teams-council .hero-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: var(--hero-min);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--text-font);
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  background-image: var(--hero-image);
}

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

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

.page-teams-council .hero-content {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  text-align: center;
  padding: 0 1.5rem;
  max-width: 52rem;
}

.page-teams-council .headline {
  font-size: clamp(2.5rem, 5vw, 4rem);
}

/* PIL-11 §4: Teams tagline is universal mama-amber, not page-secondary green-deep. */
.page-teams-council .tagline {
  color: var(--sdx-color-mama-amber);
}

@media (min-width: 2560px)                         { .page-teams-council { --hero-min: 1100px; } }
@media (min-width: 1920px) and (max-width: 2559px) { .page-teams-council { --hero-min: 1000px; } }
@media (min-width: 1680px) and (max-width: 1919px) { .page-teams-council { --hero-min: 920px; } }
@media (min-width: 1280px) and (max-width: 1679px) { .page-teams-council { --hero-min: 860px; } }
@media (min-width: 968px)  and (max-width: 1279px) { .page-teams-council { --hero-min: 760px; } }
@media (min-width: 768px)  and (max-width:  967px) { .page-teams-council { --hero-min: 640px; } }
@media (min-width: 641px)  and (max-width:  767px) { .page-teams-council { --hero-min: 520px; } }
@media (max-width: 640px)                          { .page-teams-council { --hero-min: 420px; } }
@media (max-width: 480px) {
  .page-teams-council { --hero-min: 420px; }

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

/* ======================================================================================================
   3) Buttons and CTAs
   ====================================================================================================== */

.page-teams-council .council-switcher {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.625rem 1.5rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.page-teams-council .council-switcher ol {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.page-teams-council .council-switcher li a {
  display: inline-block;
  padding: 0.375rem 0.625rem;
  border-radius: 0.625rem;
  font-size: var(--small);
  font-weight: 400;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.18s ease, background 0.18s ease, outline-color 0.18s ease;
}

.page-teams-council .council-switcher li a:hover,
.page-teams-council .council-switcher li a:focus-visible {
  color: var(--fg);
  background: rgba(from var(--page-primary) r g b / 0.08);
}

.page-teams-council .council-switcher li a:focus-visible {
  outline: 0.125rem solid rgba(from var(--page-primary) r g b / 0.32);
  outline-offset: 0.125rem;
}

.page-teams-council .council-switcher li a.is-active {
  font-weight: 700;
  color: var(--fg);
  cursor: default;
  pointer-events: none;
}

.page-teams-council .council-switcher li::after {
  content: '/';
  margin-left: 2rem;
  color: var(--muted);
  font-size: var(--small);
  pointer-events: none;
}

.page-teams-council .council-switcher li:last-child::after {
  content: none;
}

@media (max-width: 600px) {
  .page-teams-council .council-switcher ol { gap: 0.5rem; }
  .page-teams-council .council-switcher li::after { margin-left: 0.5rem; }
}

@media (min-width: 601px) {
  .page-teams-council .council-switcher li a,
  .page-teams-council .council-switcher li::after {
    font-size: var(--body);
  }
}

.page-teams-council .sdx-cta-band .sdx-btn-primary {
  background: linear-gradient(135deg, var(--page-primary) 0%, var(--page-accent) 100%);
  font-size: 1.166rem;
  box-shadow:
    0 4px 14px rgba(245, 176, 20, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.page-teams-council .sdx-cta-band .sdx-btn-primary:hover {
  box-shadow:
    0 10px 30px rgba(245, 176, 20, 0.50),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* ======================================================================================================
   4) Dark mode
   ====================================================================================================== */

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

[data-theme="dark"] .page-teams-council .council-switcher li a:hover,
[data-theme="dark"] .page-teams-council .council-switcher li a:focus-visible {
  color: var(--fg);
  background: rgba(from var(--page-primary) r g b / 0.14);
}

[data-theme="dark"] .page-teams-council .council-switcher li a:focus-visible {
  outline-color: rgba(from var(--page-primary) r g b / 0.40);
}