/**
 * @file engine.css — вид движка событий поверх Mercury (обычный CSS, пересборка Tailwind не нужна).
 * Все цвета, шрифты и размеры — из токенов (src/theme.css): сайт меняет токены, а не этот файл.
 * Порядок: основа, шапка и крошки, заголовки, сетки карточек, страница мероприятия, формы, подвал.
 */

/* ---------- основа ---------- */
html { scroll-behavior: smooth; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* шкала заголовков h1–h6, абзацы, списки, таблицы, формы — в css/base.css (слой base) */
a { color: var(--primary); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ee-focus); outline-offset: 2px; border-radius: 4px; }
img { max-width: 100%; height: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 2000; background: var(--background); padding: .5rem 1rem; border-radius: var(--radius); }
.skip-link:focus { top: 1rem; }

/* ---------- шапка, крошки, заголовок страницы ---------- */
header[role="banner"] { border-bottom: 1px solid var(--border); background: var(--background); }
header[role="banner"] > .container { max-width: var(--ee-container); padding-top: .75rem; }
header[role="banner"] > .container h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem) !important;
  margin: .25rem 0 .5rem;
}
.ee-breadcrumb { max-width: var(--ee-container); margin: .75rem auto 0; font-size: .875rem; }
.ee-breadcrumb ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; list-style: none; margin: 0; padding: 0; color: var(--muted-foreground); }
.ee-breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: var(--input); }
.ee-breadcrumb a { color: var(--muted-foreground); }
.ee-breadcrumb a:hover { color: var(--primary); }

/* ---------- основной поток (страницы не из Canvas: списки, мероприятие, формы) ---------- */
.layout-content .region-content > *:not(section):not([id^="block-"]),
.layout-content .region-content > .views-element-container {
  max-width: var(--ee-container);
  margin-inline: auto;
  padding: 1.5rem var(--ee-gutter) 3rem;
}
.layout-content .region-content > [id^="block-"] > .views-element-container,
.layout-content .region-content > [id^="block-"] > h2 {
  max-width: var(--ee-container);
  margin-inline: auto;
  padding-inline: var(--ee-gutter);
}
/* блоки-витрины на главной: заголовок и содержимое одним ритмом (--ee-section-gap между блоками) */
.layout-content .region-content > [id^="block-"] > h2 { margin: var(--ee-section-gap) auto 1.25rem; font-size: var(--ee-h2); }
.layout-content .region-content > [id^="block-"] > .views-element-container { padding-bottom: 0; }

