/*
  Bora — components
  Depends on tokens.css.

  Two components live here, and they share one geometry:

    .bora-plate — the marketing slant plate (module cards, benefit cards)
    .btn        — the button

  ==========================================================================
  THE SHARED CUT
  ==========================================================================

  Both shapes come out of the same polygon. Read the shape as three
  stacked rows:

    top row     fixed height --cut-s-top, split into
                [transparent rect][45° triangle][filled rect]
    middle      plain rectangle, height fills
    bottom row  the same row point-mirrored

  The bevel is always 45° — the triangle is right-isosceles, so its
  horizontal run always equals the row height. That is confirmed
  geometry, not a free parameter; don't "adjust" it per component.

  Four inputs:

    --cut-s-top / --cut-s-bot          row height, top and bottom.
                                       0px removes that row entirely.
    --cut-notch-top / --cut-notch-bot  width of the transparent rect,
                                       measured from the outer edge on
                                       the recessed side. 0px pulls the
                                       bevel into the corner.

  Both default to the shorthands --cut-step / --cut-notch, so the common
  symmetric case only needs those two.

  The button is this same shape degenerated: no top row, notch pulled to
  zero. That is not a coincidence to be undone later — it is why there is
  one list of step sizes (--cut-s/m/l in tokens.css) instead of two.

    plate   --cut-s-top: 24px  --cut-notch: 45%   → slant plate
    button  --cut-s-top: 0px   --cut-notch: 0px   → bottom-right cut only
    btn cut-2 --cut-s-top: 24px --cut-notch: 0px  → two cut corners

  ==========================================================================
  WHY THE OUTLINE IS A POLYGON AND NOT A BORDER
  ==========================================================================

  clip-path removes geometry, it does not stroke it — a plain `border`
  is clipped away exactly at the bevel, which is the one edge that most
  needs stroking. So an outline is drawn as a ring: one polygon that
  walks the outer contour clockwise, jumps inward, walks the inner
  contour counter-clockwise, and returns. The opposing winding
  directions cancel and the middle becomes a real hole.

  --cut-border-k is what keeps that ring an even thickness. Stepping
  inward by --cut-border alone measures only border/sqrt(2) perpendicular
  to a 45° edge, so the inner contour needs an extra horizontal nudge of
  border*(sqrt2-1). Without it the ring is 29% thinner on the bevel than
  on the straight sides.

  WHY THE BUTTON DOES NOT SHARE THE RING
  --------------------------------------
  The fill polygon is shared — button and plate produce byte-identical
  fill geometry, verified point by point. The ring is not, and the reason
  is real rather than lazy.

  Offsetting a polygon inward is only well defined while every edge keeps
  a positive length. The plate has a notch, so the short horizontal run
  between the straight side and the bevel survives the offset. The button
  has --cut-notch: 0, that run is already zero, and offsetting it inward
  makes it reverse: the inner contour crosses back over the outer one and
  pinches the ring to 0.41px right at the corner — measurably worse than
  the 0.707px it was meant to fix. Clamping does not rescue it either;
  any clamp changes the perpendicular offset of the bevel and therefore
  the ring thickness along the whole diagonal.

  So the button keeps its own two ring polygons below. They are the
  original geometry, unchanged, so the rendered site is pixel-identical —
  including their known 0.707px diagonal. That deviation is documented in
  COMPONENTS.md and still wants fixing; it needs a zero-notch ring
  written for that case specifically, not this formula.

  ==========================================================================
  BUTTON API — unchanged from the previous version
  ==========================================================================

    <button class="btn btn--m btn--solid">
      <span class="btn__label">request a demo</span>
    </button>

  1. SIZE   — .btn--s | .btn--m | .btn--l   (16 / 24 / 32px cut)
  2. STYLE  — .btn--outline | .btn--solid
  3. CUT    — default bottom-right only; .btn--cut-2 adds top-left
  4. WIDTH  — default hug; .btn--w-full fills

  Colors stay per-instance custom properties: --btn-color-border,
  --btn-color-fill, --btn-color-fill-hover, --btn-color-fill-active,
  --btn-color-text, and the opt-in --btn-color-text-hover.
  --btn-color-text is deliberately not part of the palette override —
  button text stays neutral/0 on every style and every color.

    <button class="btn btn--s btn--outline"
            style="--btn-color-border: var(--category-booking);">
      <span class="btn__label">learn more</span>
    </button>

  Internal rename in this pass: the old --btn-cut and --btn-border are
  now --cut-step and --cut-border, shared with the plate. Nothing in the
  public API above changed, but an instance that overrode --btn-cut
  directly needs updating.
*/

