/* ax-components.css — auxjo.com components
   Requires ax-tokens.css. All layout uses logical properties so RTL is free.

   1  Temperature rail (signature)
   2  Thermal hero
   3  Room-size capacity selector
   4  Product carousel
   5  Spec table with capacity tabs
   6  Facility map
   7  Timeline
   8  Product gallery
   9  Feature pictogram grid
   10 Proof-point panels
*/

/* ============================================================ 1  RAIL */
.axk-rail {
  position: fixed;
  inset-block: 18vh 18vh;
  inset-inline-start: clamp(12px, 2.2vw, 34px);
  width: 3px;
  z-index: 40;
  background: linear-gradient(to bottom, var(--axk-accent), var(--axk-accent-soft) 35%, var(--axk-cool) 78%, var(--axk-cool-deep));
  border-radius: 2px;
  opacity: 0.9;
}
.axk-rail__marker {
  position: absolute;
  inset-inline-start: 50%;
  translate: -50% -50%;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--axk-white);
  border: 2px solid var(--axk-navy);
  transition: top 90ms linear;
  top: 0;
}
.axk-rail__readout {
  position: absolute;
  inset-inline-start: 16px;
  translate: 0 -50%;
  font-family: var(--axk-font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--axk-navy);
  background: color-mix(in srgb, var(--axk-sand) 88%, transparent);
  padding: 1px 5px;
  border-radius: 2px;
  white-space: nowrap;
  transition: top 90ms linear;
  top: 0;
}
.axk-rail__cap {
  position: absolute; inset-inline-start: 16px;
  font-family: var(--axk-font-mono); font-size: 0.66rem;
  color: var(--axk-ink-60); letter-spacing: 0.04em;
}
.axk-rail__cap--top { top: -1.1rem; }
.axk-rail__cap--bot { bottom: -1.1rem; }
@media (max-width: 900px) { .axk-rail { display: none; } }
/* Reserve the gutter the rail occupies so its readout never lands on body copy. */
@media (min-width: 901px) {
  .axk-has-rail .axk-container { padding-inline-start: clamp(var(--axk-s3), 6vw, 78px); }
}

/* ====================================================== 2  THERMAL HERO */
.axk-hero {
  position: relative;
  min-height: min(86vh, 780px);
  display: grid;
  align-content: center;
  padding-block: var(--axk-s6);
  overflow: hidden;
  background: var(--axk-deep);
  color: var(--axk-white);
  isolation: isolate;
}
.axk-hero__media {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.axk-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(8,16,41,0.94) 0%, rgba(8,16,41,0.72) 45%, rgba(8,16,41,0.30) 100%);
}
[dir="rtl"] .axk-hero::after { background: linear-gradient(255deg, rgba(8,16,41,0.94) 0%, rgba(8,16,41,0.72) 45%, rgba(8,16,41,0.30) 100%); }

.axk-hero__gauge {
  display: flex; align-items: center; gap: var(--axk-s2);
  margin-block-end: var(--axk-s3);
  font-family: var(--axk-font-mono);
  font-weight: 600;
}
.axk-hero__temp {
  font-size: var(--axk-step-5);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color 900ms linear;
}
.axk-hero__temp--hot  { color: var(--axk-accent-soft); }
.axk-hero__temp--cool { color: var(--axk-cool); }
.axk-hero__track {
  flex: 1; max-width: 340px; height: 2px;
  background: linear-gradient(to right, var(--axk-accent), var(--axk-cool));
  position: relative;
}
[dir="rtl"] .axk-hero__track { background: linear-gradient(to left, var(--axk-accent), var(--axk-cool)); }
.axk-hero__track::after {
  content: ""; position: absolute; inset-block-start: 50%;
  inset-inline-start: var(--p, 0%);
  translate: -50% -50%;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--axk-white);
}
.axk-hero h1 { font-size: var(--axk-step-4); margin: 0 0 var(--axk-s2); max-width: 15ch; }
.axk-hero__sub { font-size: var(--axk-step-1); max-width: 46ch; color: rgba(255,255,255,0.82); margin: 0 0 var(--axk-s4); }
.axk-hero__cta { display: flex; gap: var(--axk-s2); flex-wrap: wrap; }