/* ---------- сетки карточек (представления) ---------- */
.views-view-grid.horizontal,
.views-view-grid.vertical {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 40rem) { .views-view-grid.horizontal { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ee-card-min)), 1fr)); gap: 1.5rem; } }
@media (min-width: 80rem) { .views-view-grid.horizontal { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* карточки с текстом (отзывы, вопросы) на телефоне — по одной в ряд: две в 165 px были бы тесными */
@media (max-width: 39.99rem) { .view-reviews-teaser .views-view-grid, .view-reviews-best .views-view-grid, .view-faq-listing .views-view-grid { grid-template-columns: minmax(0, 1fr); } }
.views-view-grid .views-row { display: contents; }
.views-view-grid::before, .views-view-grid::after, .views-view-grid .views-row::before, .views-view-grid .views-row::after { content: none !important; display: none !important; }
.views-view-grid .views-col {
  width: auto !important;
  float: none !important;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 0 0 1rem;
  background: var(--ee-card-bg);
  border: 1px solid var(--ee-card-border);
  border-radius: var(--ee-radius-card);
  box-shadow: var(--ee-card-shadow);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.views-view-grid .views-col:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.views-view-grid .views-col > .views-field { padding-inline: 1rem; font-size: .9375rem; }
.views-view-grid .views-col > .views-field:first-child:has(img) { padding-inline: 0; }   /* фото — на всю ширину карточки; текст без фото остаётся с полями */
.views-view-grid .views-field-field-event-cover img,
.views-view-grid .views-field-field-practice-cover img,
.views-view-grid .views-col > .views-field:first-child img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--muted); }
.views-view-grid .views-field-field-practice-cover img { aspect-ratio: 16 / 9; }
.views-view-grid .views-field-title { font-size: 1.05rem; font-weight: 600; line-height: 1.3; margin-top: .5rem; }
.views-view-grid .views-field-title a { color: var(--foreground); text-decoration: none; }
.views-view-grid .views-field-title a:hover { color: var(--primary); text-decoration: underline; }
.views-view-grid .views-label { display: none; }
.views-view-grid .views-field-field-event-dates { color: var(--muted-foreground); }
.views-view-grid .views-field-field-event-status .field-content {
  display: inline-block;
  padding: .1rem .6rem;
  border-radius: var(--ee-radius-pill);
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-size: .8125rem;
  font-weight: 600;
}
.views-view-grid .views-field-field-price-from .field-content { font-weight: 700; }
.views-view-grid .views-field-field-price-from .field-content::after { content: " ₽"; }
.view-header, .view-footer { margin-block: 1rem; }
.view-empty { padding: 2rem 0; color: var(--muted-foreground); }

/* хаб направлений: плашки с цветной верхней линией (текст всегда тёмный, контраст не зависит от цвета направления) */
.view-directions-hub .views-view-grid.horizontal { display: flex !important; flex-wrap: wrap; gap: .75rem; }
.view-directions-hub .views-col {
  justify-content: center; align-items: center; text-align: center;
  padding: .9rem 1.4rem; min-height: 3.5rem; border-radius: var(--radius); box-shadow: none;
}
.view-directions-hub .views-col:hover { transform: none; box-shadow: var(--shadow-sm); }
.view-directions-hub .views-col > .views-field { padding: 0; font-size: 1rem; }
.view-directions-hub .views-field-name a { color: var(--foreground); font-weight: 600; text-decoration: none; }

/* отзывы, мастера, выпускники, вопросы: без обложки — карточка с текстом */
.view-reviews-teaser .views-col, .view-reviews-best .views-col { padding: 1.25rem 0; }
.view-masters-listing .views-col img, .view-graduates-listing .views-col img, .view-students-graduates .views-col img { aspect-ratio: 1 / 1 !important; }
.view-students-graduates .views-field-name .field-content { display: inline-block; padding: .1rem .7rem; border-radius: var(--ee-radius-pill); background: var(--accent); font-size: .8125rem; font-weight: 600; }
.view-students-graduates .views-field-field-master-city, .view-students-graduates .views-field-field-profile-year { color: var(--muted-foreground); }
.view-faq-listing .views-field-title, .view-faq-listing .views-field-field-answer { padding-inline: 0; }

/* блок «Ссылка на все» и постраничная навигация */
.more-link { margin-top: 1rem; text-align: right; }
.pager__items { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; justify-content: center; }
.pager__item a, .pager__item.is-active { display: inline-flex; min-width: 2.5rem; min-height: 2.5rem; align-items: center; justify-content: center; border-radius: var(--ee-radius-pill); border: 1px solid var(--border); text-decoration: none; }
.pager__item.is-active { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }

/* ---------- страница мероприятия и других материалов ---------- */
.node--view-mode-full { display: block; }
.node__meta { color: var(--muted-foreground); font-size: .875rem; margin-bottom: 1rem; }
.node--view-mode-full .node__content { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) {
  .node--type-event.node--view-mode-full .node__content { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: start; column-gap: 2.5rem; }
  /* обложка занимает левую колонку на всю высоту, а строки полей справа не растягиваются под неё (раньше «span 6» раздувал первые строки) */
  .node--type-event.node--view-mode-full .node__content { row-gap: 0; grid-auto-rows: min-content; }
  .node--type-event .field--name-field-event-cover { grid-row: 1 / span 40; align-self: start; position: sticky; top: 1rem; margin-bottom: 1.25rem; }
  .node--type-event .node__content > :is(details, .ee-tiers, .field--name-field-event-faq, .field--name-field-event-hosts, .field--name-field-event-gallery) { margin-block: .75rem; }
  .node--type-event .node__content > *:not(.field--name-field-event-cover) { grid-column: 2; }
}
.node--type-event .field--name-field-event-cover img,
.node--type-practice .field--name-field-practice-cover img { width: 100%; border-radius: var(--ee-radius-card); box-shadow: var(--shadow-md); display: block; }
.node__content .field--label-above,
.node__content .field--label-inline { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: .5rem 1rem; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.node__content .field--label-above > .field__label,
.node__content .field--label-inline > .field__label { color: var(--muted-foreground); font-size: .875rem; }
.node__content .field--type-text-long, .node__content .field--type-text-with-summary { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 40rem) {
  .node__content .field--label-above, .node__content .field--label-inline { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
}
.node__content details { border: 1px solid var(--border); border-radius: var(--ee-radius-card); padding: .25rem 1.25rem 1rem; background: var(--background); }
.node__content details > summary { cursor: pointer; font-weight: 700; font-size: 1.125rem; padding: .85rem 0; list-style-position: inside; }
.node__content details > summary::marker { color: var(--primary); }
.field--name-field-price-from .field__item { font-weight: 700; }
.date-recur-occurrences { margin: 0; padding-left: 1.1rem; }
.field__items { display: flex; flex-wrap: wrap; gap: .4rem; }
.field--name-field-techniques .field__item,
.field--name-field-directions .field__item a { display: inline-block; padding: .1rem .7rem; border-radius: var(--ee-radius-pill); background: var(--secondary); text-decoration: none; }


/* ступени цены (таблица) и вопросы мероприятия */
.ee-tiers .field__label, .node--type-event .field--name-field-event-faq > .field__label { margin: 1rem 0 .5rem; font-weight: 700; font-size: 1.125rem; color: var(--foreground); }
.ee-tiers, .node--type-event .field--name-field-event-faq, .node--type-event .field--name-field-event-hosts { display: block !important; border-bottom: 0 !important; }
.ee-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ee-table th, .ee-table td { padding: .65rem .9rem; text-align: left; border-bottom: 1px solid var(--border); }
.ee-table thead th { background: var(--muted); font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-foreground); }
.ee-table__price { font-weight: 700; white-space: nowrap; }
@media (max-width: 40rem) { .ee-table { display: block; overflow-x: auto; } }
.ee-table .field { display: block !important; padding: 0 !important; border: 0 !important; }
.ee-faq-item { border: 1px solid var(--border); border-radius: var(--radius); padding: .25rem 1rem; margin-bottom: .5rem; background: var(--background); }
.ee-faq-item > summary { cursor: pointer; font-weight: 600; padding: .6rem 0; }
.ee-faq-item .field { display: block !important; padding: 0 !important; border: 0 !important; }
.ee-faq-item__answer { padding-bottom: .5rem; color: var(--muted-foreground); }
.node__content details .ee-faq-item { border: 1px solid var(--border); }

/* ---------- формы ---------- */
label { font-weight: 600; font-size: .9375rem; }
.form-required::after, .js-form-required::after { content: " *"; color: var(--destructive); }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], input[type="number"], input[type="password"], input[type="date"], input[type="time"], select, textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: .55rem .85rem;
  border: 1px solid var(--input);
  border-radius: var(--radius);
  background: var(--background);
  color: var(--foreground);
  font: inherit;
}
textarea { min-height: 7rem; }
select {   /* стрелка списка без картинок и внешних адресов: два градиента */
  background-image: linear-gradient(45deg, transparent 50%, var(--foreground) 50%), linear-gradient(135deg, var(--foreground) 50%, transparent 50%);
  background-position: calc(100% - 1.3rem) 55%, calc(100% - .9rem) 55%;
  background-size: .4rem .4rem, .4rem .4rem; background-repeat: no-repeat;
}
input:focus, select:focus, textarea:focus { border-color: var(--ee-focus); }
input[type="checkbox"], input[type="radio"] { width: 1.15rem; height: 1.15rem; accent-color: var(--primary); flex: none; margin-top: .25rem; }
.form-item { margin: 0 0 1rem; }
.webform-submission-form { gap: 0; }   /* Mercury даёт форме gap 2rem поверх отступа полей: получались щели по 3rem */
.form-item .description { color: var(--muted-foreground); font-size: .875rem; }
.form-type-checkbox, .form-type-radio { display: flex; gap: .6rem; align-items: flex-start; }
.form-type-checkbox label, .form-type-radio label { font-weight: 400; }
input[type="submit"], button.button, a.button, .button, .webform-button--submit {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem;
  padding: .55rem 1.4rem; border: 0; border-radius: var(--ee-radius-pill);
  background: var(--primary); color: var(--primary-foreground);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: filter .15s, transform .15s;
}
input[type="submit"]:hover, .button:hover { filter: brightness(1.12); text-decoration: none; }
input[type="submit"]:active, .button:active { transform: translateY(1px); }
.views-exposed-form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-bottom: 1.5rem; }
.views-exposed-form .form-item { margin: 0; min-width: 12rem; }
.views-exposed-form .form-actions { margin: 0; }
.messages, [data-drupal-messages] .messages { padding: .9rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); margin: 1rem 0; }
.messages { border-left-width: 4px; }
.messages--status { border-color: var(--ee-success); background: color-mix(in oklab, var(--ee-success) 8%, var(--background)); }
.messages--warning { border-color: var(--ee-warning); background: color-mix(in oklab, var(--ee-warning) 9%, var(--background)); }
.messages--error { border-color: var(--ee-danger); background: color-mix(in oklab, var(--ee-danger) 8%, var(--background)); }