/* ==========================================================================
   1 — SHARED CUT GEOMETRY
   ========================================================================== */

.bora-plate,
.btn {
  --cut-border-k: calc(var(--cut-border) * 0.4142);
}

/* ---------- fill ---------- */

.bora-plate--tl,
.btn--solid,
.btn--outline:hover,
.bora-module:hover .btn--outline,
.bora-module.is-inview .btn--outline {
  --bora-shape: polygon(
    0                                                        var(--cut-s-top),
    var(--cut-notch-top)                                     var(--cut-s-top),
    calc(var(--cut-notch-top) + var(--cut-s-top))            0,
    100%                                                     0,
    100%                                                     calc(100% - var(--cut-s-bot)),
    calc(100% - var(--cut-notch-bot))                        calc(100% - var(--cut-s-bot)),
    calc(100% - var(--cut-notch-bot) - var(--cut-s-bot))     100%,
    0                                                        100%
  );
}

.bora-plate--tr {
  --bora-shape: polygon(
    0                                                        0,
    calc(100% - var(--cut-notch-top) - var(--cut-s-top))     0,
    calc(100% - var(--cut-notch-top))                        var(--cut-s-top),
    100%                                                     var(--cut-s-top),
    100%                                                     100%,
    calc(var(--cut-notch-bot) + var(--cut-s-bot))            100%,
    var(--cut-notch-bot)                                     calc(100% - var(--cut-s-bot)),
    0                                                        calc(100% - var(--cut-s-bot))
  );
}

/* ---------- ring ----------
   Plate only — see the header for why the button can't use this.
   Order: outer start, jump in, inner contour reversed, back to the same
   inner point, jump out, outer contour. */

.bora-plate--tl.bora-plate--outline {
  --bora-shape: polygon(
    0 var(--cut-s-top),

    var(--cut-border)                                                            calc(var(--cut-s-top) + var(--cut-border)),
    var(--cut-border)                                                            calc(100% - var(--cut-border)),
    calc(100% - var(--cut-notch-bot) - var(--cut-s-bot) - var(--cut-border-k))   calc(100% - var(--cut-border)),
    calc(100% - var(--cut-notch-bot) - var(--cut-border-k))                      calc(100% - var(--cut-s-bot) - var(--cut-border)),
    calc(100% - var(--cut-border))                                               calc(100% - var(--cut-s-bot) - var(--cut-border)),
    calc(100% - var(--cut-border))                                               var(--cut-border),
    calc(var(--cut-notch-top) + var(--cut-s-top) + var(--cut-border-k))          var(--cut-border),
    calc(var(--cut-notch-top) + var(--cut-border-k))                             calc(var(--cut-s-top) + var(--cut-border)),
    var(--cut-border)                                                            calc(var(--cut-s-top) + var(--cut-border)),

    0 var(--cut-s-top),

    var(--cut-notch-top)                                                         var(--cut-s-top),
    calc(var(--cut-notch-top) + var(--cut-s-top))                                0,
    100%                                                                         0,
    100%                                                                         calc(100% - var(--cut-s-bot)),
    calc(100% - var(--cut-notch-bot))                                            calc(100% - var(--cut-s-bot)),
    calc(100% - var(--cut-notch-bot) - var(--cut-s-bot))                         100%,
    0                                                                            100%
  );
}

.bora-plate--tr.bora-plate--outline {
  --bora-shape: polygon(
    0 0,

    var(--cut-border)                                                            var(--cut-border),
    var(--cut-border)                                                            calc(100% - var(--cut-s-bot) - var(--cut-border)),
    calc(var(--cut-notch-bot) + var(--cut-border-k))                             calc(100% - var(--cut-s-bot) - var(--cut-border)),
    calc(var(--cut-notch-bot) + var(--cut-s-bot) + var(--cut-border-k))          calc(100% - var(--cut-border)),
    calc(100% - var(--cut-border))                                               calc(100% - var(--cut-border)),
    calc(100% - var(--cut-border))                                               calc(var(--cut-s-top) + var(--cut-border)),
    calc(100% - var(--cut-notch-top) - var(--cut-border-k))                      calc(var(--cut-s-top) + var(--cut-border)),
    calc(100% - var(--cut-notch-top) - var(--cut-s-top) - var(--cut-border-k))   var(--cut-border),
    var(--cut-border)                                                            var(--cut-border),

    0 0,

    calc(100% - var(--cut-notch-top) - var(--cut-s-top))                         0,
    calc(100% - var(--cut-notch-top))                                            var(--cut-s-top),
    100%                                                                         var(--cut-s-top),
    100%                                                                         100%,
    calc(var(--cut-notch-bot) + var(--cut-s-bot))                                100%,
    var(--cut-notch-bot)                                                         calc(100% - var(--cut-s-bot)),
    0                                                                            calc(100% - var(--cut-s-bot))
  );
}

