/* home-story.css — "About" tabbed block (Репутация / Команда / Сервис).
   Each tab swaps the LEFT visual (crest / team photo / review card) and the
   title + text on the right; the pill row never moves.

   Architecture: the stage is split into two independent columns —
     .home-story__media  → the swapping visuals (stacked, only one shown)
     .home-story__copy   → the swapping texts (stacked) + the static pill row
   Because the texts are stacked in a grid cell, that cell always sizes to the
   TALLEST tab (in any language), so the pill row sits at a fixed spot and does
   not shift when you switch tabs. No JS positioning, no absolute positioning.

   Breakpoints (canon): mobile <=767 · tablet 768-1023 · desktop >=1024 · large >=1440 · xl >=1920
   Up to 1023: single column (visual on top, text below, pills pinned to the
   bottom, content centred vertically). From 1024: two columns, the visual on the
   left and [text + pills] on the right, the whole block centred against the
   visual. Flex + grid only. */

/* ===================== Shell + frosted background ===================== */
.home-story {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: grid;
  color: #fff;
}

.home-story__backdrop,
.home-story__inner {
  grid-area: 1 / 1;
}

.home-story__backdrop {
  min-height: 100%;
  background: linear-gradient(180deg, rgba(13, 8, 5, 0.34) 0%, rgba(10, 5, 3, 0.64) 100%), rgba(193, 247, 255, 0.1);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  pointer-events: none;
}

/* ===================== Mobile base (<=767) ===================== */
.home-story__inner {
  position: relative;
  z-index: 1;
  max-width: 375px;
  min-height: 100svh;
  margin: 0 auto;
  padding: 84px 16px 40px;
  display: flex;
  flex-direction: column;
}

/* up to 1023 the copy wrapper dissolves so the visual, the text and the pills are
   siblings of the stage: the visual sits at the top, the text hangs 48px under it
   (the one constant across all three Figma tabs) and the pills are pinned to the
   bottom, with the slack falling between the text and the pills — exactly how the
   design distributes it. */
.home-story__stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.home-story__copy {
  display: contents;
}

.home-story__media {
  margin-top: 0;
  display: grid;
  justify-items: stretch;
}

.home-story__visual {
  grid-area: 1 / 1;
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
}

/* Every visual / text stays stacked in its cell (grid-area 1/1) so the cell
   always sizes to the TALLEST tab. The content block therefore keeps the same
   height in every tab — switching a tab never reflows the layout, so nothing
   jumps on mobile and the pills can't flicker. Inactive parts are hidden, not
   removed from the flow. */
.home-story__visual:not(.is-active),
.home-story__content:not(.is-active) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.home-story__logotype {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 195px;
  object-fit: contain;
}

/* Up to 1023 the media box is sized to the TALLEST tab (the photo, 307px) so that
   switching tabs never reflows. The shorter visuals — the logotype (195) and the
   review — would therefore sit centred in it with dead space above AND below, and
   that dead space below is invisible padding no margin can close: it is why the gap
   under the logo measured 104px instead of the design's 48. Pin every visual to the
   box's bottom edge, so the 48px below is measured from the artwork's REAL bottom on
   all three tabs, as in Figma. Desktop builds the media column itself — must not
   leak there. */
@media (max-width: 1023px) {
  .home-story__visual {
    align-items: flex-end;
  }
}

.home-story__image {
  display: block;
  width: 100%;
  height: 307px;
  object-fit: cover;
}

.home-story__texts {
  /* Figma pins the text 48px under the visual on all three tabs (nodes 1515:39933 /
     39966 / 39996) and lets the leftover space fall between the text and the pills
     (167 / 60 / 93 there). The auto bottom margin reproduces that and keeps the
     pills on the bottom edge. */
  margin-top: 48px;
  margin-bottom: auto;
  display: grid;
}

.home-story__content {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
}

.home-story .home-display-subtitle {
  margin: 0;
  color: #fff;
  font-size: 50px;
  line-height: 40px;
  letter-spacing: 0;
}

.home-story__text {
  margin: 0;
  max-width: none;
  color: #fff;
  font-size: 20px;
  line-height: 26px;
}