.axk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.85rem 1.7rem;
  font: inherit; font-weight: 600;
  border-radius: var(--axk-radius);
  border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background var(--axk-dur) var(--axk-ease), color var(--axk-dur) var(--axk-ease), border-color var(--axk-dur) var(--axk-ease);
}
.axk-btn--primary { background: var(--axk-cool); color: var(--axk-deep); }
.axk-btn--primary:hover { background: var(--axk-white); }
.axk-btn--ghost { border-color: rgba(255,255,255,0.5); color: var(--axk-white); }
.axk-btn--ghost:hover { border-color: var(--axk-white); background: rgba(255,255,255,0.1); }
.axk-btn--solid { background: var(--axk-navy); color: var(--axk-white); }
.axk-btn--solid:hover { background: var(--axk-navy-700); }

/* ============================================ 3  ROOM-SIZE SELECTOR */
.axk-sizer { background: var(--axk-sand-100); border-block: 1px solid var(--axk-line); padding-block: var(--axk-s5); }
.axk-sizer__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--axk-s5); align-items: center; }
@media (max-width: 820px) { .axk-sizer__grid { grid-template-columns: 1fr; gap: var(--axk-s4); } }

.axk-sizer__eyebrow {
  font-family: var(--axk-font-mono); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--axk-accent);
  margin: 0 0 var(--axk-s1);
}
.axk-sizer h2 { font-size: var(--axk-step-2); margin: 0 0 var(--axk-s2); }
.axk-sizer p { color: var(--axk-ink-60); margin: 0 0 var(--axk-s3); max-width: 46ch; }

.axk-sizer__readout {
  display: flex; align-items: baseline; gap: var(--axk-s1);
  font-family: var(--axk-font-mono); margin-block-end: var(--axk-s2);
}
.axk-sizer__sqm { font-size: var(--axk-step-3); font-weight: 700; color: var(--axk-navy); font-variant-numeric: tabular-nums; }
.axk-sizer__unit { font-size: var(--axk-step-1); color: var(--axk-ink-60); }

.axk-range { width: 100%; margin: 0 0 var(--axk-s1); accent-color: var(--axk-navy); height: 26px; }
.axk-range:focus-visible { outline: 2px solid var(--axk-navy); outline-offset: 4px; }
.axk-sizer__scale {
  display: flex; justify-content: space-between;
  font-family: var(--axk-font-mono); font-size: 0.72rem; color: var(--axk-ink-60);
}

.axk-result {
  background: var(--axk-white); border: 1px solid var(--axk-line);
  border-radius: var(--axk-radius-lg); padding: var(--axk-s4);
  box-shadow: var(--axk-shadow), 0 12px 32px -20px rgba(2,33,123,0.35);
}
.axk-result__label {
  font-family: var(--axk-font-mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--axk-ink-60);
  margin: 0 0 var(--axk-s1);
}
.axk-result__btu {
  font-family: var(--axk-font-mono); font-size: var(--axk-step-3); font-weight: 700;
  color: var(--axk-navy); line-height: 1; margin: 0 0 var(--axk-s1);
  font-variant-numeric: tabular-nums;
}
.axk-result__kw { font-family: var(--axk-font-mono); color: var(--axk-cool-deep); font-weight: 600; margin: 0 0 var(--axk-s3); }
.axk-result__model {
  display: flex; align-items: center; justify-content: space-between; gap: var(--axk-s2);
  padding-block: var(--axk-s2); border-block-start: 1px solid var(--axk-line);
}
.axk-result__model strong { font-family: var(--axk-font-mono); font-size: var(--axk-step-0); }
.axk-result__note { font-size: var(--axk-step--1); color: var(--axk-ink-60); margin: var(--axk-s2) 0 0; line-height: 1.5; }

/* ================================================== 4  PRODUCT CAROUSEL */
.axk-carousel { position: relative; padding-block: var(--axk-s5); }
.axk-carousel__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--axk-s3); margin-block-end: var(--axk-s3);
}
.axk-carousel__head h2 { font-size: var(--axk-step-2); margin: 0; }
.axk-carousel__nav { display: flex; gap: var(--axk-s1); flex-shrink: 0; }
.axk-carousel__btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--axk-line); background: var(--axk-white);
  color: var(--axk-navy); cursor: pointer;
  display: grid; place-items: center;
  transition: border-color var(--axk-dur) var(--axk-ease), background var(--axk-dur) var(--axk-ease);
}
.axk-carousel__btn:hover:not(:disabled) { border-color: var(--axk-navy); background: var(--axk-sand-100); }
.axk-carousel__btn:disabled { opacity: 0.35; cursor: default; }
/* Arrow glyphs flip with direction — a carousel that advances the wrong way
   in Arabic reads as broken. */