/* ---------- подвал и подписка ---------- */
.site-footer { max-width: var(--ee-container); }
.site-footer form.webform-submission-newsletter-subscribe-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "intro intro" "email submit" "consent consent";
  gap: .5rem .75rem !important;
  align-items: end !important;
  width: 100%;
}
.webform-submission-newsletter-subscribe-form #edit-intro { grid-area: intro; margin: 0; }
.webform-submission-newsletter-subscribe-form #edit-intro h3 { font-size: 1.125rem; margin: 0 0 .25rem; }
.webform-submission-newsletter-subscribe-form #edit-intro p { margin: 0; color: var(--muted-foreground); font-size: .9375rem; }
.webform-submission-newsletter-subscribe-form .form-item-email { grid-area: email; margin: 0; }
.webform-submission-newsletter-subscribe-form .form-item-email label { display: block; margin-bottom: .25rem; font-size: .8125rem; color: var(--muted-foreground); }
.webform-submission-newsletter-subscribe-form .form-item-consent { grid-area: consent; margin: 0; font-size: .8125rem; color: var(--muted-foreground); }
.webform-submission-newsletter-subscribe-form .form-item-consent label { font-size: .8125rem; }
.webform-submission-newsletter-subscribe-form .form-actions { grid-area: submit; margin: 0; }
.site-footer > div > div:first-child { border-color: var(--border); }
@media (max-width: 40rem) {
  .site-footer form.webform-submission-newsletter-subscribe-form { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "email" "consent" "submit"; }
  .webform-submission-newsletter-subscribe-form .form-actions input { width: 100%; }
}

