/**
 * Studio Takaya — Home page block layouts (Projects Grid, Team Preview,
 * Articles Preview, Hero Slider, content preview, contact info).
 */

/*
 * templates/layout/region--content.html.twig drops Olivero's
 * 'layout--pass--content-medium' class so content uses the full 1278px
 * grid instead of the ~900px reading-width column. Without that pass
 * class, the region's direct child (the page's block wrapper) has no
 * grid-column assigned and collapses to a single grid track -- this
 * restores full-width span explicitly.
 *
 * .region--breadcrumb and .region--highlighted get the same Olivero
 * grid-full + layout--pass--content-medium treatment (every region
 * does, see footer.css for the fuller writeup) but were never covered
 * by the region--content.html.twig override above -- the breadcrumb
 * nav's lone child had no grid-column, so it auto-placed into Olivero's
 * narrow `3 / 13` reading-width track and rendered centered/indented
 * relative to the now-full-width title and body content (confirmed
 * live: breadcrumb box was centered exactly within its 1350px
 * container while the page title sat flush left at the container's
 * own padding edge).
 */
.region--content.grid-full > *,
.region--breadcrumb.grid-full > *,
.region--highlighted.grid-full > * {
  grid-column: 1 / -1;
}

.takaya-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/*
 * Shared "preview tile" base class (Phase 10, Finding 6 fix).
 * .takaya-projects-grid__item, .takaya-team-preview__item, and
 * .takaya-articles-preview__item each independently redeclared this same
 * display/text-decoration/color rule -- extracted here once, applied via
 * the .takaya-preview-tile class added in each component's Twig template
 * (not just renamed in CSS), with each component's own modifier rules
 * (e.g. .takaya-team-preview__item's text-align: center) layered on top.
 * Per the audit, .takaya-project-row/.takaya-art-teaser (content.css) are
 * intentionally NOT touched here -- that needs Pablo's visual judgment.
 */
.takaya-preview-tile {
  display: block;
  text-decoration: none;
  color: var(--color-text);
}

.takaya-projects-grid__item .takaya-placeholder-box {
  height: 220px;
  margin-bottom: 0.75rem;
}

.takaya-projects-grid__title {
  font-size: 1rem;
  font-weight: bold;
  color: var(--color-primary-dark);
  margin: 0;
}

.takaya-projects-grid__meta {
  color: var(--color-muted);
  font-size: 0.85rem;
  margin: 0.25rem 0 0;
}

.takaya-empty-state {
  color: var(--color-muted);
  font-style: italic;
}

/*
 * Pill-button styling for exposed filter radios (Phase 10).
 *
 * Real rendered markup (confirmed via curl against /projects and /art
 * after the #type => 'radios' alter in takaya_blocks_form_alter()):
 *
 * <fieldset class="takaya-pill-filter ... form-item ..." id="edit-ptype--wrapper">
 *   <legend>...filter label...</legend>
 *   <div class="fieldset__wrapper ...">
 *     <div id="edit-ptype" class="form-boolean-group">
 *       <div class="form-type-boolean ... form-item form-item-ptype ...">
 *         <input type="radio" ...>
 *         <label for="...">...</label>
 *       </div>
 *       ...repeated per option...
 *     </div>
 *   </div>
 * </fieldset>
 *
 * Drupal's #type => 'radios' element wraps the whole group in a
 * <fieldset>, not a flat container -- the "takaya-pill-filter" class
 * (added via #attributes on the radios element) lands on that
 * <fieldset>, not directly on the options container. So flex-wrap must
 * target the inner ".form-boolean-group" div (the actual options list),
 * not ".takaya-pill-filter" itself, otherwise the <legend> would be
 * pulled into the flex row too. Each option's wrapper div does carry
 * the ".form-item" class as assumed, and input+label are adjacent
 * siblings (only a whitespace/text node between them), so the
 * "input:checked + label" selector works as originally planned.
 */
.takaya-pill-filter .form-boolean-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.takaya-pill-filter .form-item {
  margin: 0;
}

