/* =========================================================
   painting-view.css — .painting-view block
   Right-side overlay (66% width) with stacked images
   over the blurred site background.
   ========================================================= */

/* ---------------------------------------------------------
   .painting-view (root)
   --animate-duration is consumed by Animate.css classes
   (animate__slideInRight, animate__fadeIn, etc.)
   --------------------------------------------------------- */
.painting-view {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
  --animate-duration: 1s;
}

/* ---------------------------------------------------------
   .painting-view__backdrop
   Clickable button covering the viewport behind the panel.
   Blurs the site through backdrop-filter so the panel itself
   stays crisp (panel is in normal stacking above backdrop).
   --------------------------------------------------------- */
.painting-view__backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: var(--z-modal-backdrop);
}

/* ---------------------------------------------------------
   .painting-view__panel
   Right-side scrollable container (66% of viewport width)
   --------------------------------------------------------- */
.painting-view__panel {
  position: relative;
  z-index: var(--z-modal);
  width: 66%;
  height: 100dvh;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* ---------------------------------------------------------
   .painting-view__header
   Sticky strip the full width of the panel (= image width)
   --------------------------------------------------------- */
.painting-view__header {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  background-color: transparent;
  border-bottom: 1px solid var(--color-overlay-text);
}

/* ---------------------------------------------------------
   .painting-view__close
   "× закрыть" button on the left side of the header
   --------------------------------------------------------- */
.painting-view__close {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-md);
  color: var(--color-overlay-text);
  transition: opacity var(--transition-base);
}

.painting-view__close:hover,
.painting-view__close:focus-visible {
  opacity: 0.6;
}

.painting-view__close-icon {
  font-size: 1.75rem;
  line-height: 1;
}

.painting-view__close-label {
  text-transform: lowercase;
}

/* ---------------------------------------------------------
   .painting-view__images
   Vertical stack of all painting images (full panel width)
   --------------------------------------------------------- */
.painting-view__images {
  display: flex;
  flex-direction: column;
  padding-bottom: 40px;
}

/* ---------------------------------------------------------
   .painting-view__slide
   Outer transparent container per image. Sets the spacing:
   40px on top, 10px on the sides, 0 on the bottom — so
   adjacent slides keep a consistent 40px rhythm.
   --------------------------------------------------------- */
.painting-view__slide {
  display: block;
  width: 100%;
  padding: 40px 10px 0;
  background-color: transparent;
}

/* ---------------------------------------------------------
   .painting-view__frame
   Inner container that holds the image. Centers the image
   horizontally; the image itself fits fully into the frame
   either by width or by height (object-fit: contain).
   --------------------------------------------------------- */
.painting-view__frame {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

.painting-view__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100dvh - 40px);
  object-fit: contain;
}

/* ---------------------------------------------------------
   .painting-view__meta
   Painting info block inserted between the first and the
   second images. Title row has no separator; every property
   row has a 1px bottom line (incl. the very last one).
   --------------------------------------------------------- */
.painting-view__meta {
  width: 100%;
  padding: 40px var(--space-lg) 0;
  text-align: left;
  color: var(--color-overlay-text);
  background-color: transparent;
}

.painting-view__meta-title {
  margin: 0 0 var(--space-md);
  font-family: var(--font-family-base);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
  font-weight: 500;
  color: var(--color-overlay-text);
}

.painting-view__meta-list {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-lg);
}

.painting-view__meta-row {
  display: contents;
}

.painting-view__meta-key,
.painting-view__meta-value {
  margin: 0;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-overlay-text);
}

.painting-view__meta-key {
  font-family: var(--font-family-ui);
  color: var(--color-overlay-text);
}

.painting-view__meta-value {
  font-family: var(--font-family-base);
  color: var(--color-overlay-text);
}

/* =========================================================
   VARIANT: Contacts (re-uses the same .painting-view overlay)
   Meta-block with icons + Yandex Maps iframe occupies the same
   space as a painting image.
   ========================================================= */

/* Icon sits alone in the key column, fixed width keeps text
   in the value column aligned across every row. */
.painting-view__meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  font-size: 1.1em;
  color: var(--color-overlay-text);
}

/* Inline anchor inside meta values (phone link) */
.painting-view__meta-value a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-base), opacity var(--transition-base);
}

.painting-view__meta-value a:hover,
.painting-view__meta-value a:focus-visible {
  border-bottom-color: var(--color-overlay-text);
}

/* Telegram / Max link row under the meta-list */
.painting-view__contacts-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-lg) 0 0;
}

.painting-view__contacts-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-overlay-text);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-md);
  color: var(--color-overlay-text);
  text-decoration: none;
  transition: opacity var(--transition-base), background-color var(--transition-base);
}

.painting-view__contacts-link:hover,
.painting-view__contacts-link:focus-visible {
  background-color: rgba(255, 255, 255, 0.12);
}

.painting-view__contacts-link i {
  font-size: 1.1em;
}

/* Yandex Maps iframe — drops into .painting-view__frame and fills
   the same space the painting image would occupy (same max-height). */
.painting-view__map {
  display: block;
  width: 100%;
  max-width: 100%;
  height: calc(100dvh - 40px);
  max-height: calc(100dvh - 40px);
  aspect-ratio: 4 / 3;
  border: 0;
}

@media (max-width: 768px) {
  .painting-view__map {
    height: 70dvh;
  }
}

/* ---------------------------------------------------------
   Body lock when overlay is open
   --------------------------------------------------------- */
body.painting-view-open {
  overflow: hidden;
}

/* =========================================================
   Responsive — mobile (≤ 768px)
   On narrow screens the panel takes full viewport width to
   keep image content readable.
   ========================================================= */
@media (max-width: 768px) {
  .painting-view__panel {
    width: 100%;
  }
}