.home-story__tags {
  /* Pinned to the bottom by the texts' auto bottom margin above. */
  margin: 0;
  margin-top: 0;
  padding-top: 32px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.home-story__tag {
  flex: 1 1 0;
  min-width: 0;
  min-height: 47px;
  padding: 0 8px;
  border: 1px solid #c6c1a1;
  border-radius: 50px;
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.home-story__tag:hover,
.home-story__tag:focus-visible {
  background: rgba(255, 252, 237, 0.16);
}

.home-story__tag.is-active,
.home-story__tag[aria-selected="true"] {
  border-color: #c6c1a1;
  background: #c6c1a1;
  color: #121212;
}

.home-scroll-next {
  display: none;
}

/* ---- Review card (Сервис tab) — mobile ---- */
.home-story-review {
  width: 100%;
  margin: 0;
  padding: 24px;
  border: 1px solid #c6c1a1;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  column-gap: 24px;
  align-items: center;
}

.home-story-review__avatar {
  width: 110px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 252, 237, 0.16);
}

.home-story-review__avatar img {
  display: block;
  width: 228%;
  height: 228%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: translate(-18.9%, -6.1%);
}

.home-story-review__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.home-story-review__stars {
  width: 99px;
  height: 16px;
  margin: 0 0 16px;
  object-fit: contain;
}

.home-story-review__quote {
  margin: 0;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  line-height: 25px;
}

.home-story-review__author {
  margin-top: 16px;
  color: #fff;
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.home-story-review__author span {
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 16px;
}

.home-story-review__author small {
  color: #898989;
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 10px;
}

@media (max-width: 374px) {
  .home-story__inner {
    padding-inline: 12px;
  }
}

/* Short portrait phones (e.g. iPhone SE / 8 — 375x667). The Figma frame is 775 tall,
   so its 48px media→text gap cannot fit here — tighten the vertical rhythm instead.
   padding-top MUST stay clear of the 60px fixed header: at 36px the top of the
   artwork slid underneath it (the review's stars were visibly clipped). */
@media (max-width: 767px) and (max-height: 740px) and (orientation: portrait) {
  .home-story__inner {
    padding-top: 68px;
  }

  .home-story__image {
    height: 240px;
  }

  .home-story__texts {
    margin-top: 32px;
  }

  .home-story__tags {
    padding-top: 24px;
  }
}

/* ===================== Tablet 768-1023: centered single column ===================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .home-story__inner {
    max-width: 630px;
    padding: 96px 32px 47px;
  }

  .home-story__logotype {
    height: 296px;
  }

  .home-story__image {
    height: 433px;
  }

  .home-story .home-display-subtitle {
    font-size: 60px;
    line-height: 40px;
  }

  .home-story__tag {
    flex: 0 0 125px;
    width: 125px;
    padding: 0 18px;
  }

  /* Review card — 768 */
  .home-story-review {
    padding: 48px;
    border-radius: 30px;
    grid-template-columns: 160px minmax(0, 1fr);
    column-gap: 48px;
  }

  .home-story-review__avatar {
    width: 160px;
  }

  .home-story-review__stars {
    width: 143px;
    height: 23px;
    margin-bottom: 48px;
  }

  .home-story-review__author {
    margin-top: 48px;
    gap: 10px;
  }

  .home-story-review__author span {
    font-size: 20px;
    line-height: 20px;
  }

  .home-story-review__author small {
    font-size: 14px;
    line-height: 14px;
  }
}

/* Landscape phones (short viewport): shrink the visual + type so it fits */
@media (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) {
  .home-story__inner {
    padding-top: 72px;
    padding-bottom: 16px;
  }

  .home-story__logotype {
    height: 160px;
  }

  .home-story__image {
    height: 220px;
  }

  .home-story .home-display-subtitle {
    font-size: 42px;
    line-height: 38px;
  }

  .home-story__text {
    font-size: 16px;
    line-height: 21px;
  }
}

/* ===================== Desktop >=1024: two columns ===================== */
@media (min-width: 1024px) {
  .home-story {
    --story-content-w: min(100% - 96px, 928px);
    --story-media-w: 452px;
    --story-copy-w: 397px;
    --story-gap: 79px;
    --story-media-h: 400px;
  }

  /* the stage and the scroll arrow share one grid cell: the stage is centred in
     the full viewport height, the arrow overlays at the bottom — so the arrow
     never pushes the content above centre */
  .home-story__inner {
    width: var(--story-content-w);
    max-width: none;
    min-height: 100svh;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  /* stage is the vertically-centred two-column row */
  .home-story__stage {
    grid-area: 1 / 1;
    align-self: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--story-gap);
  }

  /* left column — visuals stacked, fixed-height box, centred */
  .home-story__media {
    flex: 0 0 var(--story-media-w);
    width: var(--story-media-w);
    min-height: var(--story-media-h);
    margin-top: 0;
    align-items: center;
    justify-items: stretch;
  }

  .home-story__visual {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: var(--story-media-h);
  }

  .home-story__logotype {
    width: 100%;
    max-width: var(--story-media-w);
    height: clamp(299px, 27vw, 362px);
  }

  .home-story__image {
    width: 100%;
    max-width: var(--story-media-w);
    height: var(--story-media-h);
  }

  /* right column — texts (stacked) + static pills */
  .home-story__copy {
    display: flex;
    flex-direction: column;
    gap: 48px;
    flex: 0 0 var(--story-copy-w);
    width: var(--story-copy-w);
  }

  /* texts are stacked + bottom-aligned, so every tab's last line lands on the
     same baseline 48px above the pills — short tabs don't leave a big gap */
  .home-story__texts {
    margin-top: 0;
    /* cancel the ≤1023 auto-centring: desktop is a two-column layout */
    margin-bottom: 0;
    display: grid;
    align-items: end;
  }

  .home-story__content {
    gap: 16px;
    align-items: flex-start;
    text-align: left;
  }

  .home-story .home-display-subtitle {
    font-size: 60px;
    line-height: 40px;
  }

  .home-story__text {
    font-size: 20px;
    line-height: 26px;
  }

  .home-story__tags {
    margin-top: 0;
    padding-top: 0;
    justify-content: flex-start;
    gap: 8px;
  }

  .home-story__tag {
    flex: 0 0 125px;
    width: 125px;
    min-width: 125px;
    padding: 0 18px;
  }

  /* Review card — desktop base (1024) */
  .home-story-review {
    width: 100%;
    max-width: var(--story-media-w);
    min-height: var(--story-media-h);
    padding: 48px 24px;
    border-radius: 30px;
    grid-template-columns: 140px minmax(0, 1fr);
    column-gap: 24px;
  }

  .home-story-review__avatar {
    width: 140px;
  }

  .home-story-review__stars {
    width: 143px;
    height: 23px;
    margin-bottom: 24px;
  }

  .home-story-review__quote {
    font-size: 20px;
    line-height: 25px;
  }

  .home-story-review__author {
    margin-top: 24px;
    gap: 8px;
  }

  .home-story-review__author span {
    font-size: 20px;
    line-height: 20px;
  }

  .home-story-review__author small {
    font-size: 14px;
    line-height: 14px;
  }

  /* arrow overlays the stage cell at the bottom; only shown from 1280 (where the
     immersive scroll is active) — the 1024 design has no arrow */
  .home-scroll-next {
    display: none;
    grid-area: 1 / 1;
    justify-self: center;
    align-self: end;
    margin: 0 0 48px;
  }
}

@media (min-width: 1280px) {
  .home-scroll-next {
    display: block;
  }
}

/* ===================== Large desktop >=1440 ===================== */
@media (min-width: 1440px) {
  .home-story {
    --story-content-w: min(100% - 130px, 1310px);
    --story-media-w: 640px;
    --story-copy-w: 559px;
    --story-gap: 111px;
    --story-media-h: 503px;
  }

  .home-story__logotype {
    height: clamp(362px, 25vw, 426px);
  }

  .home-story .home-display-subtitle {
    font-size: 70px;
    line-height: 70px;
  }

  .home-story__text {
    font-size: 24px;
    line-height: 1.18;
    letter-spacing: -0.96px;
    max-width: 520px;
  }

  .home-story__tags {
    gap: 18px;
  }

  .home-story__tag {
    flex: 0 0 140px;
    width: 140px;
    min-width: 140px;
    padding: 0 32px;
    font-size: 20px;
  }

  /* Review card — 1440 */
  .home-story-review {
    padding: 48px;
    column-gap: 48px;
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .home-story-review__avatar {
    width: 230px;
  }

  .home-story-review__stars {
    margin-bottom: 48px;
  }

  .home-story-review__quote {
    font-size: 30px;
    line-height: 38px;
  }

  .home-story-review__author {
    margin-top: 48px;
    gap: 10px;
  }

  .home-story-review__author span {
    font-size: 26px;
    line-height: 28px;
  }

  .home-story-review__author small {
    font-size: 16px;
    line-height: 16px;
  }
}

/* ===================== XL >=1920 ===================== */
@media (min-width: 1920px) {
  .home-story {
    --story-content-w: min(100% - 390px, 1530px);
    --story-media-w: 753px;
    --story-copy-w: 598px;
    --story-gap: 178px;
    --story-media-h: 503px;
  }

  .home-story__logotype {
    height: clamp(426px, 22.2vw, 480px);
  }
}

/* ===================== Tab transition ===================== */
.home-story__visual.is-active {
  animation: home-story-visual-in 560ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.home-story__content.is-active {
  animation: home-story-text-in 480ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* keep the leaving tab visible while it fades out (overrides the desktop hide) */
.home-story__visual.is-leaving,
.home-story__content.is-leaving {
  visibility: visible;
  opacity: 1;
  pointer-events: none;
  animation: home-story-out 200ms ease both;
}

@keyframes home-story-visual-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes home-story-text-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes home-story-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-story__visual.is-active,
  .home-story__content.is-active,
  .home-story__visual.is-leaving,
  .home-story__content.is-leaving {
    animation: none;
  }
}