/* ---------- Canvas-страницы: главная и другие ---------- */
.ee-hero { background: linear-gradient(180deg, var(--card), var(--background)); border-bottom: 1px solid var(--border); }
.ee-hero__inner { max-width: var(--ee-container); margin: 0 auto; padding: 1.5rem var(--ee-gutter) 2rem; display: grid; gap: 1.5rem; align-items: center; }
.ee-hero__media { order: -1; }
.ee-hero__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; max-height: 26rem; object-fit: cover; border-radius: calc(var(--ee-radius-card) * 1.5); box-shadow: var(--shadow-lg); }
.ee-hero__text h1, .ee-hero__text h2 { font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem); margin: 0 0 .75rem; }
.ee-hero__text p { font-size: 1.125rem; color: var(--muted-foreground); margin: 0 0 .5rem; max-width: 34rem; }
.ee-hero__cta { margin-top: 1.25rem; }
.ee-hero__cta a { display: inline-flex; align-items: center; min-height: 3rem; padding: .65rem 1.6rem; border-radius: var(--ee-radius-pill); background: var(--primary); color: var(--primary-foreground); font-weight: 600; text-decoration: none; }
.ee-hero__cta a:hover { filter: brightness(1.12); }
@media (min-width: 60rem) {
  .ee-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; padding-block: 3rem; }
  .ee-hero__media { order: 0; }
  .ee-hero--full .ee-hero__text h2 { font-size: 3.25rem; }
}
.ee-hero--banner .ee-hero__inner, .layout-content .ee-hero { }

/* списки без сетки Views (unformatted): тоже карточки */
.view-content:has(> .views-row) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem !important; }
@media (min-width: 40rem) { .view-content:has(> .views-row) { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ee-card-min)), 1fr)); gap: 1.5rem !important; } }
@media (min-width: 80rem) { .view-content:has(> .views-row) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.view-content > .views-row {
  display: flex; flex-direction: column; gap: .35rem; padding: 0 0 1rem; min-width: 0;
  background: var(--ee-card-bg); border: 1px solid var(--ee-card-border); border-radius: var(--ee-radius-card); box-shadow: var(--ee-card-shadow); overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.view-content > .views-row:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.view-content > .views-row > .views-field { padding-inline: 1rem; font-size: .9375rem; }
.view-content > .views-row > .views-field:first-child:has(img) { padding-inline: 0; }
.view-content > .views-row > .views-field:first-child img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.view-practices-teaser .views-field-field-cover img, .view-practices-listing .views-field-field-cover img { aspect-ratio: 16 / 9 !important; }
.view-content > .views-row .views-field-title { font-size: 1.05rem; font-weight: 600; line-height: 1.3; margin-top: .5rem; }
.view-content > .views-row .views-field-title a { color: var(--foreground); text-decoration: none; }
.view-content > .views-row .views-field-title a:hover { color: var(--primary); text-decoration: underline; }
.view-content > .views-row .views-field-field-event-dates { color: var(--muted-foreground); }
.view-content > .views-row .views-field-field-event-status .field-content { display: inline-block; padding: .1rem .6rem; border-radius: var(--ee-radius-pill); background: var(--secondary); font-size: .8125rem; font-weight: 600; }
.view-content > .views-row .views-label { display: none; }

/* отзывы: круглое фото автора, читаемый текст */
.view-reviews-best .views-field-field-review-author-photo, .view-reviews-teaser .views-field-field-review-author-photo { padding: 0 1rem !important; }
.views-field-field-review-author-photo img { width: 3.5rem !important; height: 3.5rem !important; aspect-ratio: 1 !important; border-radius: 50%; object-fit: cover; }
.views-field-field-rating { color: var(--ee-status-warn); letter-spacing: .1em; }
.review-more summary { cursor: pointer; list-style: none; }
.review-more summary em { color: var(--primary); font-style: normal; font-size: .875rem; }
.views-field-field-author-name { font-weight: 600; }

/* таблицы (расписание): на узких экранах — горизонтальная прокрутка внутри таблицы, страница не ползёт */
.view-content table { width: 100%; border-collapse: collapse; }
@media (max-width: 47.99rem) { .view-content table { display: block; overflow-x: auto; } }
.view-content th, .view-content td { text-align: left; padding: .7rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.view-content th { font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-foreground); }

/* «Мы в соцсетях» */
.paragraph--type--social-link { display: inline-flex; gap: .5rem; align-items: center; margin: 0 .5rem .5rem 0; padding: .35rem .9rem; border: 1px solid var(--border); border-radius: var(--ee-radius-pill); font-size: .9375rem; }
.paragraph--type--social-link > div:first-child { font-weight: 600; }
.paragraph--type--social-link > div:last-child { color: var(--muted-foreground); }

/* фильтр списка: в строку */
.views-exposed-form .form-item { min-width: 0; flex: 1 1 12rem; max-width: 20rem; }
@media (max-width: 40rem) { .views-exposed-form .form-actions, .views-exposed-form .form-actions input { width: 100%; } .views-exposed-form .form-item { max-width: none; } }

/* печать и «меньше движения» */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* фото галереи мероприятия: сеткой, а не столбцом на весь экран; вопросы мероприятия — столбцом */
.node--type-event .field--name-field-event-gallery { display: block !important; border-bottom: 0 !important; }
.node--type-event .field--name-field-event-gallery > .field__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .75rem; }
.node--type-event .field--name-field-event-gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.node--type-event .field--name-field-event-faq > .field__items { display: block; }

/* статус мероприятия поверх фото карточки (как в макете): белая плашка, текст всегда тёмный — контраст не зависит от фото */
.views-view-grid .views-col:has(.views-field-field-event-cover) { position: relative; }
.views-view-grid .views-col:has(.views-field-field-event-cover) > .views-field-field-event-status { position: absolute; top: .75rem; left: .75rem; padding: 0; z-index: 1; }
.views-view-grid .views-col:has(.views-field-field-event-cover) > .views-field-field-event-status .field-content { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-sm); }