[dir="rtl"] .axk-carousel__btn svg { transform: scaleX(-1); }

.axk-track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(240px, 27vw, 310px);
  gap: var(--axk-s3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block-end: var(--axk-s2);
  scrollbar-width: thin;
  scrollbar-color: var(--axk-line) transparent;
}
.axk-track::-webkit-scrollbar { height: 4px; }
.axk-track::-webkit-scrollbar-thumb { background: var(--axk-line); border-radius: 4px; }

.axk-card {
  scroll-snap-align: start;
  background: var(--axk-white);
  border: 1px solid var(--axk-line);
  border-radius: var(--axk-radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color var(--axk-dur) var(--axk-ease), transform var(--axk-dur) var(--axk-ease);
}
.axk-card:hover { border-color: var(--axk-navy); transform: translateY(-3px); }
.axk-card__media {
  aspect-ratio: 4 / 3; background: var(--axk-sand-100);
  display: grid; place-items: center; overflow: hidden;
}
.axk-card__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--axk-s2); }
.axk-card__body { padding: var(--axk-s3); display: flex; flex-direction: column; gap: var(--axk-s1); flex: 1; }
.axk-card__tier {
  align-self: flex-start;
  font-family: var(--axk-font-mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 2px;
}
.axk-card__tier--premium    { background: var(--axk-navy); color: var(--axk-white); }
.axk-card__tier--upper      { background: var(--axk-cool); color: var(--axk-deep); }
.axk-card__tier--mainstream { background: var(--axk-line); color: var(--axk-ink); }
.axk-card__name { font-size: var(--axk-step-1); font-weight: 700; margin: 0; line-height: 1.25; }
.axk-card__desc { font-size: var(--axk-step--1); color: var(--axk-ink-60); margin: 0; flex: 1; }
.axk-card__meta {
  display: flex; gap: var(--axk-s2); align-items: center;
  font-family: var(--axk-font-mono); font-size: 0.72rem;
  padding-block-start: var(--axk-s2); border-block-start: 1px solid var(--axk-line);
}
.axk-badge-energy { background: var(--axk-cool-deep); color: var(--axk-white); padding: 2px 7px; border-radius: 2px; font-weight: 600; }

/* ============================================== 5  SPEC TABLE + TABS */
.axk-spec { padding-block: var(--axk-s5); }
.axk-tabs { display: flex; gap: var(--axk-s1); margin-block-end: var(--axk-s3); flex-wrap: wrap; }
.axk-tab {
  font-family: var(--axk-font-mono); font-weight: 600; font-size: var(--axk-step--1);
  padding: 0.6rem 1.15rem; cursor: pointer;
  background: transparent; border: 1.5px solid var(--axk-line);
  border-radius: var(--axk-radius); color: var(--axk-ink-60);
  transition: all var(--axk-dur) var(--axk-ease);
}
.axk-tab:hover { border-color: var(--axk-navy); color: var(--axk-navy); }
.axk-tab[aria-selected="true"] { background: var(--axk-navy); border-color: var(--axk-navy); color: var(--axk-white); }

.axk-spec__scroll { overflow-x: auto; border: 1px solid var(--axk-line); border-radius: var(--axk-radius-lg); background: var(--axk-white); }
.axk-spec table { width: 100%; border-collapse: collapse; font-size: var(--axk-step--1); }
.axk-spec th, .axk-spec td { padding: 0.7rem 1rem; text-align: start; border-block-end: 1px solid var(--axk-line); }
.axk-spec thead th {
  background: var(--axk-sand-100); font-family: var(--axk-font-mono);
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--axk-ink-60); position: sticky; top: 0; z-index: 2;
}
/* Sticky first column so the row label survives horizontal scroll on a phone —
   this is where most spec tables become unusable. */
