/* /ru: case blocks from 08-final/style.css (09-all has none) + Cyrillic. Written by tools/build-ru.py: edit there. */
@font-face { font-family: "Archivo"; src: url("../fonts/inter-tight-cyr.woff2") format("woff2"); font-weight: 400 500; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* Inter Tight is already narrow: the EN tracking glues Cyrillic caps, the 0.86 leading lets Ё hit the line above */
:root { --track-d: -0.02em; } .caps { line-height: 0.96; } .t3 { letter-spacing: -0.02em; }

.case__top { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); position: relative; }
.case__no { grid-column: 8 / 13; grid-row: 1; align-self: start; margin-top: -0.06em; text-transform: none; }
.case__hero { grid-column: 1 / 7; grid-row: 1 / 3; margin: 0; }
.case__hero img { width: 100%; display: block; }
.case__text { grid-column: 8 / 13; grid-row: 2; align-self: end; display: flex; flex-direction: column; align-items: flex-start; }
.case__text .t3 { margin-bottom: 20px; }
.case__text p { max-width: 30em; }
.case__lbl { margin: 28px 0 8px; opacity: .5; }
.facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 40px; margin: 32px 0 28px; }
.facts dt { opacity: .5; }
.facts dd { margin: 0; }
.offer__me .offer__mail { display: inline-block; margin-right: 1.2em; }   /* Telegram and mail on one line: keeps the block on one screen */
/* Russian runs longer than English: pricing and contact get tighter padding to stay on one screen at 1440 x 900 */
.pricing, .offer { padding-top: clamp(56px, 5vw, 80px); padding-bottom: clamp(56px, 5vw, 80px); }
@media (min-width: 761px) {
  .prices li { padding: 16px 0 18px; }   /* 11.11: the contract wording (от, шахматка, без НДС) made 20/22 run 15 px past 900 */
  .offer__text { margin-top: 32px; }
  .offer__me { margin-top: 40px; }
  .offer__me .offer__mail { margin-top: 20px; }
}
@media (min-width: 761px) {
  .case { min-height: 100svh; padding-top: 64px; padding-bottom: 64px; display: flex; align-items: center; }
  .case__top { width: 100%; }
  .case__hero img { height: calc(100svh - 128px); object-fit: cover; }
}
@media (max-width: 760px) {
  .case__no { grid-column: 1 / 13; margin-bottom: 28px; }
  .case__hero { grid-column: 1 / 13; grid-row: 2; }
  .case__hero img { aspect-ratio: 16 / 10; object-fit: cover; }   /* 4:5 pushed the case intro past one phone screen */
  .case { padding-top: 48px; padding-bottom: 48px; }
  .case__no { margin-bottom: 18px; }
  .case__text { margin-top: 24px; }
  .case__lbl { margin-top: 18px; }
  .facts { margin: 20px 0; }
  .case__text { grid-column: 1 / 13; grid-row: 3; margin-top: 40px; }
  .facts { gap: 8px 22px; }
}
/* Lev 09.11, desktop: "text runs over". Russian caps are long words (НАСТОЯЩИМ, КЛИКАБЕЛЕН = 6.4 em): the heading size
   follows its column, the longest word always fits */
.ints__sh, .sel__sh { container-type: inline-size; }
.ints__sh h2.t2, .sel__sh h2.t2 { font-size: min(var(--t2), calc(100cqi / 6.6)); }
/* Facade selector, wide screens: copy and tabs on top, the floor below as large as the left side allows, tower on the
   right (the copy | floor | tower row left the floor 400 px wide in a 900 px screen and ran the heading into it) */
@media (min-width: 1100px) {
  .sel { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr auto auto; }
  .sel__sh, .sel__tabs, .sel__fig, .sel__meta, .sel__go { grid-column: 1; }
  .sel__tabs { grid-row: 2; margin: 4px 0 0; }
  .sel__fig { grid-row: 3; padding: clamp(16px, 3vh, 32px) var(--pad) clamp(16px, 3vh, 32px) 0; }
  .sel__meta { grid-row: 4; }
  .sel__go { grid-row: 5; }
  .sel__bld { grid-column: 2; grid-row: 1 / 6; }
}
/* "Too much air": the process block is as tall as its four steps, not a whole screen of white around them */
@media (min-width: 761px) {
  .process { min-height: 0; padding-top: clamp(72px, 10vh, 112px); padding-bottom: clamp(72px, 10vh, 112px); }
  .process .sec__head { margin-bottom: 40px; }
  .steps .num { margin-bottom: 28px; }
  .steps .t3 { margin-bottom: 12px; min-height: 0; }
}
/* narrow phones (enlarged system text): Telegram and mail one under the other, no side margin pushing the page wider */
@media (max-width: 359px) { .offer__me .offer__mail { display: block; margin-right: 0; } }
/* first screen (launch 10.11): one filled contact button, the 48-hour offer link beside it */
.hero__foot { max-width: 440px; }
.hero__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.hero__cta { background: #fff; color: var(--ink); border-color: #fff; }
.hero__cta:hover { background: transparent; color: #fff; }
/* offer on the site (C2, 10.11): the term of a package sits under its name like the price beside it, what «от» covers
   sits over the price column, the process gets the total term on the right and the acceptance rule under the steps */
.pk__d { display: block; margin-top: 6px; opacity: .5; }
.pricing .sec__aside { max-width: 24em; }
.process .terms { margin-top: 28px; }
@media (min-width: 761px) { .pricing .sec__head { margin-bottom: 40px; } }
@media (max-width: 760px) {
  .pricing .sec__aside { max-width: 15em; text-align: right; }
  .process .terms { margin-top: 0; font-size: 14px; }
}
/* 11.11, contract wording on phones: the same blocks stay one screen, only the vertical air shrinks (no type changes) */
@media (max-width: 760px) {
  .pricing, .offer { padding-top: 40px; padding-bottom: 40px; }
  .process { padding-top: 32px; padding-bottom: 32px; }
  .steps li { padding-bottom: 20px; }
}
@media (max-width: 760px) and (min-height: 701px) and (max-height: 820px) {   /* 360 x 800: pricing ran 873 */
  section.sec.pricing { padding-top: 28px; padding-bottom: 28px; }
  .pricing .prices li { padding: 10px 0 12px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  section.sec.process { padding-top: 22px; padding-bottom: 22px; }
  .process .sec__head { gap: 8px; margin-bottom: 10px; }
  .process .steps > li { padding: 10px 0 10px; }
  .process .steps .num { margin-bottom: 8px; }
  .process .steps .t3 { margin-bottom: 6px; }
  section.sec.offer { padding-top: 28px; padding-bottom: 28px; }
  .offer .offer__text { margin-top: 20px; }
}