/* PlusTova custom layer — loaded after the Webflow stylesheet. */

/* nav logo sizing (replaces the 90x20 template SVGs) */
.logo-nav { height: 34px; width: auto; }

/* Pull-quote section (replaces the template's cropped-testimonial reveal) */
.section_croped-testimonial { min-height: 0; height: auto; padding: 0; background: #fffff8; overflow-x: clip; }
.pt-quote {
  position: relative;
  text-align: center;
  padding: 48px 0 clamp(84px, 12vw, 150px);
}
.pt-quote_eyebrow {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #2b2b28;
  opacity: 0.65;
  margin-bottom: 22px;
}
.pt-quote_text {
  background: none;
  border: 0;
  padding: 0;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.16;
  color: #2b2b28;
  max-width: 21ch;
  margin: 0 auto;
  text-wrap: balance;
}
.pt-quote_meta {
  margin-top: 26px;
  font-size: 15px;
  color: #2b2b28;
  opacity: 0.72;
}
@media (max-width: 991px) {
    }
@media (max-width: 767px) {
    .pt-quote { padding: 40px 0 72px; }
}
/* mask window: template crops the 1440px canvas to a 512px slot (object-fit:none);
   cover scales the whole lockup into view instead of amputating its ends */
.mask_with-logo { width: 100%; height: 60vh; object-fit: cover; }

/* mask zoom origin: center of the plus bar -> the reveal opens as a symmetric slit */
.wrap_image-with-mask { transform-origin: 32.32% 49.96%; }

/* Guest book: drifting rows of review notes + stats band */
.pt-reviews {
  margin-top: clamp(36px, 4.5vw, 64px);
  margin-bottom: -30px;
  display: grid;
  gap: 22px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 36px 0 54px;
  overflow-x: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.pt-reviews_track {
  display: flex;
  align-items: stretch;
  will-change: transform;
  transform: translateZ(0);
  gap: 24px;
  width: max-content;
  animation: pt-drift-a 70s linear infinite;
}
.pt-reviews_row.is-b .pt-reviews_track { animation: pt-drift-b 88s linear infinite; }
@keyframes pt-drift-a { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pt-drift-b { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.pt-note {
  width: 320px;
  flex: none;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: #ffffff;
  border: 1px solid oklch(35% 0.02 190 / 0.14);
  border-radius: 3px;
  padding: 18px 20px 14px;
  box-shadow:
    0 1px 3px oklch(30% 0.03 190 / 0.07),
    0 10px 22px -10px oklch(30% 0.03 190 / 0.14);
  position: relative;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.pt-note:hover {
  transform: translateY(-10px) scale(1.07);
  z-index: 2;
  box-shadow:
    0 2px 5px oklch(30% 0.03 190 / 0.08),
    0 16px 26px -10px oklch(30% 0.03 190 / 0.16);
}
.pt-note_text { font-size: 15px; line-height: 1.45; color: #2b2b28; }
.pt-note_meta {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12.5px;
  color: #2b2b28;
}
.pt-note_name { font-weight: 650; }
.pt-note_year {
  margin-left: auto;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 15px;
  opacity: 0.85;
}
.pt-note_src { opacity: 0.55; letter-spacing: 0.05em; text-transform: uppercase; font-size: 10.5px; }

.pt-stats {
  margin-top: clamp(42px, 5vw, 72px);
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: clamp(28px, 6vw, 96px);
}
.pt-stat { text-align: center; }
.pt-stat_num {
  display: block;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1;
  color: #2b2b28;
}
.pt-stat_label {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: #2b2b28;
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .pt-reviews_track { animation: none !important; flex-wrap: wrap; width: auto; justify-content: center; }
  .pt-reviews_track > .pt-dup { display: none; }
  .pt-reviews { mask-image: none; -webkit-mask-image: none; }
}
@media (max-width: 767px) {
  .pt-note { width: 260px; }
  .pt-stats { gap: 28px; }
}


/* footer logo: the +това lockup replaces the template's arch icon */
.logo_icon-footer { width: auto; height: auto; }
.logo_icon-footer img { height: 48px; width: auto; }
/* newsletter column rhythm: single gap source, 40px logo x phi^-1 = 25px */
.left-footer { row-gap: 25px; }
.left-footer .logo_icon-footer {
  display: flex;
  justify-content: center;
  line-height: 0;
  margin: 0;
}
.left-footer .heading_newsletter { margin: 0; padding: 0; text-align: center; }
.left-footer .heading_newsletter h2 { margin: 0; }
.left-footer .form-block_footer { margin: 0; }

.pt-specs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 0;
  padding: 0 24px;
  color: #fffff8;
  font-size: 12.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.85;
}
.pt-specs span { padding: 0 22px; }
.pt-specs span + span { border-left: 1px solid oklch(98% 0.01 100 / 0.35); }
@media (max-width: 767px) {
  .pt-specs { bottom: 20px; font-size: 11px; }
  .pt-specs span { padding: 0 12px; }
}

/* Space-overview mosaic (replaces the founder-quote / showreel section).
   Cream grout lines nod to the venue's preserved mosaic floor. */
.section_home-video { height: auto; min-height: 0; padding: 0; }
.pt-mosaic-wrap { position: relative; }
.pt-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 11vw;
  gap: 3px;
  background: #fffff8;
}
.pt-tile { margin: 0; overflow: hidden; }
.pt-tile.is-w2 { grid-column: span 2; }
.pt-tile.is-h2 { grid-row: span 2; }
.pt-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.pt-tile:hover img { transform: scale(1.05); }
.pt-mosaic-wrap .pt-specs {
  bottom: 0;
  padding: 110px 24px 30px;
  background: linear-gradient(transparent, oklch(14% 0.03 190 / 0.42) 45%, oklch(12% 0.03 190 / 0.88));
  font-size: 13.5px;
  opacity: 1;
  text-shadow: 0 1px 10px oklch(10% 0.03 190 / 0.5);
}
.pt-mosaic-wrap .pt-specs span + span { border-left-color: oklch(98% 0.01 100 / 0.5); }
@media (max-width: 767px) {
  .pt-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 36vw; }
  .pt-tile.is-w2 { grid-column: span 2; }
  .pt-tile.is-h2 { grid-row: span 1; }
  .pt-mosaic-wrap .pt-specs { position: static; background: #2b2b28; padding: 18px 12px; }
}

/* TEMPORARY preview lock: header shows only the logo; see PREVIEW_LOCK in plustova.js */
.preview-lock .right_navbar { justify-content: flex-end; }
.preview-lock .right_navbar .nav-menu { display: none !important; }
.preview-lock .right_navbar .menu-button { display: none !important; }
/* locked links look and hover like normal; the JS click handler blocks navigation */


/* Hero mosaic background: the space itself as a wall of tiles under a cream
   veil, so the headline keeps its contrast. Tiles assemble in after the title. */
.section_hero-home { position: relative; }
.section_hero-home .padding-global { position: relative; z-index: 2; }
.hero-mosaic { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-mosaic_grid {
  position: absolute;
  inset: 0 0 -4px 0; /* overshoot: fr-row rounding can never expose a seam at the hero's bottom edge */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 3px;
  background: #fffff8;
}
.hm-tile { margin: 0; overflow: hidden; }
.hm-tile.is-w2 { grid-column: span 2; }
.hm-tile.is-h2 { grid-row: span 2; }
.hm-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-mosaic_veil {
  position: absolute;
  inset: 0;
  background: oklch(18% 0.006 110 / 0.55);
}
@media (max-width: 767px) {
  .hero-mosaic_grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, 1fr); }
  .hm-tile.is-h2 { grid-row: span 1; }
}
/* gallery leads the intro: tiles start hidden and pop in as their images
   arrive (inline script in the hero chunk adds .pt-in), no JS bundle wait.
   Without JS the pt-js class never lands and everything shows statically. */
.pt-js .hero-mosaic { opacity: 0; transition: opacity 0.5s ease-out; }
.pt-js .hero-mosaic.pt-in { opacity: 1; }
.pt-js .hm-tile {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.55s ease-out, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.pt-js .hm-tile.pt-in { opacity: 1; transform: none; }

/* hero title: pre-split into .pt-w word spans in the markup and animated
   here in pure CSS, so the entrance starts at first paint with no JS wait.
   Mirrors the template tween: y 50% -> 0, fade, 0.05s word stagger. */
.pt-heading .pt-w { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .pt-heading .pt-w {
    /* base delay lets the gallery cascade lead before the words rise */
    animation: pt-word-in 0.65s cubic-bezier(0.215, 0.61, 0.355, 1) calc(var(--d, 0s) + 0.55s) both;
  }
  @keyframes pt-word-in {
    from { opacity: 0; transform: translateY(55%); }
    to { opacity: 1; transform: none; }
  }
}

/* Client: no green intro phase. IX3 applies the dark from-state as inline
   styles at init; these overrides pin the final colors so the title entrance
   plays directly in petrol on cream, then the gallery fades in. */
.section_hero-home { background-color: #2b2b28 !important; color: #fffff8 !important; }
/* full-viewport hero: the gallery fills the first screen on any display */
.section_hero-home {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rest-content { background-color: #fffff8 !important; }

/* Client: dark green -> warm graphite. The template's entire dark tier shares
   one petrol value; overriding the variables recolors all text and dark
   surfaces coherently. Logo keeps petrol as the lone brand accent. */
:root {
  --_🎨-color--base---base--dark-100: #2b2b28;
  --_🎨-color--base---base--dark-88: #2b2b28;
  --_🎨-color--base---base--dark-64: #2b2b28;
  --_🎨-color--base---base--dark-48: #2b2b28;
  --_🎨-color--base---base--dark-32: #2b2b28;
  --_🎨-color--base---base--dark-16: #2b2b28;
  --_🎨-color--base---base--dark-8: #2b2b28;
  --_🎨-color--base---base--dark-6: #2b2b28;
  --_🎨-color--base---base--dark-4: #2b2b28;
  --_🎨-color--base---base--dark-0: #2b2b28;
  --_🎨-color--base---depth--dark: #2b2b28;
  --_🎨-color--base---colors--ceburgundy: #2b2b28;
}

/* dark hero: header runs light while over the hero, flips back after */
.pt-nav-light .logo-nav.is-dark { display: none !important; }
.pt-nav-light .logo-nav.is-light { display: inline-block !important; opacity: 1 !important; width: auto !important; height: 34px !important; max-width: none !important; }
.pt-nav-light .logo-nav.is-second-light { display: none !important; }
.pt-nav-light .right_navbar { color: #fffff8; }
.pt-nav-light .btn_nav a, .pt-nav-light .btn_nav .text-button { color: #fffff8; }
.pt-nav-light .btn_nav .cta_fill-line { background-color: #fffff8; }

/* dark hero: secondary button text + underline in cream */
.section_hero-home .button-group_hero-home .cta_tertiary,
.section_hero-home .button-group_hero-home .cta_tertiary .text-button {
  color: #fffff8 !important;
}
.section_hero-home .button-group_hero-home .cta_tertiary .cta_fill-line,
.section_hero-home .button-group_hero-home .underline_cta-button {
  background-color: oklch(98% 0.01 100 / 0.9);
}

/* on scroll the hero dims a touch deeper instead of being covered by the
   template's solid gray tone sheet (IX3 still drives the fade-in) */
.overlay_hero-home {
  background-color: rgba(12, 12, 10, 0.45) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* header plate: IX3 fades .nav-bg_desktop.is-base in on scroll. Over the
   dark hero that plate must be hero-charcoal, not the template's white;
   past the hero it returns to white under graphite text. Transitions keep
   the handoff at the hero boundary smooth in both scroll directions. */
.nav-bg_desktop.is-base { transition: opacity 0.3s ease; }
.pt-nav-light .nav-bg_desktop { opacity: 0 !important; }
.right_navbar, .btn_nav a, .btn_nav .text-button { transition: color 0.3s ease; }

/* 2011 logo-mask section: white ground instead of mint (plate fill in
   mask-plustova.svg is switched to match) */
.color-bg-top-bottom { background-color: #fffff8 !important; }

/* Compact footer: newsletter block and page links are gone; the dark tile
   holds just logo left + contact info right, vertically centered. */
.footer_mid-tile { margin-bottom: 0; align-items: center; }
.footer_bottom { padding-top: 10px; grid-row-gap: var(--spacing--space-small); }
.left-footer { justify-content: center; }
/* contact details: bigger and fully opaque so they carry the footer */
.right_footer .footer_info-tile .text-size-small {
  font-size: 1.1rem;
  line-height: 1.55;
  opacity: 1;
}
.footer_socials .cta_tertiary .text-button { font-size: 1.1rem; }

/* footer: single-band layout. Top row: copyright + Контакти. Dark tile:
   logo left, contact info as one horizontal band right. */
.wrap_footer-top { padding-top: 26px; padding-bottom: 26px; }
.footer_top-tile,
.left_footer-top,
.right_footer-top { min-height: 0; height: auto; padding: 0; }
.footer_top-tile { display: flex; justify-content: space-between; align-items: center; }
.footer_mid-tile { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.right_footer {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  gap: clamp(28px, 5vw, 72px);
}
.right_footer .footer_info-tile,
.right_footer .footer_socials { align-items: flex-start; }
.right_footer .text_right-aligned { text-align: left; }
.bottom_footer { margin-top: 0; padding: 10px 0 18px; }
@media (max-width: 767px) {
  .footer_mid-tile { flex-flow: column; align-items: flex-start; gap: 28px; }
  .right_footer { flex-wrap: wrap; }
}

/* footer v2: one dark tile with breathing room. Logo beside three labeled
   columns, then a bordered legal bar (copyright + Контакти/Поверителност). */
.footer_bottom { padding: clamp(52px, 7vw, 84px) 0 0; }
.footer_mid-tile { align-items: flex-start; }
.logo_icon-footer img { height: 56px; }
.pt-foot-label {
  font-size: 12.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.72;
  margin-bottom: 10px;
}
.right_footer .footer_info-tile { row-gap: 8px; }
.right_footer .footer_info-tile .text-size-small {
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 500;
  color: #fffff8;
}
.footer_info-tile a { text-decoration: none; }
.footer_info-tile a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pt-foot-bar {
  margin-top: clamp(40px, 5vw, 60px);
  padding: 20px 0 26px;
  border-top: 1px solid oklch(98% 0.01 100 / 0.14);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px 28px;
  flex-wrap: wrap;
}
.pt-foot-bar_links { display: flex; align-items: center; gap: 26px; }
@media (max-width: 767px) {
  .logo_icon-footer img { height: 48px; }
  .right_footer { gap: 28px 40px; }
}

/* Service cards: client photos instead of the template's colored shapes.
   Dark scrim keeps the heading, copy, and number readable in cream. */
.card_shape, .card_shape.is-second, .card_shape.is-third {
  position: relative;
  overflow: hidden;
  background-color: #2b2b28;
  color: #fffff8;
}
.card_shape .heading-style-h3 { color: #fffff8; }
.pt-card-bg { position: absolute; inset: 0; }
.pt-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.card_shape:hover .pt-card-photo { transform: scale(1.045); }
.pt-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    oklch(18% 0.008 110 / 0.66),
    oklch(18% 0.008 110 / 0.24) 48%,
    oklch(14% 0.008 110 / 0.52)
  );
}
.card-shape_top-tile, .wrap_number { position: relative; z-index: 5; }

/* 'Повече от зала под наем' block: the template indents the heading's
   first line 59.5%; the client wants it plain and left-aligned instead */
.heading-indent { text-indent: 0; margin-top: 0.75rem; }
.heading-indent .heading-style-h3 { max-width: 30ch; }

/* Primary CTA: terracotta, taken from the venue's own brick and clay
   (89.8% of the colour in the photos sits in the 15-45deg warm band;
   the template's lavender sat at 285deg). Cream label for 4.69:1.
   No !important here so the engine's hover animation still runs. */
.btn-bg { background-color: #b45a36; }
.cta_small { color: #fffff8; }

/* Client: hero headline in Montserrat, all caps. Caps need the serif's
   tight -2px tracking replaced with a hair of positive spacing, and a
   heavier weight to hold up over the photos. */
.pt-heading h1,
.absolute-heading .heading-style-h1 {
  font-family: "Montserrat", "Inter Tight", system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  line-height: 1.12;
  text-wrap: balance;
}