/**
 * Team member full profile + Art article teaser + /art list page.
 * (See web/modules/custom/takaya_blocks/css/blocks.css for Block-plugin
 * CSS — this file is for theme-level node/Views templates only.)
 */

.takaya-team-full__header {
  display: grid;
  grid-template-columns: 60% 1fr;
  gap: 2rem;
  align-items: start;
}

.takaya-team-full__photo img {
  width: 100%;
  display: block;
}

.takaya-team-full__name {
  margin: 0 0 0.25rem;
}

.takaya-team-full__role {
  color: var(--color-muted);
  font-weight: bold;
  margin: 0 0 1rem;
}

.takaya-team-full__quote {
  font-style: italic;
  font-size: 1.1rem;
  border-left: 3px solid var(--color-primary-dark);
  padding-left: 1.5rem;
  margin: 2rem 0;
}

.takaya-team-full__philosophy {
  margin: 2rem 0;
}

.takaya-team-full__gallery .field--name-field-works-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 768px) {
  .takaya-team-full__header {
    grid-template-columns: 1fr;
  }

  .takaya-team-full__gallery .field--name-field-works-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

.takaya-art-teaser__link {
  display: block;
  text-decoration: none;
  color: var(--color-text);
}

.takaya-art-teaser__cover img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.takaya-art-teaser__category {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  margin-top: 0.75rem;
}

.takaya-art-teaser__title {
  margin: 0.25rem 0;
}

.takaya-art-teaser__date {
  display: block;
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}

.takaya-art-teaser__cta {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: bold;
  color: var(--color-primary-dark);
}

/*
 * Art article full page (Phase 10, Finding 1/10 fix). Minimal styling so
 * the new node--art-article--full.html.twig template isn't unstyled --
 * not part of the audit's required fix, added so the new <h1> markup
 * renders in a reasonable layout pending Pablo's visual pass.
 */
.takaya-art-full__cover img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
}

.takaya-art-full__category {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary-dark);
  margin-top: 1.5rem;
}

.takaya-art-full__title {
  margin: 0.5rem 0 0.75rem;
}

.takaya-art-full__meta {
  display: flex;
  gap: 1rem;
  color: var(--color-muted);
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}

/*
 * Both the breadcrumb block and the page-title block are plain `.block`
 * elements, so each gets Olivero's generic `margin-block-end: var(--sp3)`
 * (54px, base/base.css) -- and since their parent regions are
 * `display: grid` (Olivero's grid-full region system), that trailing
 * margin doesn't collapse through to the next region/main as it would in
 * normal block flow; it's counted as real height inside each region
 * instead. page.html.twig always renders page.breadcrumb directly before
 * page.highlighted/page.content now (breadcrumb-then-heading on every
 * page, see that template), so trimming the breadcrumb block's own
 * trailing margin tightens the breadcrumb-to-heading gap everywhere, not
 * just on /projects and /art.
 */
.region--breadcrumb .block-system-breadcrumb-block {
  margin-bottom: var(--sp1);
}

/*
 * Olivero's `.page-title` (Views/listing pages, e.g. /art, /projects) is
 * forced to `display: inline` (core page-title.css), so its UA margin-top
 * never actually renders -- the breadcrumb-to-heading gap there is just
 * the breadcrumb block's own margin-bottom above. `.takaya-node-title`
 * (node Layout Builder pages, e.g. /about) is a plain block h1 with the
 * browser's default 36px margin-top, which stacked on top of that same
 * breadcrumb margin and made node pages' gap noticeably bigger. Zeroing
 * it here makes the gap identical on both kinds of pages.
 */
.takaya-node-title {
  margin-top: 0;
}

.region--highlighted .block-page-title-block {
  margin-bottom: var(--sp1);
}

.views-exposed-form .views-exposed-widget {
  display: inline-block;
}

.views-exposed-form select#edit-category,
.views-exposed-form .form-item-category {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}

.view-art-articles .view-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@media (max-width: 600px) {
  .view-art-articles .view-content {
    grid-template-columns: 1fr;
  }
}

.views-load-more-button {
  display: block;
  margin: 2rem auto 0;
  padding: 0.75rem 2rem;
  background: var(--color-primary-dark);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.takaya-project-row__link {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  text-decoration: none;
  color: var(--color-text);
  padding: 1.25rem 0;
}

.takaya-project-row__photo {
  flex: 0 0 150px;
  width: 150px;
  height: 90px;
  overflow: hidden;
}

.takaya-project-row__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.takaya-project-row__body {
  flex: 1;
}

.takaya-project-row__location {
  display: block;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.takaya-project-row__title {
  margin: 0.25rem 0;
}

.takaya-project-row__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--color-muted);
  font-size: 0.9rem;
  margin: 0;
}

.takaya-project-row__arrow {
  flex: 0 0 auto;
  font-size: 1.5rem;
  color: var(--color-primary-dark);
}

.takaya-projects-list__item {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
}

.takaya-projects-list__item:nth-child(1) { top: 0; }
.takaya-projects-list__item:nth-child(2) { top: 2px; }
.takaya-projects-list__item:nth-child(3) { top: 4px; }
.takaya-projects-list__item:nth-child(4) { top: 6px; }
.takaya-projects-list__item:nth-child(5) { top: 8px; }
.takaya-projects-list__item:nth-child(6) { top: 10px; }

/* ─── Projects page (/projects view): скрываем крошки, заголовок, фильтры ─ */