/* плашки направлений: цветная верхняя линия (цвет — из данных направления; точка-образец превращается в линию) */
.view-directions-hub .views-col { position: relative; overflow: hidden; }
.view-directions-hub .views-col { padding-top: 1.05rem; }   /* текст не касается цветной линии */
.view-directions-hub .views-field-field-color { position: absolute; top: 0; left: 0; right: 0; padding: 0 !important; }
.view-directions-hub .color_field__swatch { width: 100% !important; height: 4px !important; border: 0 !important; border-radius: 0 !important; }

/* узкие карточки: перенос длинных слов по слогам; направления на телефоне — по две в ряд */
.views-view-grid .views-field-title { hyphens: auto; overflow-wrap: anywhere; }
@media (max-width: 39.99rem) {
  .view-directions-hub .views-view-grid.horizontal { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .view-directions-hub .views-col { padding: 1.05rem .5rem .8rem; }
}

/* ритм секций страниц Canvas: один шаг --ee-section-gap между секциями (у Mercury 1.5–2 rem — теснее, чем у блоков-витрин) */
.layout-content .region-content > section[class~="@container"] { margin-top: var(--ee-section-gap); margin-bottom: 0; }
.layout-content .region-content { padding-bottom: var(--ee-section-gap); }
.layout-content .region-content > section[class~="@container"]:first-child { margin-top: 2rem; }   /* первая секция под шапкой — без лишнего зазора */

/* отзывы: длинный текст — не больше трёх карточек в ряд (в четыре они получаются узкими и очень высокими) */
@media (min-width: 64rem) { .view-reviews-best .views-view-grid.horizontal, .view-reviews-teaser .views-view-grid.horizontal, .view-faq-listing .views-view-grid.horizontal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ===== Фасеты поиска (/poisk): компактные «чипы» вместо столбцов ссылок ===== */
.layout-content .region-content > [id^="block-"][class*="block-facet--"] { box-sizing: border-box; max-width: calc(var(--ee-container) + 2 * var(--ee-gutter)); margin: 0 auto 1rem; padding-inline: var(--ee-gutter); }
.layout-content .region-content > [id^="block-"][class*="block-facet--"] > h2 { margin: 0 0 .4rem; padding: 0; font-size: .9375rem; line-height: 1.3; font-weight: 600; color: var(--muted-foreground); }
.facets-widget-links ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.facets-widget-links li { margin: 0; padding: 0; }
.facets-widget-links a {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; padding: .3rem .9rem; border: 1px solid var(--input); border-radius: var(--ee-radius-pill);
  background: var(--background); color: var(--foreground); text-decoration: none; font-size: .9375rem;
}
.facets-widget-links a:hover { background: var(--secondary); }
.facets-widget-links a:focus-visible { outline: 3px solid var(--ee-focus); outline-offset: 2px; }
.facets-widget-links a.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.facets-widget-links .facet-item__count { color: inherit; opacity: .8; font-size: .8125rem; }

/* ===== Картинка по ссылке (поле field_image_url): вид как у обложки; скрыта, если есть загруженная обложка/фото ===== */
.field--name-field-image-url { margin: 0 0 1.25rem; }
.field--name-field-image-url img, .ee-linked-img { display: block; width: 100%; height: auto; object-fit: cover; background: var(--muted); border-radius: var(--ee-radius-card); }
.views-view-grid .views-col > .views-field-field-image-url img { border-radius: 0; aspect-ratio: 4 / 5; height: auto; }
.views-view-grid .views-col > .views-field-field-image-url { padding-inline: 0; }
.views-view-grid .views-col > .views-field:has(img):not(.views-field-field-image-url) ~ .views-field-field-image-url { display: none; }   /* есть загруженная обложка — ссылочная не нужна */
.view-masters-listing .views-col .ee-linked-img, .view-graduates-listing .views-col .ee-linked-img, .view-students-graduates .views-col .ee-linked-img { aspect-ratio: 1 / 1; }
.node .field--name-field-event-cover:has(img) ~ .field--name-field-image-url, .node .field--name-field-cover:has(img) ~ .field--name-field-image-url, .node .field--name-field-master-photo:has(img) ~ .field--name-field-image-url { display: none; }
/* страница материала: картинка по ссылке не выше 32rem при любых пропорциях (вертикальный кадр 2:3 иначе занимает больше экрана, панорама остаётся низкой) */
.field--name-field-image-url img { max-height: 32rem; }
/* обложка по ссылке резервирует место до загрузки (4:5, как загруженная обложка): иначе, когда приходит настоящий кадр другой пропорции, страница прыгает (сдвиг макета) */
.node--view-mode-full .field--name-field-image-url .ee-linked-img { aspect-ratio: 4 / 5; }
/* страница термина (направление, раздел, тема): записи выводятся целиком (режим «тизер» с полным набором полей), поэтому один столбец, а не сетка карточек; картинка направления — полоса */
.view-taxonomy-term .view-header .field--name-field-image-url img { max-height: 16rem; }
.view-taxonomy-term .view-content:has(> .views-row) { grid-template-columns: minmax(0, 1fr); max-width: 56rem; }
/* мероприятие на компьютере: картинка по ссылке — в левой колонке, как обложка (правило «колонка 2 для всех полей» выше её не касается) */
@media (min-width: 60rem) { .node--type-event.node--view-mode-full .node__content > .field--name-field-image-url { grid-column: 1; grid-row: 1 / span 40; align-self: start; position: sticky; top: 5.5rem; } }
/* Свой ролик mp4/webm из хранилища (поле «Видеофайлы (по ссылкам)» и компонент «Видео по ссылке»): штатный <video controls>; вертикальный ролик не выше 34rem, пропорции сохраняются */
.ee-video--file video { display: block; width: 100%; max-height: 34rem; object-fit: contain; border-radius: var(--ee-radius-card); background: #000; }
/* Фотографии по ссылкам (поле «Фотографии (по ссылкам)»): сетка превью 4:3; щелчок открывает фото целиком */
.ee-gallery { margin: 0 0 1.25rem; }
.ee-gallery__title { margin: 0 0 .75rem; font-size: 1.25rem; }
.ee-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; }
.ee-gallery__item { display: block; overflow: hidden; border-radius: var(--ee-radius-card); background: var(--muted); }
.ee-gallery__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .2s; }
.ee-gallery__item:hover .ee-gallery__img, .ee-gallery__item:focus-visible .ee-gallery__img { transform: scale(1.04); }
.ee-gallery__item:focus-visible { outline: 3px solid var(--ee-focus); outline-offset: 2px; }
/* Картинка на странице Canvas (компонент «Картинка по ссылке», figure.ee-body-img): по ширине колонки, не выше 32rem */
.ee-body-img { margin: 1.25rem 0; }
.ee-body-img img { display: block; max-width: 100%; max-height: 32rem; width: auto; height: auto; margin-inline: auto; border-radius: var(--ee-radius-card); }
.ee-body-img figcaption { margin-top: .4rem; color: var(--muted-foreground); font-size: .875rem; text-align: center; }

/* ---------- ведущие мероприятия (рецепт event-hosts) ---------- */
/* блок «Ведущие» / «Приглашённые мастера» на странице мероприятия: карточки сеткой, до шести сразу, остальные за «Показать всех» */
.node--type-event .field--name-field-event-hosts.ee-hosts { display: block !important; margin-block: 1.25rem; padding: 0; border-bottom: 0 !important; }
.ee-hosts__title { margin: 0 0 .9rem; font-size: var(--ee-h3, 1.25rem); font-weight: 700; line-height: 1.25; color: var(--foreground); }
.ee-hosts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 40rem) { .ee-hosts__grid { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 1rem; } }
.ee-hosts__item { min-width: 0; }
.node__content details.ee-hosts__more { margin-top: 1rem; padding: 0; border: 0; background: none; }
.node__content details.ee-hosts__more > summary { display: inline-flex; align-items: center; margin: 0 0 1rem; padding: .55rem 1.15rem; border: 1px solid var(--border); border-radius: var(--ee-radius-pill); font-size: .9375rem; font-weight: 600; list-style: none; cursor: pointer; }
.node__content details.ee-hosts__more > summary::-webkit-details-marker { display: none; }
.node__content details.ee-hosts__more > summary:hover { border-color: var(--primary); color: var(--primary); }
.ee-host-card { position: relative; height: 100%; display: flex; flex-direction: column; background: var(--ee-card-bg); border: 1px solid var(--ee-card-border); border-radius: var(--ee-radius-card); box-shadow: var(--ee-card-shadow); overflow: hidden; }
.ee-host-card:hover { box-shadow: var(--shadow-lg); }
.ee-host-card__link { display: block; color: inherit; text-decoration: none; }
.ee-host-card__link::after { content: ''; position: absolute; inset: 0; }   /* вся карточка — ссылка на страницу профиля */
.ee-host-card__photo { display: block; aspect-ratio: 1 / 1; background: var(--muted); overflow: hidden; }
.ee-host-card__photo img, .ee-host-card__ph { display: block; width: 100%; height: 100%; object-fit: cover; }
.ee-host-card__ph { color: var(--foreground); }
.ee-host-card__name { display: block; padding: .6rem .8rem .15rem; font-weight: 600; line-height: 1.3; hyphens: auto; overflow-wrap: anywhere; }
.ee-host-card__link:hover .ee-host-card__name, .ee-host-card__link:focus-visible .ee-host-card__name { color: var(--primary); text-decoration: underline; }
.ee-host-card__role { padding: 0 .8rem .8rem; color: var(--muted-foreground); font-size: .8125rem; line-height: 1.3; }
.ee-host-card__role .field { display: inline !important; padding: 0 !important; border: 0 !important; }
/* «Ведёт: имена» в карточке афиши: не больше двух строк, сетку не растягивает */
.views-view-grid .views-field-field-event-hosts, .view-content > .views-row .views-field-field-event-hosts { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; color: var(--muted-foreground); font-size: .8125rem; line-height: 1.35; }
.views-field-field-event-hosts .views-label, .views-field-field-event-hosts .field-content { display: inline; font-weight: 400; }
/* «Мероприятия с участием» на странице профиля */
.ee-master-events { margin-top: 2.5rem; }
.ee-master-events__heading { margin: 0 0 1rem; font-size: var(--ee-h2, 1.5rem); line-height: 1.2; }
.ee-master-events__title { margin: 1.5rem 0 .9rem; font-size: 1.125rem; font-weight: 700; color: var(--muted-foreground); }
/* портрет на странице профиля: не на всю ширину (маленький портрет не растягивается в «лицо на весь экран») */
.node--type-master-profile.node--view-mode-full .field--name-field-image-url, .node--type-master-profile.node--view-mode-full .field--name-field-master-photo { max-width: 20rem; }
.node--type-master-profile.node--view-mode-full .ee-linked-img, .node--type-master-profile.node--view-mode-full .field--name-field-master-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--ee-radius-card); box-shadow: var(--shadow-md); }