.takaya-pill-filter .form-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.takaya-pill-filter .form-item label {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-badge);
  color: var(--color-text);
  background: var(--color-white);
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.takaya-pill-filter .form-item input[type="radio"]:checked + label {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.takaya-pill-filter .form-item input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}

/*
 * Wireframe (docs/studio_takaya_wireframes_v4.pdf §7 "Проекты") shows
 * Type and Location as one flat pill row, no visible group boxes/legends
 * and no Apply button -- not two boxed fieldsets stacked with a gray
 * legend bar above each (Drupal's default <fieldset>/<legend> rendering).
 * `display: contents` on the fieldset and its `.fieldset__wrapper` child
 * removes both boxes without touching the server-rendered markup, leaving
 * each filter's `.form-boolean-group` (already flex, see above) as a
 * direct child of `.views-exposed-form` -- which is itself flex-wrapped
 * here so the two groups' pills sit in one continuous row. The legend is
 * visually hidden rather than `display: none` so the "Type"/"Location"
 * group label is still announced to screen readers. The Apply button is
 * hidden because js/pill-filter-autosubmit.js submits on radio change
 * instead (Views' own AJAX behavior, already on via use_ajax, takes it
 * from there).
 */
.views-exposed-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.takaya-pill-filter,
.takaya-pill-filter .fieldset__wrapper {
  display: contents;
}

.takaya-pill-filter .fieldset__legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.views-exposed-form .form-actions {
  display: none;
}

@media (max-width: 1023px) {
  .takaya-projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .takaya-projects-grid {
    grid-template-columns: 1fr;
  }
}

/*
 * Other homepage sections get their top spacing for free from
 * .takaya-section-heading's margin-top. This section's heading sits next
 * to the image instead of above the whole block (and its margin-top is
 * zeroed below so it doesn't just push the text column down on its own),
 * so the section needs its own top spacing to match.
 */
.takaya-current-project {
  padding-top: 3rem;
}

.takaya-current-project__layout {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.takaya-current-project__media {
  flex: 1 1 50%;
  display: block;
  text-decoration: none;
}

.takaya-current-project__media .media,
.takaya-current-project__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.takaya-current-project__text {
  flex: 1 1 50%;
}

.takaya-current-project__text .takaya-section-heading {
  margin-top: 0;
}

.takaya-current-project__title {
  margin: 0 0 1.5rem;
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--color-text);
}

.takaya-current-project__cta {
  display: inline-block;
  padding: 0.6rem 1.75rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius-card);
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.takaya-current-project__cta:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

@media (max-width: 767px) {
  .takaya-current-project__layout {
    flex-direction: column;
  }
}

.takaya-projects-fullgrid__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

.takaya-projects-fullgrid__item {
  position: relative;
  display: block;
  height: 32rem;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
}

/*
 * height: 100% can't resolve here -- Drupal's media render wraps img in
 * several auto-height divs (.media > .field > .field__item), breaking the
 * percentage chain back up to .takaya-projects-fullgrid__item's fixed
 * height, so img fell back to its own intrinsic aspect ratio instead of
 * filling the box. Absolute-positioning against the item (already
 * position: relative) skips that chain entirely, matching how the hero
 * slider crops mixed-aspect-ratio source images to a fixed box.
 */
.takaya-projects-fullgrid__item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.takaya-projects-fullgrid__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 0.75rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}

.takaya-projects-fullgrid__title {
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
}

.takaya-projects-fullgrid__meta {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  opacity: 0.85;
}

@media (max-width: 1023px) {
  .takaya-projects-fullgrid__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .takaya-projects-fullgrid__grid {
    grid-template-columns: 1fr;
  }
}

/*
 * Drupal wraps the rendered field_items value in a `.field--name-field-items`
 * wrapper div -- that wrapper, not .takaya-messaging__grid itself, is the
 * actual direct parent of the per-item .field__item nodes, so the grid has
 * to apply there for the 4 items to lay out side by side instead of stacking.
 */