/* Scope по .view-projects-list — не по .takaya-projects-fullgrid, который
   есть и на главной (paragraph), чтобы не ломать грид на главной. */
body:has(.view-projects-list) .region--breadcrumb,
body:has(.view-projects-list) .block-page-title-block {
  display: none;
}

body:has(.view-projects-list) .main-content__container {
  padding-block-start: 0;
}

.region--content:has(.view-projects-list) > * {
  grid-column: 1 / -1;
}

.view-projects-list {
  position: relative;
}

body:has(.view-projects-list) .view-filters {
  display: block;
  position: absolute;
  top: 1.5rem;
  left: calc(-1 * (max(0px, (100vw - var(--max-width, 84.375rem)) / 2) + var(--container-padding, 1rem)));
  right: calc(-1 * (max(0px, (100vw - var(--max-width, 84.375rem)) / 2) + var(--container-padding, 1rem)));
  padding: 0 2.5rem;
  z-index: 10;
}

body:has(.view-projects-list) .takaya-pill-filter .form-item input[type="radio"]:checked + label {
  background: #4fc5d8;
  border-color: #4fc5d8;
}

/* ─── Projects fullscreen list (/projects view only) ───────────────────── */

/* Fullscreen breakout только для .view-projects-list — на главной
   .takaya-projects-fullgrid рендерится paragraph-блоком со своим grid-CSS */
.view-projects-list .takaya-projects-fullgrid {
  display: block;
  width: 100vw;
  margin-left: calc(-1 * (max(0px, (100vw - var(--max-width, 84.375rem)) / 2) + var(--container-padding, 1rem)));
}

.view-projects-list .takaya-projects-fullgrid__item {
  display: block;
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
  text-decoration: none;
}

.view-projects-list .takaya-projects-fullgrid__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  pointer-events: none;
  z-index: 1;
}

.view-projects-list .takaya-projects-fullgrid__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.view-projects-list .takaya-projects-fullgrid__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.view-projects-list .takaya-projects-fullgrid__item:hover .takaya-projects-fullgrid__cover img {
  transform: scale(1.04);
}

.view-projects-list .takaya-projects-fullgrid__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 2rem 2.5rem;
  z-index: 2;
}

.view-projects-list .takaya-projects-fullgrid__title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.2;
}

.view-projects-list .takaya-projects-fullgrid__btn {
  display: inline-block;
  background: #1a1a1a;
  color: #fff;
  padding: 0.75rem 1.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 1rem;
}

.view-projects-list .takaya-projects-fullgrid__item:hover .takaya-projects-fullgrid__btn {
  background: #333;
}

.view-projects-list .takaya-projects-fullgrid__article {
  display: block;
  margin: 0;
  padding: 0;
}

/* ─── About page: скрываем заголовок/крошки, видео на всю ширину ─────────── */

body:has(.takaya-video-hero) .region--breadcrumb,
body:has(.takaya-video-hero) .region--highlighted,
body:has(.takaya-video-hero) .takaya-node-title {
  display: none;
}

body:has(.takaya-video-hero) .main-content__container {
  padding-block-start: 0;
}

/* Нулим все margin-block-end / padding-block-end снизу страницы о нас */
body:has(.takaya-video-hero) .region--content,
body:has(.takaya-video-hero) .block-system-main-block,
body:has(.takaya-video-hero) .node__content,
body:has(.takaya-video-hero) .layout.layout--onecol {
  margin-block-end: 0;
  padding-block-end: 0;
}

.takaya-video-hero {
  width: 100vw;
  margin-left: calc(-1 * (max(0px, (100vw - var(--max-width, 84.375rem)) / 2) + var(--container-padding, 1rem)));
}

/* ─────────────────────────────────────────────────────────────────────────── */

/* Заголовок страницы под шапкой — как на сайте-доноре.
   Крупное короткое название («Школа», «Проживание») отделяет шапку от текста
   и сразу говорит читателю, где он находится. */
.bbt-hero {
  position: relative;
}

/* Заголовок лежит на картинке обложки: тёмная подложка снизу вверх, чтобы
   белый текст читался на любом снимке — от снега до моря. */
.bbt-hero:has(.region--hero img) .bbt-page-header {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 6rem 0 1.75rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
  color: #ffffff;
}

.bbt-hero:has(.region--hero img) .bbt-page-header__title {
  color: #ffffff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

/* Без картинки заголовок остаётся обычной строкой под шапкой. */
.bbt-page-header {
  padding: 3.5rem 0 1.5rem;
}

.bbt-page-header__title {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* Читаемость длинных текстов: заголовки разделов отбиваются от предыдущего
   абзаца, списки получают маркеры и воздух. До этого страницы выглядели
   сплошным полотном — глазу было не за что зацепиться. */
.takaya-messaging__text h2,
.takaya-messaging__text h3,
.takaya-messaging__text h4 {
  margin: 2.25rem 0 0.75rem;
  line-height: 1.2;
}

.takaya-messaging__text h2 { font-size: 1.85rem; }
.takaya-messaging__text h3 { font-size: 1.4rem; }
.takaya-messaging__text h4 { font-size: 1.15rem; opacity: 0.85; }

.takaya-messaging__text p {
  margin: 0 0 1rem;
  line-height: 1.7;
}

.takaya-messaging__text ul,
.takaya-messaging__text ol {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
}

.takaya-messaging__text li {
  margin-bottom: 0.4rem;
  line-height: 1.6;
}

.takaya-messaging__text ul { list-style: disc; }
.takaya-messaging__text ol { list-style: decimal; }