.axk-spec tbody th {
  position: sticky; inset-inline-start: 0; z-index: 1;
  background: var(--axk-white); font-weight: 500; min-width: 190px;
  box-shadow: 1px 0 0 var(--axk-line);
}
[dir="rtl"] .axk-spec tbody th { box-shadow: -1px 0 0 var(--axk-line); }
.axk-spec td { font-family: var(--axk-font-mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.axk-spec tr[data-highlight] th, .axk-spec tr[data-highlight] td { background: color-mix(in srgb, var(--axk-cool) 11%, var(--axk-white)); font-weight: 600; }
.axk-spec tr[data-active] td { color: var(--axk-navy); }
.axk-spec td[data-dim] { opacity: 0.35; }
.axk-spec__unit { color: var(--axk-ink-60); font-family: var(--axk-font-mono); font-size: 0.72rem; }
.axk-spec__disclaimer { font-size: var(--axk-step--1); color: var(--axk-ink-60); margin-block-start: var(--axk-s2); font-style: italic; }

/* ==================================================== 6  FACILITY MAP */
.axk-map { position: relative; background: var(--axk-deep); border-radius: var(--axk-radius-lg); overflow: hidden; }
.axk-map__canvas {
  position: relative; aspect-ratio: 2 / 1; width: 100%;
  /* Geography is not a reading direction. Pin offsets must resolve against the
     physical left edge in both locales, or every pin mirrors while the map
     underneath it does not. */
  direction: ltr;
}
.axk-map__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.30; }
.axk-pin {
  position: absolute; translate: -50% -50%;
  width: 13px; height: 13px; padding: 0;
  border-radius: 50%; cursor: pointer;
  border: 2px solid var(--axk-deep);
  transition: transform var(--axk-dur) var(--axk-ease), box-shadow var(--axk-dur) var(--axk-ease);
}
.axk-pin--plant { background: var(--axk-accent); }
.axk-pin--rnd   { background: var(--axk-cool); }
.axk-pin:hover, .axk-pin:focus-visible { transform: scale(1.7); box-shadow: 0 0 0 6px rgba(255,255,255,0.16); z-index: 3; }
.axk-pin[aria-expanded="true"] { transform: scale(1.7); z-index: 4; }

.axk-map__card {
  position: absolute; z-index: 6;
  width: 210px; background: var(--axk-white);
  border-radius: var(--axk-radius); overflow: hidden;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,0.55);
  pointer-events: none; opacity: 0;
  transition: opacity var(--axk-dur) var(--axk-ease);
}
.axk-map__card[data-open] { opacity: 1; }
.axk-map__card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; background: var(--axk-sand-100); }
.axk-map__card p { margin: 0; padding: 0.6rem 0.8rem 0.2rem; font-size: var(--axk-step--1); font-weight: 600; color: var(--axk-ink); }
.axk-map__card span { display: block; padding: 0 0.8rem 0.6rem; font-size: 0.7rem; color: var(--axk-ink-60); font-family: var(--axk-font-mono); text-transform: uppercase; letter-spacing: 0.08em; }

.axk-map__legend {
  display: flex; gap: var(--axk-s3); flex-wrap: wrap;
  padding: var(--axk-s2) var(--axk-s3);
  border-block-start: 1px solid rgba(255,255,255,0.12);
  font-size: var(--axk-step--1); color: rgba(255,255,255,0.75);
}
.axk-map__legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
.axk-map__legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ======================================================== 7  TIMELINE */
.axk-timeline { padding-block: var(--axk-s5); overflow: hidden; }
.axk-timeline__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(230px, 24vw, 290px);
  gap: var(--axk-s3); overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-block: var(--axk-s3) var(--axk-s4);
  scrollbar-width: thin;
}
.axk-milestone { scroll-snap-align: center; position: relative; padding-block-start: var(--axk-s3); }
.axk-milestone::before {
  content: ""; position: absolute; inset-block-start: 6px; inset-inline: 0;
  height: 1px; background: var(--axk-line);
}
.axk-milestone::after {
  content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--axk-sand); border: 2px solid var(--axk-line);
}
.axk-milestone[data-key]::after { background: var(--axk-accent); border-color: var(--axk-accent); }
.axk-milestone__year {
  font-family: var(--axk-font-mono); font-size: var(--axk-step-2); font-weight: 700;
  color: var(--axk-ink-60); line-height: 1; margin-block-end: var(--axk-s2);
}
.axk-milestone[data-key] .axk-milestone__year { color: var(--axk-navy); }
.axk-milestone img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--axk-radius); background: var(--axk-sand-100); margin-block-end: var(--axk-s2); }
.axk-milestone p { font-size: var(--axk-step--1); margin: 0; color: var(--axk-ink-60); line-height: 1.55; }
.axk-milestone[data-key] p { color: var(--axk-ink); }