.takaya-messaging__grid .field--name-field-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* На обычных content-страницах (type "page") в этой секции всего один
 * messaging_item — в жёсткой сетке на 4 колонки он занимал 1/4 ширины и
 * выглядел прижатым влево. Единственный элемент — на всю ширину. */
.takaya-messaging__grid .field--name-field-items:has(> .field__item:only-child) {
  grid-template-columns: 1fr;
}

/* Секция "Привет!" на главной (у неё нет своего field_heading, в отличие
 * от "Отзывы") — первый элемент (сам текст) на всю ширину строки, всё
 * остальное (баннеры, parallax) обычным grid auto-flow уходит на новую
 * строку под него. */
.takaya-messaging:not(.takaya-messaging--headed) .takaya-messaging__grid .field--name-field-items > .field__item:first-child {
  grid-column: 1 / -1;
}


.takaya-messaging__heading {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.5rem;
}

.takaya-messaging__text {
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* Перенесённый с WP текст — это голые h2/h3/h4/p/ul без единого правила
 * отступов (только font-size/color выше), поэтому на content-страницах
 * читался сплошным полотном. Задаём обычную типографскую иерархию. */
.takaya-messaging__text h2,
.takaya-messaging__text h3,
.takaya-messaging__text h4 {
  color: var(--color-primary-dark);
  font-weight: bold;
  margin: 1.75rem 0 0.6rem;
  line-height: 1.3;
}

.takaya-messaging__text h2:first-child,
.takaya-messaging__text h3:first-child,
.takaya-messaging__text h4:first-child {
  margin-top: 0;
}

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

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

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

.takaya-messaging__text li {
  margin-bottom: 0.35rem;
  line-height: 1.5;
}

.takaya-messaging__text strong {
  color: var(--color-primary-dark);
}

.takaya-messaging__text a {
  color: var(--color-primary);
  text-decoration: underline;
}

@media (max-width: 767px) {
  .takaya-messaging__grid .field--name-field-items {
    grid-template-columns: repeat(2, 1fr);
  }
}

.takaya-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

/*
 * Populated state renders {{ content.field_images }}, which Drupal wraps in
 * a `.field--name-field-images` div. Giving that wrapper its own nested grid
 * made it the single grid item of .takaya-gallery__grid's grid (1 of 4
 * columns, ~1/4 width), inside which its own 4 columns then divided that
 * quarter again -- visible photos ended up ~1/16 of the section width.
 * display: contents removes the wrapper from layout entirely so its
 * .field__item children become direct items of the one real grid.
 */
.takaya-gallery__grid .field--name-field-images {
  display: contents;
}

.takaya-gallery__grid .takaya-placeholder-box {
  aspect-ratio: 1 / 1;
  height: auto;
  margin-bottom: 0;
}

/*
 * Real photos have no equivalent sizing -- only the placeholder box above
 * does -- so the <img> renders at its native intrinsic size (small) inside
 * the grid cell instead of filling it.
 */
.takaya-gallery__grid .field--name-field-images .field__item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.takaya-gallery__grid .field--name-field-images img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .takaya-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.takaya-team-preview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.takaya-team-preview__item {
  text-align: center;
}

.takaya-team-preview__item .takaya-placeholder-box {
  height: 160px;
  border-radius: 50%;
  margin-bottom: 0.75rem;
}

.takaya-team-preview__name {
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--color-primary-dark);
  margin: 0;
}

.takaya-team-preview__role {
  color: var(--color-muted);
  font-size: 0.8rem;
  margin: 0.25rem 0 0;
}

@media (max-width: 1023px) {
  .takaya-team-preview {
    grid-template-columns: repeat(2, 1fr);
  }
}

.takaya-articles-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.takaya-articles-preview__item .takaya-placeholder-box {
  height: 180px;
  margin-bottom: 0.75rem;
}

/* Настоящая картинка (не заглушка) рендерилась в нативном размере
 * image style'а (thumbnail, 100×100) — без этого правила выглядела
 * крошечной. Тот же приём, что уже используется в карточках мега-меню
 * (nav.css, .takaya-projects-megapanel__card img). */