/* ---------- формы: выраженные поля (2026-09-26): видимая рамка, фон отличается от страницы, подписи, состояния, свои флажки и переключатели ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], input[type="number"], input[type="password"], input[type="date"], input[type="time"], select, textarea {
  min-height: 2.75rem; padding: .6rem .9rem; border: 1.5px solid var(--ee-field-border); border-radius: var(--ee-field-radius);
  background-color: var(--ee-field-bg); color: var(--foreground); font: inherit; box-shadow: inset 0 1px 2px hsl(0 0% 0% / .05);
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { min-height: 8rem; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--muted-foreground); opacity: 1; }
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="search"]:focus, input[type="url"]:focus, input[type="number"]:focus, input[type="password"]:focus,
input[type="date"]:focus, input[type="time"]:focus, select:focus, textarea:focus {
  outline: 3px solid color-mix(in oklab, var(--ee-field-focus) 40%, transparent); outline-offset: 1px; border-color: var(--ee-field-focus);
}
label, .form-item__label, legend { display: block; margin-bottom: .35rem; font-size: .875rem; font-weight: 600; color: var(--foreground); }
.form-item, .js-form-item { margin-block: 0 1rem; }
.form-item__description, .description { margin-top: .3rem; font-size: .8125rem; line-height: 1.4; color: var(--muted-foreground); }
/* ошибка и успех */
input.error, select.error, textarea.error, .form-item--error input, .form-item--error select, .form-item--error textarea { border-color: var(--destructive); background-color: color-mix(in oklab, var(--destructive) 5%, var(--ee-field-bg)); }
.form-item--error-message, .form-item__error-message { margin-top: .3rem; font-size: .875rem; font-weight: 600; color: var(--destructive); }
.form-item--error .form-item__label, .form-item--error label { color: var(--destructive); }
input.is-valid, .form-item--valid input { border-color: var(--ee-success); }
/* флажки и переключатели: свои, видимые (20 px, рамка, отметка) */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none; width: 1.375rem; height: 1.375rem; margin: .1rem .6rem 0 0; padding: 0; min-height: 0; vertical-align: top;
  border: 1.5px solid var(--ee-field-border); background-color: var(--ee-field-bg); background-position: center; background-repeat: no-repeat; background-size: 80%; cursor: pointer;
}
input[type="checkbox"] { border-radius: .35rem; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked { background-color: var(--primary); border-color: var(--primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E"); }
input[type="radio"]:checked { border-color: var(--primary); background-image: radial-gradient(circle, var(--primary) 0 45%, transparent 50%); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 3px solid color-mix(in oklab, var(--ee-field-focus) 45%, transparent); outline-offset: 2px; }
.form-type-checkbox, .form-type-radio, .js-form-type-checkbox, .js-form-type-radio { display: flex; align-items: flex-start; }
.form-type-checkbox label, .form-type-radio label, .js-form-type-checkbox label, .js-form-type-radio label { margin: 0; font-size: .9375rem; font-weight: 400; line-height: 1.4; }
/* выпадающий список: стрелка своя (у поля с рамкой) */
select { padding-right: 2.5rem; }
/* кнопки отправки — заметные */
input[type="submit"], button[type="submit"].form-submit, .button--primary, .webform-button--submit {
  min-height: 2.75rem; padding: .55rem 1.6rem; border: 1.5px solid var(--primary); border-radius: var(--ee-radius-pill); background: var(--primary); color: var(--primary-foreground); font: inherit; font-weight: 600; cursor: pointer;
}
input[type="submit"]:hover, button[type="submit"].form-submit:hover, .webform-button--submit:hover { filter: brightness(1.08); }
input[type="submit"]:focus-visible, button[type="submit"]:focus-visible { outline: 3px solid color-mix(in oklab, var(--ee-field-focus) 45%, transparent); outline-offset: 2px; }
/* мелкий текст согласия и подсказки рядом с флажком */
.form-type-checkbox .description, .js-form-type-checkbox .description { margin-left: 2rem; }

/* ---------- подвал (2026-09-26): колонки сверху (слот «Брендинг и соцсети»), тонкая строка подписки, нижняя полоса со ссылками и копирайтом ---------- */
.site-footer > div > div:first-child { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 1.75rem !important; padding-block: 2rem 1.25rem !important; }
/* колонки: каждый компонент слота — своя колонка (1 столбец на телефоне, 2 на планшете, 4 на компьютере: первая шире) */
.site-footer > div > div:first-child > div:first-child { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 2rem; }
@media (min-width: 40rem) { .site-footer > div > div:first-child > div:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .site-footer > div > div:first-child > div:first-child { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } }
.site-footer > div > div:first-child > div:first-child:empty { display: none; }
.site-footer h3, .site-footer h4 { margin: 0 0 .6rem !important; font-size: .8125rem !important; font-weight: 700 !important; line-height: 1.3 !important; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-foreground); }   /* заголовки колонок (перебивают типографику текстовых компонентов) */
.site-footer p { margin: 0 0 .5rem; font-size: .9375rem !important; line-height: 1.5; color: var(--muted-foreground); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0; }
.site-footer li a, .site-footer p a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--foreground); text-decoration: none; font-size: .9375rem; }
.site-footer li a:hover, .site-footer p a:hover { color: var(--primary); text-decoration: underline; }
/* тонкая строка подписки: подпись, поле и кнопка в одну строку, согласие мелко под полем */
.site-footer > div > div:first-child > div:last-child { width: 100% !important; max-width: none !important; margin: 0 !important; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.site-footer form.webform-submission-newsletter-subscribe-form {
  grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "email" "consent" "submit"; align-items: center !important; gap: .5rem .75rem !important;
}
@media (min-width: 48rem) {
  .site-footer form.webform-submission-newsletter-subscribe-form { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) auto; grid-template-areas: "intro email submit" ". consent consent"; }
}
.webform-submission-newsletter-subscribe-form #edit-intro h3 { margin: 0; font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--foreground); }
.webform-submission-newsletter-subscribe-form #edit-intro p { display: none; }
.webform-submission-newsletter-subscribe-form .form-item-email label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* подпись поля для программ экрана; поле подписано заголовком строки */
.webform-submission-newsletter-subscribe-form .form-item-email input { width: 100%; }
.webform-submission-newsletter-subscribe-form .form-item-consent { display: flex; align-items: center; }
.webform-submission-newsletter-subscribe-form .form-item-consent input[type="checkbox"] { width: 1.125rem; height: 1.125rem; margin: 0 .5rem 0 0; }
.webform-submission-newsletter-subscribe-form .form-item-consent label { font-size: .75rem; line-height: 1.3; }
/* нижняя полоса */
.site-footer > div > div:last-child { border-color: var(--border); }
.site-footer > div > div:last-child ul { display: flex; flex-wrap: wrap; gap: .1rem 1.25rem; }
.site-footer > div > div:last-child li a { min-height: 2rem; font-size: .8125rem; color: var(--muted-foreground); }
.site-footer > div > div:last-child p { margin: 0; font-size: .8125rem; color: var(--muted-foreground); }