/* ================================================== 8  PRODUCT GALLERY */
.axk-gallery { display: grid; gap: var(--axk-s2); }
.axk-gallery__main {
  aspect-ratio: 4/3; background: var(--axk-sand-100);
  border: 1px solid var(--axk-line); border-radius: var(--axk-radius-lg);
  display: grid; place-items: center; overflow: hidden;
}
.axk-gallery__main img { width: 100%; height: 100%; object-fit: contain; padding: var(--axk-s3); }
.axk-gallery__thumbs { display: flex; gap: var(--axk-s1); overflow-x: auto; }
.axk-thumb {
  flex: 0 0 76px; aspect-ratio: 1; padding: 4px;
  background: var(--axk-white); border: 1.5px solid var(--axk-line);
  border-radius: var(--axk-radius); cursor: pointer;
}
.axk-thumb img { width: 100%; height: 100%; object-fit: contain; }
.axk-thumb[aria-current="true"] { border-color: var(--axk-navy); }

/* ============================================== 9  FEATURE PICTOGRAMS */
.axk-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--axk-s2); }
.axk-feature {
  position: relative; text-align: center; padding: var(--axk-s2) var(--axk-s1);
  background: var(--axk-white); border: 1px solid var(--axk-line);
  border-radius: var(--axk-radius); cursor: help;
  transition: border-color var(--axk-dur) var(--axk-ease);
}
.axk-feature:hover, .axk-feature:focus-visible { border-color: var(--axk-navy); }
.axk-feature img, .axk-feature__glyph {
  width: 34px; height: 34px; margin-inline: auto; margin-block-end: 0.5rem;
  display: grid; place-items: center;
  color: var(--axk-navy); font-family: var(--axk-font-mono); font-size: 0.66rem; font-weight: 700;
}
.axk-feature__label { font-size: 0.72rem; line-height: 1.35; color: var(--axk-ink-60); }
.axk-feature__tip {
  position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%;
  translate: -50% 0; width: max-content; max-width: min(210px, 46vw);
  background: var(--axk-deep); color: var(--axk-white);
  font-size: 0.72rem; line-height: 1.45; text-align: start;
  padding: 0.5rem 0.7rem; border-radius: var(--axk-radius);
  opacity: 0; pointer-events: none; z-index: 5;
  transition: opacity var(--axk-dur) var(--axk-ease);
}
.axk-feature:hover .axk-feature__tip, .axk-feature:focus-within .axk-feature__tip { opacity: 1; }

/* ================================================ 10  PROOF PANELS */
.axk-proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--axk-s3); }
.axk-proof__item { border-block-start: 2px solid var(--axk-navy); padding-block-start: var(--axk-s2); }
.axk-proof__figure {
  font-family: var(--axk-font-mono); font-size: var(--axk-step-2); font-weight: 700;
  color: var(--axk-navy); line-height: 1; margin-block-end: var(--axk-s1);
  font-variant-numeric: tabular-nums;
}
.axk-proof__item h3 { font-size: var(--axk-step-0); margin: 0 0 var(--axk-s1); }
.axk-proof__item p { font-size: var(--axk-step--1); color: var(--axk-ink-60); margin: 0; }

/* Section furniture */
.axk-section { padding-block: var(--axk-s5); }
.axk-section--alt { background: var(--axk-sand-100); border-block: 1px solid var(--axk-line); }
.axk-section--deep { background: var(--axk-deep); color: var(--axk-white); }
.axk-section--deep h2 { color: var(--axk-white); }
.axk-section__head { margin-block-end: var(--axk-s4); max-width: 62ch; }
.axk-section__eyebrow {
  font-family: var(--axk-font-mono); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--axk-accent); margin: 0 0 var(--axk-s1);
}
.axk-section--deep .axk-section__eyebrow { color: var(--axk-cool); }
.axk-section__head h2 { font-size: var(--axk-step-2); margin: 0 0 var(--axk-s2); }
.axk-section__head p { color: var(--axk-ink-60); margin: 0; }
.axk-section--deep .axk-section__head p { color: rgba(255,255,255,0.7); }

.axk-reveal { opacity: 0; transform: translateY(14px); transition: opacity 620ms var(--axk-ease), transform 620ms var(--axk-ease); }
.axk-reveal[data-seen] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .axk-reveal { opacity: 1; transform: none; } }