/**
 * Button Component Styles
 *
 * Styles:   primary | secondary | outline
 * Sizes:    container-responsive: fluidly scales between small (44px) and
 *           large (64px) with the container's own width — no fixed
 *           breakpoint jumps. Uses min-height (not height) plus the
 *           Figma spec's tiny fixed 2px/3px vertical padding, so a
 *           single-line label sits at exactly the spec height, but a
 *           wrapped multi-line label can still grow past it while
 *           keeping consistent padding around the whole label.
 * Size prop: optional maximum size cap: s | m | l
 * Contexts: trust | ambience | white | academy | attitude
 *
 * Figma node: 694:30391 (Buttons Preview)
 */

/* -------------------------------------------------------
 * Component-scoped custom properties (defaults = primary, fluid, on trust)
 *
 * Two continuous ramp segments, passing through the same three reference
 * points the old fixed-step design used — small (container 0px), medium
 * (360px), large (720px) — so the fluid curve matches those sizes exactly
 * at 360/720 instead of drifting smaller. Segment 1 (below) ramps
 * small → medium; segment 2 (in the @container block further down) picks
 * up at exactly "medium" and ramps on to large. --btn-*-max caps a size
 * prop below (see .button--max-* rules).
 * ------------------------------------------------------- */
.button {
  --btn-height:    clamp(44px, 44px + 3.3333cqi, 56px);
  --btn-font:      clamp(18px, 18px + 1.1111cqi, 22px);
  --btn-tracking:  clamp(-0.264px, -0.18px - 0.0233cqi, -0.18px);
  --btn-px:        clamp(24px, 24px + 2.2222cqi, 32px);
  --btn-py:        clamp(8px, 8px + 2.2222cqi, 16px);
  --btn-icon-size: clamp(16px, 16px + 1.1111cqi, 20px);
  --btn-icon-stroke-width: clamp(2.8px, 2.8px + 0.1944cqi, 3.5px);
  --btn-gap:       clamp(12px, 12px + 1.1111cqi, 16px);
  --btn-px-icon:   clamp(20px, 20px + 2.2222cqi, 28px);

  --btn-bg:        var(--attitude, #ffa0fa);
  --btn-text:      var(--trust, #550a2d);
  --btn-border:    transparent;

}

/* Segment 2: continues the ramp from "medium" (at 360px) to "large" (at
   720px). Excluded from size-capped buttons, which stay on segment 1's
   plateau (max-m) or a fixed size (max-s). */
@container bosch-button (min-width: 360px) {
  .button:not(.button--max-s):not(.button--max-m) {
    --btn-height:    clamp(56px, 48px + 2.2222cqi, 64px);
    --btn-tracking:  clamp(-0.42px, -0.108px - 0.0433cqi, -0.264px);
    --btn-px:        clamp(32px, 24px + 2.2222cqi, 40px);
    --btn-py:        clamp(18px, 18px + 2.2222cqi, 20px);
    --btn-icon-size: clamp(20px, 14px + 1.6667cqi, 26px);
    --btn-icon-stroke-width: clamp(3.5px, 2px + 0.4167cqi, 5px);
    --btn-gap:       clamp(16px, 12px + 1.1111cqi, 20px);
    --btn-px-icon:   clamp(28px, 24px + 1.1111cqi, 32px);
  }
}

.button__container {
  container: bosch-button / inline-size;
  inline-size: 100%;
}

.container .button__container {
  padding-block: var(--spacing-500, 40px);
}

/* -------------------------------------------------------
 * Base element styles
 * ------------------------------------------------------- */
.button {
  align-items: center;
  background-color: var(--btn-bg);
  border: var(--border-width-regular, 2px) solid var(--btn-border);
  border-radius: var(--border-radius-round, 1000px);
  color: var(--btn-text);
  cursor: pointer;
  display: inline-flex;
  font-family: 'Bosch Sans', sans-serif;
  font-feature-settings: 'zero';
  font-size: var(--btn-font);
  font-weight: 700;
  gap: var(--btn-gap);
  min-height: var(--btn-height);
  width: fit-content;
  justify-content: center;
  letter-spacing: var(--btn-tracking);
  line-height: 1.1;
  margin-inline: 1em;
  padding: var(--btn-py) var(--btn-px);
  text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  text-align: center;
}

.button:first-child {
  margin-left: 0;
}

@supports (text-box-trim: trim-both) {
  .button .button__label {
    order: 0;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
}

.button:focus-visible {
  outline: var(--border-width-bold, 4px) solid var(--accent, #fa263a);
  outline-offset: 2px;
}

/* -------------------------------------------------------
 * SIZE CAPS (optional "size" prop)
 * max-m needs no rule of its own: segment 1 above already ramps up to
 * exactly "medium" and plateaus there via its own clamp() max, and
 * segment 2 explicitly excludes .button--max-m — so it never proceeds
 * past medium. max-s pins to a fixed size regardless of container width.
 * ------------------------------------------------------- */
.button--max-s {
  --btn-height:    44px;
  --btn-font:      var(--text-size-button-button-text-s, 18px);
  --btn-tracking:  -0.18px;
  --btn-px:        var(--spacing-300, 24px);
  --btn-py:        var(--spacing-100, 8px);
  --btn-icon-size: 16px;
  --btn-icon-stroke-width: 2.8px;
  --btn-gap:       var(--spacing-150, 12px);
  --btn-px-icon:   var(--spacing-250, 20px);
}

/* -------------------------------------------------------
 * ICON POSITION VARIANTS
 * ------------------------------------------------------- */

.button__icon {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  height: var(--btn-icon-size);
  justify-content: center;
  width: var(--btn-icon-size);
  transition: margin 0.3s ease-in-out;
}

.button__icon svg {
  display: block;
  height: 100%;
  width: 100%;
  stroke-width: var(--btn-icon-stroke-width);
}

/* Override icon component's own fixed size so it scales with the button */
.button__icon .icon {
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
}

.button__icon.before {
  order: -1;
}

.button:hover .button__icon.before {
  margin-inline-end: 0.25rem;
}

.button__icon.after {
  order: 1;
}

.button:hover .button__icon.after {
  margin-inline-start: 0.25rem;
}

.button.icon--only {
  height: var(--btn-height);
  width: var(--btn-height);
  padding: 0;
}

/* -------------------------------------------------------
 * STYLE VARIANTS (primary / secondary / outline)
 * Colors depend on context — see below.
 * ------------------------------------------------------- */

/* Primary */

.button--primary {
  --btn-bg:        var(--attitude, #ffa0fa);
  --btn-text:      var(--trust, #550a2d);
}

.button--primary:hover {
  --btn-bg: var(--attitude-500, #cc80c8);
}

.surface--attitude .button--primary,
.button--primary.button--on-attitude
{
  --btn-bg:   var(--white, #ffffff);
  --btn-text: var(--trust, #550a2d);
}
.surface--attitude .button--primary:hover,
.button--primary.button--on-attitude:hover
{
  --btn-bg: var(--attitude-100, #FFCFFD);
}

.surface--attitude .button--primary:hover,
.button--primary.button--on-attitude:hover {
  --btn-bg: var(--attitude-200, #FFCFFD);
}

.surface--academy .button--primary,
.button--primary.button--on-academy {
  --btn-bg:        var(--trust, #550a2d);
  --btn-text:        var(--attitude, #ffa0fa);
}

.surface--academy .button--primary:hover,
.button--primary.button--on-academy:hover {
  --btn-bg:        var(--trust-300, #773B57);
}

/* on media only one button-style is allowed! */
.media .button--primary,
.media .button--secondary,
.media .button--outline,
.button--primary.button--on-media,
.button--secondary.button--on-media,
.button--outline.button--on-media
{
  --btn-bg:        #EBE6E1A8; /* we need the opacity in the color definition for the backdrop-filter to work*/
  --btn-text:        var(--trust, #550a2d);
  --btn-border:     none;
  backdrop-filter: blur(calc(var(--blur-medium, 12px) / 2));
}

.media .button--primary:hover,
.media .button--secondary:hover,
.media .button--outline:hover,
.button--primary.button--on-media:hover,
.button--secondary.button--on-media:hover,
.button--outline.button--on-media:hover
{
  --btn-bg:        var(--attitude, #ffa0fa);
  --btn-border:     none;
  background-color: var(--btn-bg);
}



/* Secondary */
.button--secondary {
  --btn-bg:   var(--ambience, #EBE6E1);
  --btn-text: var(--trust, #550a2d);
}

.button--secondary:hover {
  --btn-bg: var(--ambience-500, #DBD4CE);
}

.surface--ambience .button--secondary,
.button--secondary.button--on-ambience {
  --btn-bg:   var(--ambience-500, #DBD4CE);
  --btn-text: var(--trust, #550a2d);
}
.surface--ambience .button--secondary:hover,
.button--secondary.button--on-ambience:hover {
  --btn-bg: var(--ambience-600, #BAB0A7);
}

.view-fellows .button--secondary.button--on-ambience {
  background-color: var(--ambience-500, #DBD4CE);
}

.view-fellows .button--secondary.button--on-ambience:hover {
  background-color: var(--ambience-600, #BAB0A7);
}

.surface--attitude .button--secondary,
.button--secondary.button--on-attitude {
  --btn-bg:   var(--attitude-500, #cc80c8);
  --btn-text: var(--white, #ffffff);
}
.surface--attitude .button--secondary:hover,
.button--secondary.button--on-attitude:hover {
  --btn-bg: var(--attitude-600, #996096);
}

.surface--trust .button--secondary,
.button--secondary.button--on-trust {
  --btn-bg:   var(--trust-300, #773b57);
  --btn-text: var(--white, #ffffff);
}
.surface--trust .button--secondary:hover,
.button--secondary.button--on-trust:hover {
  --btn-bg: var(--trust-200, #AA8496);
}

.surface--academy .button--secondary,
.surface--academy .button--secondary:hover,
.button--secondary.button--on-academy,
.button--secondary.button--on-academy:hover
{
  --btn-bg: var(--academy-200, #D4C0A1);
}
.surface--attitude .button--secondary:hover,
.button--secondary.button--on-attitude:hover
{
  --btn-bg: var(--attitude-600, #996096);
}



/* Outline */
.button--outline {
  --btn-bg:     transparent;
  --btn-border: var(--trust, #550a2d);
  --btn-text:   var(--trust, #550a2d);
}

/* Outline hover: tinted fill using border color */
.button--outline:hover {
  --btn-bg:     var(--ambience, #ebe6e1);
}

.surface--ambience .button--outline:hover,
.button--outline.button--on-ambience:hover
{
  --btn-bg:     var(--ambience-500, #dbd4ce);
}

.surface--attitude .button--outline:hover,
.button--outline.button--on-attitude:hover {
  --btn-bg:     var(--attitude-300, #FFB3FB);
}

.surface--trust .button--outline,
.button--outline.button--on-trust{
  --btn-border: var(--white, #ffffff);
  --btn-text:   var(--white, #ffffff);
}
.surface--trust .button--outline:hover,
.button--outline.button--on-trust:hover {
  --btn-bg:     var(--trust-300, #773B57);
}

.surface--academy .button--outline,
.button--outline.button--on-academy {
  --btn-border: var(--white, #ffffff);
  --btn-text:   var(--white, #ffffff);
}
.surface--academy .button--outline:hover,
.button--outline.button--on-academy:hover {
  --btn-bg:     var(--academy-500, #97784B);
}