.takaya-articles-preview__item img {
  width: 100%;
  height: 180px;
  margin-bottom: 0.75rem;
  border-radius: var(--border-radius-card);
  object-fit: cover;
}

.takaya-articles-preview__category {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.takaya-articles-preview__title {
  font-size: 1rem;
  font-weight: bold;
  color: var(--color-primary-dark);
  margin: 0;
}

@media (max-width: 767px) {
  .takaya-articles-preview {
    grid-template-columns: 1fr;
  }
}

/*
 * Hero Slider (block_content bundle hero_slider, field_slides paragraphs).
 * It renders inside Olivero's .region--content.grid-full, which places
 * un-positioned children as a single narrow grid track (further reduced
 * by .layout--pass--content-medium). Break out to full viewport width --
 * same technique already proven for .takaya-projects-megapanel in nav.css.
 */
.takaya-hero-slider {
  grid-column: 1 / -1;
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
}

.takaya-hero-slider__track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

/*
 * The slider's only direct child is the field wrapper (.field__items),
 * not the individual slides -- they're one level deeper (.field__item).
 * The flex row and slide sizing have to target that actual nesting,
 * not "> *" on the track.
 */
.takaya-hero-slider__track .field__items {
  display: flex;
  gap: 0;
}

.takaya-hero-slider__track .field__item {
  flex: 0 0 100%;
  scroll-snap-align: start;
  /* hero-slider.js sets --hero-slide-height to viewport height minus the
     actual rendered header height; 480px is the no-JS fallback. */
  height: var(--hero-slide-height, 480px);
  overflow: hidden;
}

/*
 * Source images are different sizes/orientations (landscape and
 * portrait). object-fit: cover crops each to the fixed slide height
 * above so the hero doesn't change height -- and doesn't leave empty
 * space -- as slides change.
 */
.takaya-hero-slider__track img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.takaya-hero-slider .takaya-placeholder-box {
  height: 480px;
  width: 100%;
}

.takaya-hero-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.35);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.takaya-hero-slider__arrow:hover,
.takaya-hero-slider__arrow:focus {
  background: rgb(0 0 0 / 0.55);
}

.takaya-hero-slider__arrow--prev {
  left: 1rem;
}

.takaya-hero-slider__arrow--next {
  right: 1rem;
}

/*
 * Статичный хедер внутренних страниц (один слайд, широкая узкая картинка
 * донора 2056×500) — переиспользует .takaya-hero-slider, но JS
 * (hero-slider.js) считает высоту как "весь экран минус хедер" для ВСЕХ
 * .takaya-hero-slider на странице, то есть картинка растягивалась на
 * полный вьюпорт как на главной, а не узкой полосой как на сайте-доноре.
 * !important обязателен: JS пишет --hero-slide-height инлайн-стилем
 * (custom property), обычное правило через var() его не перебьёт.
 */
#block-takayatheme-hero-static-inner .takaya-hero-slider__track .field__item {
  height: 220px !important;
}

@media (max-width: 767px) {
  #block-takayatheme-hero-static-inner .takaya-hero-slider__track .field__item {
    height: 140px !important;
  }
}

/*
 * Shared heading for homepage preview sections (About, Projects, Plans,
 * Team, Insights). None of these sections carry their own top padding, so
 * without a top margin here the heading sits flush against whatever
 * section precedes it.
 */
.takaya-section-heading {
  font-size: 2rem;
  font-weight: 700;
  margin: 3rem 0 1.5rem;
  color: var(--color-text);
}

/* Content Preview (block_content bundle content_preview -- About/Plans) */
.takaya-content-preview {
  display: flex;
  gap: 3rem;
  align-items: center;
  padding: 2rem var(--container-padding, 1rem);
}

.takaya-content-preview__text {
  flex: 1 1 45%;
}

.takaya-content-preview__media {
  flex: 1 1 50%;
  position: relative;
}

.takaya-content-preview__media::before {
  content: '';
  position: absolute;
  inset: 24px -24px -24px 24px;
  background: var(--color-text);
  z-index: 0;
}

.takaya-content-preview__media .field--name-field-image,
.takaya-content-preview__media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-card);
}

