/* ====================================================================
   CASTA.AGENCY — layout.css
   Каркас страницы: мобильная шапка, левый сайдбар, верхняя
   контакт-полоса, main, обёртка секции, футер-строка.
   Брейкпоинты: 640 / 768 / 1024 px (см. tokens.css).
   ==================================================================== */

/* ------------------------------ Каркас --------------------------- */

.casta-shell {
  min-height: 100vh;
  background-color: var(--casta-color-bg);
}

@media (min-width: 1024px) {
  .casta-shell__columns {
    display: flex;
  }
}

.casta-main {
  width: 100%;
}

@media (min-width: 1024px) {
  .casta-main {
    width: var(--casta-main-w);
  }
}

/* ------------------------ Мобильная шапка ------------------------ */
/* Как в макете: лого + горизонтально скроллящееся меню, без бургера. */

.casta-mobilebar {
  position: sticky;
  top: 0;
  z-index: var(--casta-z-header);
  border-bottom: var(--casta-hairline-w) solid var(--casta-color-hairline);
  background-color: var(--casta-color-bg-90);
  padding: var(--casta-space-3) var(--casta-space-5) 0;
  -webkit-backdrop-filter: blur(var(--casta-blur));
  backdrop-filter: blur(var(--casta-blur));
}

@media (min-width: 1024px) {
  .casta-mobilebar {
    display: none;
  }
}

.casta-mobilebar__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--casta-space-3);
}

.casta-mobilebar__nav {
  margin: 0 calc(-1 * var(--casta-space-5)) var(--casta-space-3);
  padding: 0 var(--casta-space-5);
  overflow-x: auto;
}

.casta-mobilebar__list {
  display: flex;
  align-items: center;
  gap: var(--casta-space-5);
  white-space: nowrap;
}

.casta-mobilebar__link {
  color: var(--casta-color-ink-70);
  transition: color var(--casta-dur-fast) var(--casta-ease);
}

.casta-mobilebar__link:hover,
.casta-mobilebar__link[aria-current="page"] {
  color: var(--casta-color-accent);
}

.casta-mobilebar__link--audit {
  display: flex;
  align-items: center;
  gap: var(--casta-space-2);
  color: var(--casta-color-accent);
}

.casta-mobilebar__link--audit:hover {
  color: var(--casta-color-ink);
}

/* ------------------------------ Лого ------------------------------ */

.casta-brand {
  display: flex;
  align-items: center;
  gap: var(--casta-space-2);
  font-family: var(--casta-font-display);
  font-size: var(--casta-fs-lg);
  letter-spacing: var(--casta-ls-tight);
  color: var(--casta-color-ink);
}

.casta-brand__mark {
  width: var(--casta-size-icon-md);
  height: var(--casta-size-icon-md);
  flex-shrink: 0;
  color: var(--casta-color-ink);
}

.casta-brand__dot {
  color: var(--casta-color-accent);
}

.casta-brand--sidebar {
  gap: var(--casta-space-2-5);
  font-size: var(--casta-fs-2xl);
  line-height: var(--casta-lh-none);
}

.casta-brand--sidebar .casta-brand__mark {
  width: var(--casta-size-icon-lg);
  height: var(--casta-size-icon-lg);
}

/* ----------------------------- Сайдбар ---------------------------- */

.casta-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .casta-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    height: 100vh;
    /* Страховка под более длинные подписи (украинская версия): если
       содержимое сайдбара перестанет помещаться в экран, появится
       собственная прокрутка вместо срезанного низа. */
    overflow-y: auto;
    width: var(--casta-sidebar-w);
    flex-direction: column;
    justify-content: space-between;
    border-right: var(--casta-hairline-w) solid var(--casta-color-hairline);
    padding: var(--casta-space-8) var(--casta-space-10);
  }
}

.casta-sidebar__tagline {
  margin-top: var(--casta-space-2);
}

.casta-sidebar__nav {
  margin-top: var(--casta-space-6);
  border-top: var(--casta-hairline-w) solid var(--casta-color-hairline);
}

.casta-sidebar__item {
  border-bottom: var(--casta-hairline-w) solid var(--casta-color-hairline);
}

.casta-sidebar__link {
  display: block;
  padding: var(--casta-space-2-5) 0;
  font-size: var(--casta-fs-sm);
  letter-spacing: var(--casta-ls-wide);
  color: var(--casta-color-ink-75);
  transition: color var(--casta-dur-fast) var(--casta-ease);
}

.casta-sidebar__link:hover,
.casta-sidebar__link[aria-current="page"] {
  color: var(--casta-color-accent);
}

.casta-sidebar__cta {
  margin-top: var(--casta-space-6);
}

.casta-sidebar__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.casta-sidebar__progress-count {
  color: var(--casta-color-accent);
}

/* --------------------- Верхняя контакт-полоса --------------------- */

.casta-topbar {
  display: none;
}

