/* =========================================================
   AAF Card Switcher
   - Desktop: no sticky, no scroll logic
   - First card open by default
   - Hover/focus/click switches active card
   - Mobile: companion first, all cards expanded
========================================================= */

.sf-switcher{
  --stage-h: clamp(560px, 78vh, 860px);
  --radius: clamp(10px, 2.2vh, 24px);
  --gap: clamp(14px, 1.4vw, 24px);
  --pad: clamp(18px, 2vw, 34px);

  --cards-col: 59%;
  --companion-col: 39%;
  --collapsed-h: clamp(72px, 8vh, 120px);

  width: 100%;
  position: relative;
}

.sf-switcher__track{
  position: relative;
}

.sf-switcher__stage{
  width: 100%;
}

.sf-switcher__cols{
  width: 100%;
  display: grid;
  grid-template-columns: var(--cards-col) var(--companion-col);
  grid-template-areas: "cards companion";
  gap: clamp(18px, 2vw, 36px);
  align-items: stretch;
  min-height: var(--stage-h);
}

.sf-switcher__col--cards{
  grid-area: cards;
  min-width: 0;
}

.sf-switcher__col--companion{
  grid-area: companion;
  min-width: 0;
}

.sf-switcher[data-layout="cards_right"] .sf-switcher__cols{
  grid-template-columns: var(--companion-col) var(--cards-col);
  grid-template-areas: "companion cards";
}

.sf-switcher__col{
  min-height: 0;
}

/* =========================
   COMPANION
========================= */

.sf-switcher__companion{
  height: 100%;
  min-height: var(--stage-h);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}

.sf-switcher[data-variant="image"] .sf-switcher__companion img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sf-switcher[data-variant="text"] .sf-switcher__companion{
  padding: 0;
  overflow: visible;
  min-height: 0;
}

.sf-switcher__companion-title{
  margin: 0 0 16px 0;
}

.sf-switcher__companion-stage{
  height: 100%;
  min-height: var(--stage-h);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}

.sf-switcher__companion-stage > svg,
.sf-switcher__companion-stage svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* =========================
   CARDS
========================= */