.takaya-content-preview .field--name-field-image .takaya-placeholder-box {
  height: 260px;
}

.takaya-content-preview .field--name-field-body {
  color: var(--color-text);
}

.takaya-content-preview__cities {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0.5rem 2rem;
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text);
}

@media (max-width: 767px) {
  .takaya-content-preview {
    flex-direction: column;
  }

  .takaya-content-preview__media::before {
    inset: 16px -16px -16px 16px;
  }
}

/* Contact Info (block_content bundle contact_info) */
.takaya-contact-info {
  padding: 2rem var(--container-padding, 1rem);
  color: var(--color-text);
}

.takaya-contact-info .field--name-field-social-links a {
  color: var(--color-primary);
  margin-inline-end: 1rem;
  text-decoration: none;
}

/*
 * Project detail page (Task: rethinkmykonos.com reference) — title,
 * meta fields, description and share icons sit in the left column;
 * the gallery is a single stacked column of large photos on the right
 * (was a 2-up masonry grid above the description, full width). See
 * the two-column grid rules further down for how the region's direct
 * children get assigned to left/right.
 */
.takaya-project-gallery__grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.takaya-project-gallery__main,
.takaya-project-gallery__small {
  display: block;
}

.takaya-project-gallery__main img,
.takaya-project-gallery__small img,
.takaya-project-gallery__row-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--border-radius-card);
}

.takaya-project-gallery__row {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.takaya-project-gallery__row-item {
  display: block;
}

.takaya-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

/*
 * Olivero's `.layout-main-wrapper` is `position: relative; z-index: 2`
 * (layout.css) -- a stacking context of its own, capped below the
 * site header's `z-index: 101` (site-header.css). The lightbox's own
 * `z-index: 1000` only wins comparisons *inside* that context, so the
 * close/prev/next controls (pinned to the viewport's own corners/edges)
 * were unclickable -- the header's container silently absorbed the
 * click (confirmed live via elementFromPoint). Bumping the wrapper's
 * z-index only while a lightbox is open avoids touching it everywhere
 * else dropdowns/sticky headers rely on its normal stacking order.
 */
.layout-main-wrapper:has(.takaya-lightbox:target) {
  z-index: 200;
}

.takaya-lightbox:target {
  display: flex;
}

.takaya-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

.takaya-lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  color: #fff;
  font-size: 2rem;
  text-decoration: none;
  line-height: 1;
}

.takaya-lightbox__prev,
.takaya-lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 3rem;
  text-decoration: none;
  line-height: 1;
  padding: 0.5rem 1rem;
  user-select: none;
}

.takaya-lightbox__prev:hover,
.takaya-lightbox__next:hover {
  color: var(--color-primary-light);
}

.takaya-lightbox__prev {
  left: 0.5rem;
}

.takaya-lightbox__next {
  right: 0.5rem;
}

.takaya-video-hero__trigger {
  position: relative;
  display: block;
  background: #000;
  color: var(--color-white);
  text-decoration: none;
}

.takaya-video-hero__trigger img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.8;
}

.takaya-video-hero__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
}

.takaya-video-hero__caption {
  position: absolute;
  bottom: 16px;
  left: 16px;
  font-size: 0.9rem;
}

.takaya-video-hero__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.takaya-video-hero__overlay:target {
  display: flex;
}

.takaya-video-hero__overlay video {
  max-width: 90vw;
  max-height: 90vh;
}

.takaya-video-hero__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  color: var(--color-white);
  font-size: 2rem;
  text-decoration: none;
  line-height: 1;
}

.takaya-project-floor-plan {
  background-color: #F0F8FF;
  padding: 2rem;
  border-radius: 4px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}

.takaya-project-floor-plan__image img {
  width: 100%;
  display: block;
}

.takaya-project-floor-plan__legend {
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.8;
}

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

.takaya-project-team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.takaya-project-team__item {
  display: block;
  text-decoration: none;
  color: var(--color-text);
  text-align: center;
}