@media (min-width: 1024px) {
  .casta-topbar {
    position: sticky;
    top: 0;
    z-index: var(--casta-z-topbar);
    display: block;
    border-bottom: var(--casta-hairline-w) solid var(--casta-color-hairline);
    background-color: var(--casta-color-ink);
    color: var(--casta-color-on-ink);
  }
}

.casta-topbar__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
}

.casta-topbar__item {
  display: flex;
  align-items: center;
  padding: var(--casta-space-3) var(--casta-space-5);
}

.casta-topbar__item + .casta-topbar__item {
  border-left: var(--casta-hairline-w) solid var(--casta-color-on-ink-15);
}

.casta-topbar__link {
  display: block;
  transition: color var(--casta-dur-fast) var(--casta-ease);
}

.casta-topbar__link:hover {
  color: var(--casta-color-accent);
}

.casta-topbar__content {
  display: flex;
  align-items: center;
  gap: var(--casta-space-3);
}

.casta-topbar__icon {
  width: var(--casta-size-icon-sm);
  height: var(--casta-size-icon-sm);
  flex-shrink: 0;
  color: var(--casta-color-accent);
}

.casta-topbar__label {
  font-size: var(--casta-fs-topbar);
  line-height: var(--casta-lh-tight);
  letter-spacing: var(--casta-ls-topbar);
  text-transform: uppercase;
}

/* ------------------------------ Секция ---------------------------- */

.casta-section {
  border-bottom: var(--casta-hairline-w) solid var(--casta-color-hairline);
  padding: var(--casta-space-14) var(--casta-space-5);
}

@media (min-width: 768px) {
  .casta-section {
    padding: var(--casta-space-20) var(--casta-space-14);
  }
}

@media (min-width: 1024px) {
  .casta-section {
    padding-left: var(--casta-space-20);
    padding-right: var(--casta-space-20);
  }
}

/* Последняя контентная секция: рамку снизу рисует уже .casta-footer */
.casta-section--last {
  border-bottom: 0;
  padding-bottom: var(--casta-space-10);
}

.casta-section__body {
  margin-top: var(--casta-space-6);
}

/* Заголовок секции (константа H2 из исходника) */
.casta-section__title {
  font-family: var(--casta-font-display);
  font-weight: var(--casta-fw-regular);
  font-size: var(--casta-fs-display-h2);
  line-height: var(--casta-lh-display);
  letter-spacing: var(--casta-ls-display);
}

/* Вводный абзац после заголовка секции (mt-7 max-w-3xl, lg/base/sm).
   Этап 4: вынесен из блока страницы аудита — используется на аудите,
   portfolio и странице кейса. Разброс mt-6/7 и max-w-2xl/3xl — шум */
.casta-section__intro {
  margin-top: var(--casta-space-7);
  max-width: var(--casta-measure-3xl);
  font-size: var(--casta-fs-lg);
  line-height: var(--casta-lh-relaxed);
  color: var(--casta-color-taupe);
}

.casta-section__intro--base {
  font-size: var(--casta-fs-base);
}

.casta-section__intro--sm {
  font-size: var(--casta-fs-sm);
}

/* -------------------- Eyebrow секции + орнамент ------------------- */

.casta-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--casta-space-5);
  color: var(--casta-color-ink);
}

.casta-eyebrow__label {
  white-space: pre;
}

.casta-eyebrow__ticks {
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--casta-dur-ticks) var(--casta-ease-out-expo);
}

.casta-eyebrow[data-casta-state="in"] .casta-eyebrow__ticks {
  clip-path: inset(0 0 0 0);
}

.casta-eyebrow__svg {
  width: var(--casta-orn-w);
  height: var(--casta-orn-h);
  flex-shrink: 0;
  overflow: visible;
}

/* --------------------- Появление при скролле ----------------------- */

.casta-reveal {
  opacity: 0;
  transform: translateY(var(--casta-space-6));
  transition:
    opacity var(--casta-dur-reveal-opacity) var(--casta-ease),
    transform var(--casta-dur-reveal-move) var(--casta-ease-out-expo);
  transition-delay: var(--casta-delay-reveal);
}

.casta-reveal[data-casta-state="in"] {
  opacity: 1;
  transform: none;
}

/* -------------------------- Футер-строка -------------------------- */
/* Футер сайта. Вынесен из секции «Контакты» отдельным блоком —
   это будущий footer.php дочерней темы, общий для всех страниц.
   Горизонтальные отступы повторяют .casta-section, чтобы содержимое
   стояло по той же вертикали. */

.casta-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--casta-space-4);
  border-top: var(--casta-hairline-w) solid var(--casta-color-hairline);
  padding: var(--casta-space-6) var(--casta-space-5) var(--casta-space-10);
}

@media (min-width: 768px) {
  .casta-footer {
    padding: var(--casta-space-8) var(--casta-space-14) var(--casta-space-12);
  }
}

@media (min-width: 1024px) {
  .casta-footer {
    padding-left: var(--casta-space-20);
    padding-right: var(--casta-space-20);
  }
}

.casta-footer__brand {
  font-family: var(--casta-font-display);
  font-size: var(--casta-fs-lg);
}