/* ==========================================================================
   MIKA — components. Each block here is self-contained and reusable; where
   the page needed a toggle control (material grades) it reuses the chip
   shape from the shared library rather than inventing another one.
   ========================================================================== */

/* --- Bullet list: the red dot list used in the hero and the pitch panel --- */

.bullets {
  display: grid;
  gap: var(--spacing-3);
}

.bullets__item {
  position: relative;
  padding-left: var(--spacing-6);
  font-size: var(--mika-body-lg);
  line-height: var(--line-height-snug);
}

.bullets__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: var(--mika-bullet);
  height: var(--mika-bullet);
  border-radius: var(--mika-radius-pill);
  background: var(--mika-accent);
}

.bullets--compact .bullets__item {
  font-size: var(--mika-body);
  padding-left: var(--spacing-5);
}

.bullets--compact .bullets__item::before {
  width: var(--mika-bullet-sm);
  height: var(--mika-bullet-sm);
}

/* --- Product card -------------------------------------------------------- */

/* Same shape as the entity cards on the main site's /forms/ page: a square
   white tile with a hairline border, the caption sitting OUTSIDE it, and a
   slight scale-up on hover. The photo is cover-cropped, as it is there —
   the form photos are square at source, so nothing actually gets cut. */
.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  transition: transform var(--mika-transition-card);
}

.product-card:hover {
  transform: scale(1.03);
}

.product-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mika-surface);
  border: none;
  border-radius: var(--mika-radius-media);
  overflow: hidden;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--mika-text);
  overflow-wrap: break-word;
}

/* --- Grade chips: the material tab row ----------------------------------- */

.grade-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

/* Three states, and only three: idle (invisible border, but the border is
   still there so nothing shifts), hovered-while-inactive (dashed outline),
   and selected (solid outline). Hover is scoped with :not([aria-selected])
   so pointing at the open tab does nothing at all — that overlap was what
   made the row look like it was flickering between two looks.
   border-style is deliberately NOT transitioned: dashed↔solid cannot tween,
   and animating it is what produced the half-drawn edge mid-transition. */
.grade-tab {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--mika-body-sm);
  font-weight: var(--font-weight-semi-bold);
  letter-spacing: var(--mika-tracking-label);
  color: var(--mika-text-muted);
  background: transparent;
  border: 1px solid var(--mika-border);
  border-radius: var(--mika-radius-pill);
  white-space: nowrap;
  transition: color var(--mika-transition), background var(--mika-transition),
    border-color var(--mika-transition);
}

.grade-tab:not([aria-selected='true']):hover {
  color: var(--mika-accent);
  border-style: solid;
  border-color: var(--mika-accent);
}

.grade-tab[aria-selected='true'] {
  color: white;
  background: var(--mika-accent);
  border-style: solid;
  border-color: var(--mika-accent);
  cursor: default;
}

/* --- Grade panel --------------------------------------------------------- */

/* Every panel occupies the same cell of .materials__picker, stacked. */
.grade-panel {
  grid-row: 2;
  grid-column: 1;
  display: grid;
  padding-top: 15px;
  grid-template-columns: 1fr minmax(0, 0.9fr);
  gap: 10px;
  align-items: start;
}

/* Deliberately NOT display:none. A closed panel keeps its box so the shared
   cell stays as tall as the tallest grade, and the section below never moves
   when you switch tabs. `visibility: hidden` still takes it out of the
   accessibility tree and out of tab order, so it is hidden in every sense
   that matters — it just keeps reserving its space. */
.grade-panel[hidden] {
  display: grid;
  visibility: hidden;
  pointer-events: none;
}

.grade-panel__polymer {
  font-size: var(--mika-display-3);
  font-weight: var(--font-weight-black);
  letter-spacing: var(--mika-tracking-display);
  margin-bottom: var(--spacing-3);
}

.grade-panel__text {
  color: var(--mika-text-muted);
  font-size: var(--mika-body-lg);
  line-height: var(--line-height-relaxed);
}

.grade-panel__media img {
  border-radius: var(--mika-radius-media);
  width: 100%;
  object-fit: cover;
}

/* --- Advantage column ---------------------------------------------------- */

/* Three fixed rows — title, body, conclusion — so the middle row absorbs the
   difference in text length and every conclusion starts on the same line
   across the row, however long the paragraph above it runs. */
.advantage {
  /* Dissolved so the title, body and conclusion become items of the SECTION
     grid directly. That is what puts every conclusion on one line: they all
     land in one shared grid row, whose top is the same for every column,
     instead of each column bottom-aligning its own. Row template per
     breakpoint lives in layout.css / responsive.css. */
  display: contents;
}

.advantage__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--mika-accent);
  margin-bottom: var(--spacing-3);
}

.advantage__text {
  color: var(--mika-text-muted);
  font-size: var(--mika-body-sm);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-3);
}