.takaya-project-team__item .takaya-placeholder-box {
  height: 120px;
  border-radius: 50%;
  margin-bottom: 0.75rem;
}

.takaya-project-team__name {
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--color-primary-dark);
  margin: 0;
}

.takaya-project-team__role {
  color: var(--color-muted);
  font-size: 0.8rem;
  margin: 0.25rem 0 0;
}

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

.takaya-project-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e0e0e0;
}

.takaya-project-navigation__all {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.85rem;
}

.takaya-project-navigation__prev-next {
  display: flex;
  gap: 2rem;
}

.takaya-project-navigation__prev,
.takaya-project-navigation__next {
  color: var(--color-primary-dark);
  text-decoration: none;
  font-weight: bold;
}

/*
 * Project detail page top section (rethinkmykonos.com reference):
 * title/meta/description/share in the left column, the gallery
 * stacked full-height in the right column, left column sticky while
 * the (taller) gallery scrolls past. Floor plan/team/navigation stay
 * in a second, regular one-column section below, full width.
 *
 * Built as a real two-region Layout Builder section
 * (`layout_twocol_section`, 33/67, flexbox -- see core's
 * twocol_section.css) instead of a CSS-only trick on flat siblings:
 * two earlier attempts (CSS Grid, then `float`) both fought the lack
 * of an actual left-column wrapper element. Grid hit a reproducible
 * Chromium bug inflating sibling row heights; float doesn't pull an
 * element to the top of its own column (it only floats from its own
 * position in normal flow), so the gallery only started level with
 * "Description", not the title -- and neither approach gives
 * `position: sticky` an element to apply to. The layout plugin's own
 * `.layout__region--first`/`--second` wrapper divs solve both.
 */
body.page-node-type-project .layout--twocol-section.layout--twocol-section--33-67 {
  gap: 0 3rem;
  align-items: flex-start;
}

body.page-node-type-project .layout__region--first {
  position: sticky;
  top: calc(var(--site-header-height-wide) + var(--drupal-displace-offset-top, 0px) + 1.5rem);
  align-self: start;
}

@media (max-width: 39.99em) {
  body.page-node-type-project .layout__region--first {
    position: static;
  }
}

/*
 * Location/Type/Area/Year as a compact labeled list under the
 * description. Olivero's layout-field.css ships
 * `.block-layout-builder:not(:last-child) .field { margin-block-end:
 * var(--sp2) }` (36px) -- 3 class-equivalents of specificity, beating
 * a plain `.block-field-... .field` (2) outright regardless of source
 * order, and it's the logical `margin-block-end` property rather than
 * `margin-bottom`, so a same-named-property override wouldn't even
 * match it. Repeating `.block-layout-builder` in the selector ties
 * specificity (3 vs 3); blocks.css loads after Olivero's core CSS, so
 * the tie resolves in this rule's favor.
 */
