/* The main page at phone width: version D's stack, and only the parts of it
 * that belong to THIS screen. Ported from mocks/mobile/site/d/mobile-d.css
 * (branch mobile-fable, 9cc2b41) - the hero as the ground plane, the glass on
 * it, and the mosaic of the fifteen. Everything else the screen is written in
 * - the sheet, the row, the band, the card link, the beat - is the kit's
 * (site/phone-stack.css) and is not restated here.
 *
 * Three scopes hold every rule, and they are why the desk page did not move:
 *
 *   @media (max-width: 860px)      site/header.css's own phone breakpoint.
 *   html[data-phone='stack']       this page's own opt-in, declared in the
 *                                  markup (docs/PHONE-KIT.md).
 *   [data-phone-kit='on']          stamped by site/phone-kit.js only after it
 *                                  has built its chrome, so a page whose
 *                                  script never ran keeps the desk page.
 *
 * Inside those three, every selector is a descendant of [data-phone-screen=
 * 'main'] - the one element this screen owns. The fence is what lets D's class
 * names (.glass, .tile, .card-link, .sheet, .name) stand beside the desk rules
 * of the same name that site/hero.css, site/sheet.css, site/tiles.css and
 * site/cards.css declare on this very page. Where one of those reaches a node
 * of D's, it is answered here by name and the answer says which file it is
 * answering; nothing is left to specificity by luck.
 *
 * No colour, radius, size or duration below is a literal: all of them resolve
 * through design/tokens.css, design/palette.css or site/phone.tokens.css. */