/* ==========================================================================
   2 — PLATE (.bora-plate)
   ========================================================================== */

/*
  Markup — the shape carries its own fill, so layer 1 and layer 2 of the
  Figma construction collapse into one element; clip-path clips the
  background, no separate mask needed:

    <div class="bora-plate bora-plate--tl bora-plate--m bora-card-striped">
      <div class="bora-plate__content"> … </div>
    </div>

  Height is content-driven — don't set one unless the design calls for a
  fixed ratio.
*/

.bora-plate {
  --cut-step: var(--cut-m);
  /* --cut-notch is inherited from :root and is responsive (20 / 32 / 45%).
     Deliberately not redeclared here — doing so would pin every plate to one
     value and undo that. Override it per instance when a shape needs its own. */

  --cut-s-top: var(--cut-step);
  --cut-s-bot: var(--cut-step);
  --cut-notch-top: var(--cut-notch);
  --cut-notch-bot: var(--cut-notch);

  position: relative;
  box-sizing: border-box;

  /* keeps notch + step inside the width so the polygon can't invert;
     holds up to a notch of 75% */
  min-width: calc(var(--cut-step) * 4);
  min-height: calc(var(--cut-step) * 2);

  clip-path: var(--bora-shape);
}

.bora-plate--s { --cut-step: var(--cut-s); }
.bora-plate--m { --cut-step: var(--cut-m); }
.bora-plate--l { --cut-step: var(--cut-l); }

/* Hollow — the middle is a real hole, so this can sit on the ground
   gradient without painting over it. Mutually exclusive with a fill:
   if a plate needs both, nest a second plate at inset: var(--cut-border)
   and let the inner one carry .bora-card-striped. */
.bora-plate--outline {
  background-color: var(--cut-border-color, var(--accent-action));
  background-image: none;
}

/* Vertical padding must clear the bevel rows, or the first line of text
   lands inside the notch. */
.bora-plate__content {
  padding-block: calc(var(--cut-step) + var(--padding-l3));
  padding-inline: var(--padding-l2);
  display: flex;
  flex-direction: column;
  gap: var(--gap-l3);
  height: 100%;
}

/* ==========================================================================
   3 — BUTTON (.btn)
   ========================================================================== */

.btn-group {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-l2);
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;

  font-family: var(--font-tektur);
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none; /* a .btn is a button whether it's a <button> or an <a> — never underlined */

  /* Tektur vertical trim. Lives here rather than in the page stylesheet
     so a button has the same metrics wherever it is used — previously
     this sat in main.css and button-demo.html rendered differently from
     the real site because of it. */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;

  /* color defaults — override per instance via inline style */
  --btn-color-border: var(--color-primary-500);
  --btn-color-fill: var(--color-primary-500);
  --btn-color-fill-hover: var(--color-primary-600);
  --btn-color-fill-active: var(--color-primary-700);
  --btn-color-text: var(--color-neutral-0);

  /* geometry: no top row, bevel pulled into the corner */
  --cut-step: var(--cut-s);
  --cut-notch: 0px;
  --cut-s-top: 0px;
  --cut-s-bot: var(--cut-step);
  --cut-notch-top: var(--cut-notch);
  --cut-notch-bot: var(--cut-notch);

  color: var(--btn-color-text);
  transition: color var(--motion-snap) var(--motion-ease);
}

/* Hover text color is opt-in: only takes effect when an instance sets
   --btn-color-text-hover inline (e.g. a white-fill button whose text
   needs to flip to white once the fill goes solid on hover). */
.btn:hover {
  color: var(--btn-color-text-hover, var(--btn-color-text));
}

.btn__label {
  position: relative;
  z-index: 1;
}

/* The shape is painted by ::before so the label can sit above it. The
   clip-path still transitions: swapping --bora-shape changes ::before's
   computed clip-path, and ring and fill have different vertex counts, so
   the swap is discrete — same as before this refactor. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: var(--bora-shape);
  transition:
    clip-path var(--motion-snap) var(--motion-ease),
    background-color var(--motion-snap) var(--motion-ease);
}

/* ---------- width ---------- */