.block-layout-builder.block-field-blocknodeprojectfield-location .field,
.block-layout-builder.block-field-blocknodeprojectfield-type .field,
.block-layout-builder.block-field-blocknodeprojectfield-area .field,
.block-layout-builder.block-field-blocknodeprojectfield-year .field {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.9rem;
  margin-block-end: 0;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.block-field-blocknodeprojectfield-location .field__label,
.block-field-blocknodeprojectfield-type .field__label,
.block-field-blocknodeprojectfield-area .field__label,
.block-field-blocknodeprojectfield-year .field__label {
  flex-shrink: 0;
  min-width: 6rem;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.block-takaya-project-share {
  margin-top: 1.5rem;
}

/*
 * Project description collapse/expand (rethinkmykonos.com reference:
 * a short preview + "+ SEE MORE"). ~245px caps the collapsed state at
 * roughly 9 lines / ~400 characters at this column's width (394px,
 * 16px/27px text) -- an approximation, not an exact character count,
 * because the smooth-transition requirement needs a numeric
 * `max-height` to animate (text can't be sliced mid-word without a
 * server-side truncation that would then make "Show less" lose the
 * back half of the text entirely).
 */
.takaya-project-description__checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.takaya-project-description__items {
  position: relative;
  max-height: 245px;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.takaya-project-description__items::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 2.5rem;
  background: linear-gradient(to bottom, transparent, var(--color-white));
  transition: opacity 0.3s ease;
}

.takaya-project-description__checkbox:checked ~ .takaya-project-description__items {
  max-height: 1000px;
}

.takaya-project-description__checkbox:checked ~ .takaya-project-description__items::after {
  opacity: 0;
}

.takaya-project-description__toggle {
  display: inline-block;
  margin-top: 0.75rem;
  cursor: pointer;
  color: var(--color-primary);
  font-weight: bold;
  font-size: 0.85rem;
  text-decoration: underline;
}

.takaya-project-description__toggle-less {
  display: none;
}

.takaya-project-description__checkbox:checked ~ .takaya-project-description__toggle .takaya-project-description__toggle-more {
  display: none;
}

.takaya-project-description__checkbox:checked ~ .takaya-project-description__toggle .takaya-project-description__toggle-less {
  display: inline;
}

.takaya-project-share {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.takaya-project-share__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.takaya-project-share__icon {
  display: inline-flex;
  color: var(--color-text);
}

.takaya-project-share__icon:hover {
  color: var(--color-primary);
}

/* Contact Form Block (Phase 8) */
.takaya-contact-form__submit {
  background-color: #185FA5;
  color: #FFFFFF;
  border-radius: 6px;
  border: none;
  padding: 0.75rem 2rem;
  font-weight: 600;
  cursor: pointer;
}

.takaya-contact-form__submit:hover {
  background-color: #134e87;
}

.takaya-contact-form__caption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-muted, #666);
}

/* Google Maps Block (Phase 8) */
.takaya-google-maps {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
}

.takaya-google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Plans Preview Block (homepage, wireframe "03 · Планы / Чертежи") */
.takaya-plans-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.takaya-plans-preview__item {
  flex: 1 1 300px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-card);
  overflow: hidden;
}

.takaya-plans-preview__image img {
  width: 100%;
  height: auto;
  display: block;
}

.takaya-plans-preview__caption {
  padding: 12px 16px;
}

.takaya-plans-preview__title {
  display: block;
  font-weight: 600;
  color: var(--color-text);
}

.takaya-plans-preview__location {
  display: block;
  font-size: 0.85rem;
  color: var(--color-muted);
}

/*
 * About page rebuild (Task 5): pull-quote, "О студии" text+stats+image
 * block, and the full 5-member team grid.
 */
.takaya-about-quote {
  border-left: 3px solid var(--color-primary);
  padding-left: 20px;
  margin: 32px 0;
  font-style: italic;
  color: var(--color-text);
}

.takaya-about-studio {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
}

.takaya-about-studio__text {
  flex: 1 1 400px;
}

.takaya-about-studio__stats {
  display: flex;
  gap: 32px;
  margin-top: 16px;
}

.takaya-about-studio__stat-value {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-primary);
}

.takaya-about-studio__stat-label {
  display: block;
  font-size: 0.85rem;
  color: var(--color-muted);
}

.takaya-about-studio__image {
  flex: 1 1 300px;
}

.takaya-about-studio__image img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-card);
}

.takaya-about-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.takaya-about-team-grid__card {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-card);
  padding: 20px;
}

.takaya-about-team-grid__name {
  display: block;
  font-weight: 600;
  color: var(--color-text);
}

.takaya-about-team-grid__role {
  display: block;
  font-size: 0.85rem;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.takaya-about-team-grid__quote {
  font-size: 0.9rem;
  color: var(--color-muted);
  font-style: italic;
}

.takaya-about-team-grid__link {
  display: inline-block;
  margin-top: 8px;
  color: var(--color-primary);
  text-decoration: none;
}


@media all {
  /*
   * Стрелки листания нужны только там, где кадров больше одного. На внутренних
   * страницах обложка одна, а стрелки всё равно висели поверх картинки и
   * выглядели неработающим элементом.
   */
  body:not(.path-frontpage) .takaya-hero-slider__arrow {
    display: none;
  }
}