.advantage__conclusion {
  font-size: var(--mika-body-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

/* --- Industry tile ------------------------------------------------------- */

/* Matches the application cards on the main site: the tile scales up, and the
   icon and caption both go brand-red. The icon is recoloured with the same
   filter chain the main site uses — it works by flattening the SVG to black
   first, which is why the icons have to stay transparent silhouettes. */
.industry {
  display: grid;
  gap: var(--spacing-2);
  justify-items: center;
  align-content: start;
  text-align: center;
  padding: var(--spacing-4) var(--spacing-2);
  border-radius: var(--mika-radius-media);
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform var(--mika-transition-card);
}

.industry:hover {
  transform: scale(1.03);
}

.industry__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--mika-industry-icon);
  height: var(--mika-industry-icon);
  flex-shrink: 0;
}

.industry__icon-img {
  width: var(--mika-industry-icon);
  height: var(--mika-industry-icon);
  object-fit: contain;
  transition: filter var(--mika-transition-tint);
  filter: brightness(0) saturate(100%) invert(20%) sepia(10%) saturate(400%)
    hue-rotate(10deg) brightness(90%);
}

.industry:hover .industry__icon-img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(40%) saturate(800%)
    hue-rotate(330deg) brightness(90%);
}

.industry__title {
  font-size: var(--mika-body-sm);
  font-weight: var(--font-weight-semi-bold);
  line-height: var(--line-height-snug);
  color: var(--mika-text);
  transition: color var(--mika-transition-tint);
}

.industry:hover .industry__title {
  color: var(--mika-accent);
}

/* --- Carousel arrows ----------------------------------------------------- */

.carousel-nav {
  display: flex;
  gap: var(--spacing-2);
  justify-content: flex-end;
  margin-top: var(--spacing-6);
}

/* When every tile already fits, the script hides this — `display: flex`
   would otherwise beat the [hidden] attribute and leave dead arrows. */
.carousel-nav[hidden] {
  display: none;
}

.carousel-nav__btn {
  display: grid;
  place-items: center;
  width: var(--mika-carousel-btn);
  height: var(--mika-carousel-btn);
  border: 1px solid var(--mika-border-strong);
  border-radius: var(--mika-radius-pill);
  color: var(--mika-text);
  transition: color var(--mika-transition), border-color var(--mika-transition),
    background var(--mika-transition);
}

.carousel-nav__btn:hover:not(:disabled) {
  color: var(--mika-accent);
  border-color: var(--mika-accent);
  background: var(--mika-accent-soft);
}

.carousel-nav__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.carousel-nav__btn svg {
  width: var(--mika-icon-sm);
  height: var(--mika-icon-sm);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Contact line: reused by the CTA block and the footer ---------------- */

.contact-line {
  display: grid;
  gap: var(--spacing-1);
}

.contact-line__label {
  font-size: var(--mika-body-sm);
  color: var(--mika-text-muted);
}

.contact-line__value {
  font-size: var(--mika-body-lg);
  font-weight: var(--font-weight-medium);
}

/* --- Back to top --------------------------------------------------------- */

.back-to-top {
  position: fixed;
  right: var(--spacing-5);
  bottom: var(--spacing-5);
  z-index: var(--mika-z-top);
  display: grid;
  place-items: center;
  width: var(--mika-fab);
  height: var(--mika-fab);
  border-radius: var(--mika-radius-pill);
  background: var(--mika-accent);
  color: var(--mika-text-on-accent);
  box-shadow: var(--mika-shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--mika-transition), transform var(--mika-transition),
    visibility var(--mika-transition), background var(--mika-transition);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--mika-accent-hover);
  color: var(--mika-text-on-accent);
}

.back-to-top svg {
  width: var(--mika-icon-sm);
  height: var(--mika-icon-sm);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Burger -------------------------------------------------------------- */

.burger {
  display: none;
  width: var(--mika-fab);
  height: var(--mika-fab);
  place-items: center;
}

.burger__box {
  position: relative;
  width: var(--mika-burger-w);
  height: var(--mika-burger-h);
}

.burger__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--mika-burger-bar);
  border-radius: var(--mika-radius-pill);
  background: var(--mika-text);
  transition: transform var(--mika-transition), opacity var(--mika-transition);
}

/* Evenly spread across the box, derived from its height and the bar
   thickness — so changing either token keeps the three bars centred. */
.burger__bar:nth-child(1) { top: 0; }
.burger__bar:nth-child(2) { top: calc((var(--mika-burger-h) - var(--mika-burger-bar)) / 2); }
.burger__bar:nth-child(3) { top: calc(var(--mika-burger-h) - var(--mika-burger-bar)); }

.burger[aria-expanded='true'] .burger__bar:nth-child(1) {
  transform: translateY(calc((var(--mika-burger-h) - var(--mika-burger-bar)) / 2)) rotate(45deg);
}

.burger[aria-expanded='true'] .burger__bar:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded='true'] .burger__bar:nth-child(3) {
  transform: translateY(calc((var(--mika-burger-h) - var(--mika-burger-bar)) / -2)) rotate(-45deg);
}