.btn--w-full {
  display: flex;
  width: 100%;
}

/* ---------- icon-only ----------
   A button whose label is an icon instead of text was shorter than its
   text siblings, because a text label is as tall as its line box while an
   icon label is only as tall as the icon. Same padding, different content
   height — in the nav that came out as a 5px mismatch between the demo
   button and the hamburger sitting next to it.

   min-height: 1lh makes the label reserve exactly one line of the button's
   own type, so an icon button lands on the same height as a text button of
   the same size, at every breakpoint, without hardcoding a number. */

.btn--icon .btn__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1lh;
}

.btn--icon .btn__label img,
.btn--icon .btn__label svg {
  display: block;
  width: var(--btn-icon-size, var(--btn-s-icon-size));
  height: var(--btn-icon-size, var(--btn-s-icon-size));
}

.btn--s.btn--icon { --btn-icon-size: var(--btn-s-icon-size); }
.btn--m.btn--icon { --btn-icon-size: var(--btn-m-icon-size); }
.btn--l.btn--icon { --btn-icon-size: var(--btn-l-icon-size); }

/* ---------- size ---------- */

.btn--s {
  font-size: var(--text-button-s);
  padding-inline: var(--btn-s-padding-inline);
  padding-block: var(--btn-s-padding-block);
  --cut-step: var(--cut-s);
}
.btn--m {
  font-size: var(--text-button-m-link);
  padding-inline: var(--btn-m-padding-inline);
  padding-block: var(--btn-m-padding-block);
  --cut-step: var(--cut-m);
}
.btn--l {
  font-size: var(--text-button-l);
  padding-inline: var(--btn-l-padding-inline);
  padding-block: var(--btn-l-padding-block);
  --cut-step: var(--cut-l);
}

/* ---------- second cut ----------
   One line now: the top row simply stops being zero-height. The four
   extra polygons the old version needed for this are gone. */

.btn--cut-2 {
  --cut-s-top: var(--cut-step);
}

/* ---------- style ----------
   The two ring polygons below are the button's own, carried over
   unchanged so the rendered site does not move. Only the variable names
   were swapped (--btn-cut / --btn-border became --cut-s-bot / --cut-border),
   so a size change still travels through the shared step scale.
   The hover and active fills come from the shared fill polygon above —
   that is where four of the original six polygons went. */

.btn--outline::before {
  background: var(--btn-color-border);
  clip-path: polygon(
    0 0,
    var(--cut-border)                                var(--cut-border),
    var(--cut-border)                                calc(100% - var(--cut-border)),
    calc(100% - var(--cut-s-bot))                    calc(100% - var(--cut-border)),
    calc(100% - var(--cut-border))                   calc(100% - var(--cut-s-bot)),
    calc(100% - var(--cut-border))                   var(--cut-border),
    var(--cut-border)                                var(--cut-border),
    0 0,
    100% 0,
    100%                                             calc(100% - var(--cut-s-bot)),
    calc(100% - var(--cut-s-bot))                    100%,
    0 100%
  );
}

.btn--outline.btn--cut-2::before {
  clip-path: polygon(
    100% 0,
    calc(100% - var(--cut-border))                   var(--cut-border),
    var(--cut-s-top)                                 var(--cut-border),
    var(--cut-border)                                var(--cut-s-top),
    var(--cut-border)                                calc(100% - var(--cut-border)),
    calc(100% - var(--cut-s-bot))                    calc(100% - var(--cut-border)),
    calc(100% - var(--cut-border))                   calc(100% - var(--cut-s-bot)),
    calc(100% - var(--cut-border))                   var(--cut-border),
    100% 0,
    100%                                             calc(100% - var(--cut-s-bot)),
    calc(100% - var(--cut-s-bot))                    100%,
    0 100%,
    0                                                var(--cut-s-top),
    var(--cut-s-top)                                 0
  );
}

/* hover flips both ring variants to the shared fill shape.
   The module-card selector makes the "learn more" button fill when the whole
   card is hovered (not only the button itself). */
.btn--outline:hover::before,
.bora-module:hover .btn--outline::before,
.bora-module.is-inview .btn--outline::before {
  clip-path: var(--bora-shape);
  background: var(--btn-color-fill-hover);
}
.btn--outline:active::before {
  background: var(--btn-color-fill-active);
}

.btn--solid::before {
  background: var(--btn-color-fill);
}
.btn--solid:hover::before {
  background: var(--btn-color-fill-hover);
}
.btn--solid:active::before {
  background: var(--btn-color-fill-active);
}