.sf-switcher__cards{
  height: 100%;
  min-height: var(--stage-h);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.sf-switcher__card{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  flex: 0 0 auto;
  height: var(--collapsed-h);
  min-height: 0;
  transition:
    height .28s ease,
    flex-basis .28s ease,
    background-color .2s ease,
    color .2s ease,
    transform .2s ease;
}

.sf-switcher__card,
.sf-switcher__card *{
  text-align: left;
}

.sf-switcher__card:not(.is-active){
  display: flex;
  align-items: center;
  cursor: pointer;
}

.sf-switcher__card-title{
  margin: 0;
  padding: 0 clamp(18px, 2vw, 30px);
  width: 100%;
}

.sf-switcher__card:not(.is-active) .sf-switcher__card-inner{
  display: none;
}

.sf-switcher__card.is-active{
  flex: 1 1 auto;
  height: auto;
  display: flex;
  flex-direction: column;
}

.sf-switcher__card.is-active .sf-switcher__card-title{
  padding: var(--pad);
  padding-bottom: 0;
  flex: 0 0 auto;
}

.sf-switcher__card-inner{
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 60% 40%;
  align-items: stretch;
}

.sf-switcher__card-content{
  padding: var(--pad);
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.sf-switcher__card-body{
  margin-top: clamp(12px, 1.3vw, 20px);
  min-height: 0;
  overflow: hidden;
}

.sf-switcher__card-body p:last-child{
  margin-bottom: 0;
}

.sf-switcher__card-media{
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
}

.sf-switcher__card-media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  display: block;
}

/* =========================
   ACCENTS
========================= */

.sf-switcher__card[data-accent="red"]{ --accent: var(--aaf-red); }
.sf-switcher__card[data-accent="grass_green"]{ --accent: var(--aaf-grass-green); }
.sf-switcher__card[data-accent="light_blue"]{ --accent: var(--aaf-light-blue); }
.sf-switcher__card[data-accent="sky_blue"]{ --accent: var(--aaf-sky-blue); }
.sf-switcher__card[data-accent="ocean_blue"]{ --accent: var(--aaf-ocean-blue); }
.sf-switcher__card[data-accent="royal_purple"]{ --accent: var(--aaf-royal-purple); }
.sf-switcher__card[data-accent="sunlight_yellow"]{ --accent: var(--aaf-sunlight-yellow); }
.sf-switcher__card[data-accent="tangy_orange"]{ --accent: var(--aaf-tangy-orange); }

.sf-switcher[data-closed="white"] .sf-switcher__card{
  background: #fff;
  color: #000;
}

.sf-switcher[data-closed="white"] .sf-switcher__card.is-active{
  background: var(--accent, #000);
  color: #fff;
}

.sf-switcher[data-closed="accent"] .sf-switcher__card{
  background: var(--accent, #000);
  color: #fff;
}

.sf-switcher[data-closed="white"] .sf-switcher__card:not(.is-active) .sf-switcher__card-title{
  color: #000 !important;
}

.sf-switcher[data-closed="accent"] .sf-switcher__card:not(.is-active) .sf-switcher__card-title{
  color: #fff !important;
}

.sf-switcher__card.is-active .sf-switcher__card-title{
  color: #fff !important;
}

/* =========================
   ACCESSIBILITY / INTERACTION
========================= */

.sf-switcher__card:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 780px){

  .sf-switcher__cols,
  .sf-switcher[data-layout] .sf-switcher__cols{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "companion"
      "cards" !important;
    min-height: 0;
  }

  .sf-switcher__companion{
    min-height: 0;
    height: auto;
  }

  .sf-switcher[data-variant="image"] .sf-switcher__companion img{
    height: auto;
    object-fit: contain;
  }

  .sf-switcher__companion-stage{
    min-height: 0;
    height: auto;
  }

  .sf-switcher__cards{
    min-height: 0;
    height: auto;
  }

  .sf-switcher__card{
    height: auto !important;
    flex: none !important;
    display: block !important;
    transform: none !important;
  }

  .sf-switcher__card-title{
    padding: var(--pad);
    padding-bottom: 0;
  }

  .sf-switcher__card-inner,
  .sf-switcher__card:not(.is-active) .sf-switcher__card-inner{
    display: block !important;
    position: relative;
  }

  .sf-switcher__card-content{
    padding: var(--pad);
    padding-top: clamp(12px, 1.5vh, 20px);
    padding-bottom: clamp(150px, 24vh, 240px);
  }

  .sf-switcher__card-body{
    overflow: visible;
  }

  .sf-switcher__card-media{
    position: absolute;
    right: 0;
    bottom: 0;
    width: clamp(48%, 56%, 68%);
    height: clamp(150px, 24vh, 240px);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }

  .sf-switcher__card-media img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
  }

  /* On mobile all cards are effectively expanded */
  .sf-switcher[data-closed="white"] .sf-switcher__card{
    background: var(--accent, #000);
    color: #fff;
  }

  .sf-switcher[data-closed="white"] .sf-switcher__card .sf-switcher__card-title{
    color: #fff !important;
  }

  .sf-switcher[data-closed="accent"] .sf-switcher__card .sf-switcher__card-title{
    color: #fff !important;
  }
}

@media (max-width: 780px){

  /* Mobile: every card always uses expanded styling */
  .sf-switcher[data-closed="white"] .sf-switcher__card,
  .sf-switcher[data-closed="white"] .sf-switcher__card.is-active,
  .sf-switcher[data-closed="white"] .sf-switcher__card:not(.is-active){
    background: var(--accent, #000) !important;
    color: #fff !important;
  }

  .sf-switcher[data-closed="accent"] .sf-switcher__card,
  .sf-switcher[data-closed="accent"] .sf-switcher__card.is-active,
  .sf-switcher[data-closed="accent"] .sf-switcher__card:not(.is-active){
    background: var(--accent, #000) !important;
    color: #fff !important;
  }

  .sf-switcher__card .sf-switcher__card-title,
  .sf-switcher__card.is-active .sf-switcher__card-title,
  .sf-switcher__card:not(.is-active) .sf-switcher__card-title,
  .sf-switcher[data-closed="white"] .sf-switcher__card .sf-switcher__card-title,
  .sf-switcher[data-closed="white"] .sf-switcher__card.is-active .sf-switcher__card-title,
  .sf-switcher[data-closed="white"] .sf-switcher__card:not(.is-active) .sf-switcher__card-title,
  .sf-switcher[data-closed="accent"] .sf-switcher__card .sf-switcher__card-title,
  .sf-switcher[data-closed="accent"] .sf-switcher__card.is-active .sf-switcher__card-title,
  .sf-switcher[data-closed="accent"] .sf-switcher__card:not(.is-active) .sf-switcher__card-title{
    color: #fff !important;
  }
}