/* ---------- подписи полей: только в таблице «Практическая информация» и заголовками над длинными текстами (2026-09-26) ---------- */
.node__content .field--name-field-event-atmosphere > .field__label, .node__content .field--name-field-program > .field__label, .node__content .field--name-field-what-to-bring > .field__label,
.node__content .field--name-field-registration-terms > .field__label, .node__content .field--name-field-event-includes > .field__label, .node__content .field--name-field-event-excludes > .field__label,
.node__content .field--name-field-price-tiers > .field__label, .node__content .field--name-field-event-faq > .field__label, .node__content .field--name-field-event-gallery > .field__label {
  margin: 1.25rem 0 .6rem; font-size: var(--ee-h3, 1.25rem); font-weight: 700; line-height: 1.25; letter-spacing: 0; text-transform: none; color: var(--foreground);
}
/* строка-сводка мероприятия: значки и «даты · место · цена» (шаблон node.html.twig) */
.ee-event-meta { margin: 0 0 1.25rem; }
.ee-event-meta__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.ee-badge { display: inline-flex; align-items: center; padding: .2rem .75rem; border-radius: var(--ee-radius-pill); background: var(--secondary); color: var(--secondary-foreground); font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.ee-badge--dir { background: var(--accent); color: var(--accent-foreground); }
.ee-badge--status { background: var(--background); border: 1px solid currentColor; }
.ee-badge--open { color: var(--ee-status-ok); } .ee-badge--announce, .ee-badge--postponed { color: var(--ee-status-warn); } .ee-badge--cancelled { color: var(--ee-status-bad); } .ee-badge--finished, .ee-badge--going { color: var(--ee-status-done); }
.ee-event-meta__line { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--foreground); }

/* ---------- единая ширина и боковые поля (2026-09-26) ----------
 * Один контейнер (--ee-container, боковой отступ --ee-gutter) для шапки, героя, секций Canvas, заголовков и подвала: левый край текста и логотипа
 * один и тот же на всех блоках при любой ширине окна (раньше у контейнера Tailwind были ступени по ширине, у внутренних блоков 90 %, у героя свои поля). */
html { scrollbar-gutter: stable; }   /* место под полосу прокрутки резервируется всегда: при открытии шторки (overflow: hidden) страница не прыгает вправо */
.container { max-width: var(--ee-container); padding-inline: var(--ee-gutter); }
.container [class*="max-w-9/10"] { max-width: 100%; }
.region-content { max-width: none; padding-inline: 0; }   /* область содержимого на всю ширину окна (у Mercury она ступенчатая: 640/768/1024/1280/1536): ширину и поля задают контейнеры блоков, поэтому левый край текста один */
.ee-hero__inner { max-width: var(--ee-container); margin-inline: auto; padding-inline: var(--ee-gutter); }   /* полоса героя на всю ширину, текст героя на общей линии с шапкой */
.site-footer { max-width: var(--ee-container); }