@media (max-width: 860px) {
  /* --- the ground plane: the photograph ---------------------------------- */
  /* The hero is the plane the stack rises from, so it has no edge and throws
     no shadow. It is one viewport tall LESS the peek, and the peek is the
     edge of the first sheet showing under it at rest - the stack's whole
     affordance, and the same amount VTB leaves of its own panel over the hero
     (refs/vtb/mobile/rec-1/NOTES.md). */
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='main'] .sheet-hero {
    height: calc(100svh - var(--resurs-m-peek));
    min-height: 560px;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--resurs-ink);
  }

  /* site/hero.css declares this same class for the desk beat: a different
     file, a different crop, a different origin. Every property that differs
     is answered here; the URL arrives in --hero-photo from site/phone-main.js,
     which reads it off body[data-assets] rather than composing a path. */
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='main'] .hero-photo {
    position: absolute;
    inset: 0;
    background-image: var(--hero-photo);
    background-size: cover;
    background-position: var(--resurs-m-hero-crop);
    /* The photograph recedes as the first sheet arrives - the two planes the
       desktop reads, driven by the scroll position the kit reports. */
    transform: scale(calc(1 + 0.04 * var(--rise, 0)));
    transform-origin: 50% 40%;
    will-change: transform;
  }
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='main'] .hero-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--resurs-photo-scrim), transparent 34%);
    opacity: calc(1 - 0.5 * var(--rise, 0));
  }

  /* The panel keeps the desktop's tokens and takes the phone's geometry: it
     sits at the foot of the frame, a peek and a hair above the first sheet.
     site/hero.css's own .glass answers a canvas with room beside the panel. */
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='main'] .glass {
    position: relative;
    width: auto;
    margin: 0 var(--resurs-gutter) calc(var(--resurs-m-peek) + 16px);
    padding: 26px 22px 22px;
    border-radius: var(--resurs-radius-panel);
    border: 1px solid var(--resurs-glass-edge);
    background: var(--resurs-glass-fill);
    backdrop-filter: blur(var(--resurs-glass-blur)) saturate(1.1);
    -webkit-backdrop-filter: blur(var(--resurs-glass-blur)) saturate(1.1);
    color: var(--resurs-on-photo);
  }
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='main'] .hero-headline {
    max-width: none;
    font-size: var(--resurs-size-display);
    font-weight: 300;
    line-height: 1.14;
    letter-spacing: -0.025em;
  }
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='main'] .hero-lead {
    max-width: none;
    margin-top: 14px;
    font-size: var(--resurs-size-lead);
    line-height: 1.55;
    color: var(--resurs-on-photo-dim);
  }
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='main'] .glass .pill-solid {
    margin-top: 22px;
    width: 100%;
    justify-content: space-between;
    height: auto;
    min-height: 48px;
    padding: 6px 6px 6px 22px;
  }

  /* KIT-REQUEST (site/phone-kit.css:169, .icon-chevron): the chevron that ends
     a row is fenced to [data-phone-region], the chrome's own attribute, while
     the row it ends is vocabulary and lives in site/phone-stack.css. So a row
     built by an arm gets the class and none of the rule, and its chevron
     renders as an inline box instead of a grid one.
     mocks/mobile/site/d/mobile-d.css:113 is the value. */
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='main'] .icon-chevron {
    display: grid;
    color: var(--resurs-ink-muted);
    flex: none;
  }

  /* --- the mosaic: the fifteen, two across, by contour ------------------- */
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='main'] .mosaic-group {
    margin-top: var(--resurs-m-gap);
  }
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='main'] .mosaic-group + .mosaic-group {
    margin-top: var(--resurs-m-gap-lg);
  }
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='main'] .group-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
    font-size: var(--resurs-size-small);
    color: var(--resurs-ink-muted);
  }
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='main'] .group-head .group-name {
    font-size: var(--resurs-size-body);
    font-weight: 500;
    color: var(--resurs-ink);
  }
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='main'] .group-head .count {
    font-variant-numeric: tabular-nums;
  }
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='main'] .mosaic {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  /* VTB's product cell - the object above its label (refs/vtb/mobile/rec-1/
     NOTES.md, the «Продукты ВТБ» grid) - set two across because the department
     names are long single words and a third column breaks them. site/tiles.css
     declares .tile for the desk mosaic, where the object sits BESIDE its name
     in a five-column row; every property of that row is answered here. */
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='main'] .tile {
    display: grid;
    gap: 10px;
    align-content: start;
    align-items: start;
    min-height: 104px;
    padding: 12px;
    border-radius: var(--resurs-radius-tile);
    background: var(--resurs-surface);
    color: var(--resurs-ink);
  }
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='main'] .tile .plate {
    width: var(--resurs-m-plate-sm);
    height: var(--resurs-m-plate-sm);
  }
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='main'] .tile .name {
    font-size: var(--resurs-size-small);
    line-height: 1.3;
    min-width: 0;
  }

  /* site/cards.css pushes .card-link to the foot of a desk card (margin-top:
     auto) and pads it away from the card's body. Inside a sheet it is a link
     on its own line, as site/phone-stack.css draws it.
     This one selector deliberately drops [data-phone='stack'] and so weighs
     less than site/phone-stack.css's own `.band .card-link { margin-top: -4px }`:
     it has to outrank a bare .card-link and nothing else. Written heavier, it
     would silently delete the kit's rule and the club band would grow 4px. */
  html[data-phone-kit='on'] [data-phone-screen='main'] .card-link {
    margin-top: 0;
    padding-top: 0;
  }

  /* KIT-REQUEST (site/phone-stack.css, .band): the port reads
     `margin-top: var(--resurs-m-gap); gap: 12px; padding: 20px 18px`, where
     mocks/mobile/site/d/mobile-d.css:274 reads `margin-top: 12px; gap: 14px;
     padding: 22px 20px 20px`. --resurs-m-gap is 22px, so the tinted band sits
     10px lower, is 2px tighter inside and 2px narrower each side than the
     design he picked. Until the kit carries the number, this screen's two
     bands - the flagship and the club - hold it here. */
  html[data-phone='stack'][data-phone-kit='on'] [data-phone-screen='main'] .band {
    margin-top: 12px;
    gap: 14px;
    padding: 22px 20px 20px;
  }
}