/*
Theme Name: Brooklyn Child — Estrada Rybnicka
Template: brooklyn
Description: Child theme for Estrada Rybnicka dual-brand site (Hale-Wynajem + HNP Polska)
Version: 1.22.0
Author: Estrada Rybnicka
*/

/* ============================================================
   CSS CUSTOM PROPERTIES — DUAL BRAND COLOR SYSTEM
   ============================================================ */

:root {
  /* Base (shared) */
  --color-bg:              #FFFFFF;
  --color-bg-light:        #F8F9FA;
  --color-bg-dark:         #1A1A2E;
  --color-text:            #2D2D2D;
  --color-text-light:      #6B7280;
  --color-border:          #E5E7EB;
  --color-white:           #FFFFFF;

  /* Gateway default (dark navy) */
  --color-accent:          #1A1A2E;
  --color-accent-hover:    #2d2d4e;
  --color-accent-light:    #f0f0f5;
  --color-accent-gold:     #D4A843;
  --color-hero-overlay:    rgba(26, 26, 46, 0.70);
}

/* Hale-Wynajem sub-brand */
body.section-hale {
  --color-accent:              #4281A4;   /* cerulean */
  --color-accent-hover:        #386e8b;   /* cerulean -15% */
  --color-accent-light:        #d2d5dd;   /* pale-slate */
  --color-hero-overlay:        rgba(66, 129, 164, 0.75);
  --color-accent-dark-overlay: rgba(20, 39, 49, 0.92); /* accent at 30% */

  /* Brand palette — named by role */
  --hale-bg-dark:          #020300;   /* dark section backgrounds + text on light */
  --hale-interactive:      #4281A4;   /* action / button color */
  --hale-interactive-hover:#386e8b;   /* hover state of interactive */
  --hale-bg-light:         #e8ebe4;   /* light section backgrounds */
  --hale-bg-cta:           #36311f;   /* CTA / footer section background */
}

/* HNP Polska sub-brand (blue) */
body.section-hnp {
  --color-accent:          #2563EB;
  --color-accent-hover:    #1D4ED8;
  --color-accent-light:    #EFF6FF;
  --color-hero-overlay:    rgba(37, 99, 235, 0.75);
}

/* ============================================================
   TYPOGRAPHY — POPPINS (headings) + INTER (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=IBM+Plex+Mono:wght@400;500&family=Nunito+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

body,
p,
li,
td,
input,
textarea,
select {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--color-text);
}

/* ============================================================
   BUTTONS — CTA STYLES
   ============================================================ */

/* Primary */
.btn-primary,
.ut-btn,
a.ut-btn,
.vc_btn3.vc_btn3-color-juicy-pink,
.wpcf7-submit {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #FFFFFF !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 14px 32px !important;
  border-radius: 4px !important;
  transition: all 0.3s ease !important;
}
.btn-primary:hover,
.ut-btn:hover,
a.ut-btn:hover {
  background: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
  transform: scale(1.02);
}

/* Secondary (outline) */
.btn-secondary,
.ut-btn-outline {
  background: transparent !important;
  border: 2px solid var(--color-accent) !important;
  color: var(--color-accent) !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 14px 32px !important;
  border-radius: 4px !important;
  transition: all 0.3s ease !important;
}
.btn-secondary:hover,
.ut-btn-outline:hover {
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
}

/* Ghost (on dark backgrounds) */
.btn-ghost {
  background: transparent !important;
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 14px 32px !important;
  border-radius: 4px !important;
  transition: all 0.3s ease !important;
}
.btn-ghost:hover {
  background: #FFFFFF !important;
  color: var(--color-bg-dark) !important;
}

/* ============================================================
   TOP BAR
   ============================================================ */

#ut-topbar {
  background: var(--color-bg-dark);
  color: var(--color-text-light);
  font-family: 'Nunito Sans', sans-serif;
  font-size: 13px;
}

#ut-topbar a {
  color: #9CA3AF;
  text-decoration: none;
  transition: color 0.2s ease;
}

#ut-topbar a:hover {
  color: var(--color-accent);
}

/* ============================================================
   HEADER — BRAND SWITCHER
   ============================================================ */

.brand-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
}

.brand-switcher a {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 3px;
  text-decoration: none;
  transition: all 0.2s ease;
  color: var(--color-text-light);
  border-bottom: 2px solid transparent;
}

.brand-switcher a:hover,
.brand-switcher a.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

body.section-hale .brand-switcher a.hale-link {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  font-weight: 700;
}

body.section-hnp .brand-switcher a.hnp-link {
  color: #2563EB;
  border-bottom-color: #2563EB;
  font-weight: 700;
}

/* ============================================================
   GATEWAY: SPLIT-SCREEN FRONT PAGE
   Element IDs are deterministic from setup-split-frontpage.php counter.
   sp000100 = split wrapper
   sp000101 = left panel (Hale)
   sp000103 = heading widget, panel 1
   sp000104 = description widget, panel 1
   sp000106 = right panel (HNP)
   sp000108 = heading widget, panel 2
   sp000109 = description widget, panel 2
   ============================================================ */

/* Split wrapper — fills full viewport */
.elementor-element-sp000100 {
  height: 100vh !important;
  min-height: 400px !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 0 !important;
}

/* Panels — stretch to fill wrapper height */
.elementor-element-sp000101,
.elementor-element-sp000106 {
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  flex: 1 1 50% !important;
  height: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background-size: 103% auto !important;
  background-position: center center !important;
  transition: background-size 1.4s ease !important;
}

.elementor-element-sp000101:hover,
.elementor-element-sp000106:hover {
  background-size: 107% auto !important;
}

/* Top gradient — always visible so logo stays legible even on hover */
.elementor-element-sp000101::after,
.elementor-element-sp000106::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 100% !important;
  background: linear-gradient(to bottom, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Inner content wrapper fills full panel */
.elementor-element-sp000101 > .e-con-inner,
.elementor-element-sp000106 > .e-con-inner {
  height: 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Overlay transition (Elementor generates ::before with fixed background-color) */
.elementor-element-sp000101::before,
.elementor-element-sp000106::before {
  transition: background-color 0.4s ease !important;
}

/* Hover: remove overlay entirely, reveal original image */
.elementor-element-sp000101:hover::before,
.elementor-element-sp000106:hover::before {
  background-color: rgba(0, 0, 0, 0) !important;
}

/* Image: scale on hover */
.elementor-element-sp000101 .elementor-widget-image img,
.elementor-element-sp000106 .elementor-widget-image img {
  transition: transform 0.6s ease, opacity 0.4s ease;
  opacity: 0.88;
}

.elementor-element-sp000101:hover .elementor-widget-image img,
.elementor-element-sp000106:hover .elementor-widget-image img {
  transform: scale(1.05);
  opacity: 1;
}

/* Headings: white + text shadow */
.elementor-element-sp000101 .elementor-heading-title,
.elementor-element-sp000106 .elementor-heading-title {
  text-align: center !important;
  color: #FFFFFF !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.9) !important;
}

/* Logo widgets: pinned to top of panel, inside gradient area */
.elementor-element-sp000102,
.elementor-element-sp000107 {
  position: absolute !important;
  top: 32px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 3 !important;
  transition: transform 0.4s ease !important;
}

.elementor-element-sp000101:hover .elementor-element-sp000102,
.elementor-element-sp000106:hover .elementor-element-sp000107 {
  transform: scale(1.1) !important;
}

/* Heading widgets: fixed min-height so descriptions align at same Y in both panels */
.elementor-element-sp000103,
.elementor-element-sp000108 {
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Description <p>: white + shadow (bare <p> gets dark color from body rule) */
.elementor-element-sp000104 p,
.elementor-element-sp000109 p {
  text-align: center !important;
  color: #FFFFFF !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.9), 0 2px 16px rgba(0,0,0,0.7) !important;
}

/* Mobile: stack panels vertically, each 50vh */
@media (max-width: 767px) {
  .elementor-element-sp000100 {
    height: auto !important;
    flex-direction: column !important;
  }

  .elementor-element-sp000101,
  .elementor-element-sp000106 {
    flex: none !important;
    width: 100% !important;
    min-height: 50vh !important;
    height: auto !important;
  }
}

/* ============================================================
   SECTION: O FIRMIE — COUNTERS
   ============================================================ */

.section-ofirmie {
  background: var(--color-bg-light);
  padding: 80px 0;
}

.counter-item {
  text-align: center;
}

.counter-number {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 60px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  display: block;
  line-height: 1;
}

.counter-label {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 10px;
}

/* Elementor counter section: center items and increase spacing */
.elementor-element-hn000207 {
  --justify-content: center;
  --gap: 80px;
}
.elementor-element-hn000207 .e-con-inner {
  justify-content: center !important;
  gap: 80px !important;
}

/* ============================================================
   SECTION: CTA DARK
   ============================================================ */

.section-cta-dark {
  background: var(--color-bg-dark);
  padding: 80px 0;
  text-align: center;
}

.section-cta-dark h2 {
  color: #FFFFFF;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 32px;
}

/* ============================================================
   FOOTER
   ============================================================ */

#ut-footer {
  background: var(--color-bg-dark);
  color: #9CA3AF;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 14px;
}

#ut-footer h3,
#ut-footer .widget-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 20px;
}

#ut-footer a {
  color: #9CA3AF;
  text-decoration: none;
  transition: color 0.2s ease;
  line-height: 2;
  display: block;
}

#ut-footer a:hover {
  color: var(--color-accent);
}

#ut-footer .footer-logo-area p {
  color: #6B7280;
  font-size: 13px;
  line-height: 1.8;
}

.footer-bottom-bar {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 0;
  font-size: 13px;
  color: #6B7280;
}

/* ============================================================
   GRID & SPACING
   ============================================================ */

.container,
.ut-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 30px;
}

@media (max-width: 1024px) {
  .container,
  .ut-container {
    padding: 0 20px;
  }
}

/* ============================================================
   MOBILE
   ============================================================ */

.mobile-cta-sticky {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-accent);
  color: #FFFFFF;
  text-align: center;
  padding: 16px;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 9999;
  text-decoration: none;
}

@media (max-width: 767px) {
  .mobile-cta-sticky {
    display: block;
  }

  .counter-number {
    font-size: 44px;
  }

  .section-cta-dark h2 {
    font-size: 24px;
  }
}

/* ============================================================
   HERO SECTION REDESIGN — HALE-NAMIOTOWE (hn000200)
   ============================================================ */

/* 1. Replace solid green overlay with layered dark gradient.
      Left side darkens to protect left-aligned text;
      top/bottom darken for depth and CTA strip. */
.elementor-element-hn000200::before {
  background:
    linear-gradient(to right,  rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.05) 45%, rgba(0,0,0,0.60) 100%) !important;
  opacity: 1 !important;
}

/* 2. Push content to bottom third of hero for editorial weight */
.elementor-element-hn000200 > .e-con-inner {
  justify-content: flex-end !important;
  padding-bottom: 64px !important;
}

/* 3. Left-align heading — constrain width so text wraps at natural sentence break */
.elementor-element-hn000202 {
  max-width: 950px !important;
}

.elementor-element-hn000202 .elementor-heading-title {
  text-align: left !important;
  font-size: 72px !important;
  font-weight: 800 !important;
  line-height: 1.0 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.45) !important;
}

/* Accent bar below heading */
.elementor-element-hn000202 {
  position: relative !important;
  padding-bottom: 20px !important;
}
.elementor-element-hn000202::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 52px;
  height: 4px;
  background: var(--color-accent);
  border-radius: 2px;
}

/* 4. Left-align subtitle, cap width so it doesn't run full 1140px */
.elementor-element-hn000203 {
  max-width: 560px !important;
}
.elementor-element-hn000203 .elementor-widget-container p,
.elementor-element-hn000203 p {
  text-align: left !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,0.88) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5) !important;
  margin: 0 !important;
}

/* 5. Buttons: left-align, style both CTAs properly */
.elementor-element-hn000204 > .e-con-inner {
  justify-content: flex-start !important;
}

/* Primary CTA button */
.elementor-element-hn000205 .elementor-button {
  background: var(--color-accent) !important;
  border: 2px solid var(--color-accent) !important;
  color: #ffffff !important;
}
.elementor-element-hn000205 .elementor-button:hover {
  background: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
  color: #ffffff !important;
}

/* Phone CTA — white ghost button (equals visual weight to primary) */
.elementor-element-hn000206 .elementor-button {
  background: transparent !important;
  border: 2px solid rgba(255,255,255,0.75) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
.elementor-element-hn000206 .elementor-button:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* "Porównaj wszystkie rozmiary" button: green bg needs white text */
.elementor-element-hn000258 .elementor-button {
  color: #ffffff !important;
}
.elementor-element-hn000258 .elementor-button:hover {
  color: #ffffff !important;
}

/* 6. Stats strip: dark background anchors visually below hero */
.elementor-element-hn000207 {
  background: var(--hale-bg-dark, #020300) !important;
}
.elementor-element-hn000207 .elementor-counter-number-wrapper,
.elementor-element-hn000208 .elementor-counter-number-wrapper,
.elementor-element-hn000209 .elementor-counter-number-wrapper,
.elementor-element-hn000210 .elementor-counter-number-wrapper,
.elementor-element-hn000211 .elementor-counter-number-wrapper {
  color: var(--color-accent) !important;
}
.elementor-element-hn000207 .elementor-counter-title,
.elementor-element-hn000208 .elementor-counter-title,
.elementor-element-hn000209 .elementor-counter-title,
.elementor-element-hn000210 .elementor-counter-title,
.elementor-element-hn000211 .elementor-counter-title {
  color: rgba(255,255,255,0.50) !important;
}

/* 7. Hero responsive */
@media (max-width: 1024px) {
  .elementor-element-hn000202 .elementor-heading-title {
    font-size: 56px !important;
  }
}
@media (max-width: 767px) {
  .elementor-element-hn000202 .elementor-heading-title {
    font-size: 40px !important;
  }
  .elementor-element-hn000200 > .e-con-inner {
    padding-bottom: 40px !important;
  }
}

/* ============================================================
   EVENT TYPES SECTION — PHOTO CARDS (hn000259)
   hn000260 = section heading, hn000261 = subtitle
   hn000263/267/271/275/279/283/287/291/295/299/303 = event boxes
   Photo map: wesela, bankiet, koncert, targi, event, sportowe
   ============================================================ */

/* Dark section background — cards pop against it */
.elementor-element-hn000259 {
  background: var(--hale-bg-dark, #020300) !important;
}

/* Section heading & subtitle: white on dark */
.elementor-element-hn000260 .elementor-heading-title {
  color: #ffffff !important;
}
.elementor-element-hn000261 p {
  color: rgba(255,255,255,0.55) !important;
}

/* Photo card base */
.hn-event-box {
  position: relative !important;
  overflow: hidden !important;
  min-height: 240px !important;
  border-radius: 10px !important;
  background-color: #1a1a1a !important;
  cursor: pointer !important;
}

/* Photo layer via ::before — zoom on hover.
   background-image: inherit picks up whatever Elementor sets on the element,
   so images are editable in Elementor UI with no JS needed.
   The element's own background is left intact (Elementor controls it);
   ::before covers it with the same image but with correct sizing + zoom. */
.hn-event-box::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: inherit !important;
  background-size: cover !important;
  background-position: center !important;
  transform: scale(1) !important;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  z-index: 0 !important;
}

.hn-event-box:hover::before {
  transform: scale(1.07) !important;
}

/* In Elementor editor, backgrounds are moved to .elementor-motion-effects-layer.
   Ensure correct sizing so the image preview is visible while editing. */
.hn-event-box .elementor-motion-effects-layer {
  background-size: cover !important;
  background-position: center !important;
}

/* Gradient overlay — accent tint on hover */
.hn-event-box::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.15) 100%) !important;
  transition: background 0.4s ease !important;
  z-index: 1 !important;
}

.hn-event-box:hover::after {
  background: linear-gradient(to top, var(--color-accent-dark-overlay, rgba(0,0,0,0.95)) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.20) 100%) !important;
}

/* Content above overlays — stack at card bottom-left */
.hn-event-box > .e-con-inner {
  position: relative !important;
  z-index: 2 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  padding: 20px !important;
  gap: 2px !important;
}

/* Icon: white SVG (Elementor renders icons as inline SVG with currentColor) */
.hn-event-box .elementor-icon {
  color: rgba(255,255,255,0.80) !important;
  font-size: 26px !important;
}
.hn-event-box .elementor-icon svg {
  fill: currentColor !important;
  width: 26px !important;
  height: 26px !important;
}

/* Title: white, left-aligned */
.hn-event-box .elementor-heading-title {
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  margin: 0 !important;
  line-height: 1.15 !important;
}

/* Description: hidden by default, smooth reveal on hover */
.hn-event-box .elementor-widget-text-editor p {
  color: rgba(255,255,255,0.88) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  text-align: left !important;
  margin: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transform: translateY(6px) !important;
  transition: max-height 0.4s ease, opacity 0.3s ease 0.08s, transform 0.3s ease 0.08s !important;
}

.hn-event-box:hover .elementor-widget-text-editor p {
  max-height: 100px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* CTA card — accent fill, no photo, override photo card defaults */
.hn-cta-card {
  background-color: var(--color-accent) !important;
  text-decoration: none !important;
}
.hn-cta-card::before,
.hn-cta-card::after {
  display: none !important;
}
.hn-cta-card > .e-con-inner {
  justify-content: center !important;
  align-items: center !important;
}
.hn-cta-card .elementor-icon {
  color: rgba(255,255,255,0.90) !important;
  margin-bottom: 4px !important;
  transition: transform 0.3s ease !important;
}
.hn-cta-card:hover .elementor-icon {
  transform: scale(1.15) !important;
}
.hn-cta-card .elementor-heading-title {
  color: #ffffff !important;
  text-align: center !important;
  font-size: 18px !important;
}
.hn-cta-card .elementor-widget-text-editor p {
  color: rgba(255,255,255,0.85) !important;
  text-align: center !important;
  font-size: 13px !important;
  max-height: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.hn-cta-card:hover {
  background-color: var(--color-accent-hover) !important;
}

/* Photo assignments are now managed via Elementor's Style > Background > Image on each card container.
   The card-bg.js script forwards the Elementor background-image to the ::before pseudo-element
   so the zoom-on-hover animation still works. No per-card CSS needed here. */

/* ============================================================
   HALE-NAMIOTOWE LANDING PAGE: GRID LAYOUTS
   Workaround: Elementor doesn't generate --width for depth-2+
   inner containers, so we control widths via CSS classes.
   ============================================================ */

/* Event type boxes — 4-col grid on desktop (gap=20px: 4×265+3×20=1120) */
.hn-event-box {
  flex: 0 0 calc(25% - 15px) !important;
  width: calc(25% - 15px) !important;
  max-width: calc(25% - 15px) !important;
}

/* Equipment section — text col (45%) and image col (fill) */
.hn-equip-col {
  flex: 0 0 calc(45% - 24px) !important;
  width: calc(45% - 24px) !important;
  max-width: calc(45% - 24px) !important;
}
.hn-equip-img {
  flex: 1 0 300px !important;
  min-width: 300px !important;
}

/* Gallery — 4-col strip (gap=20px: 4×265+3×20=1120) */
.hn-gallery-img {
  flex: 0 0 calc(25% - 15px) !important;
  width: calc(25% - 15px) !important;
  max-width: calc(25% - 9px) !important;
}

/* Tablet: 2-col (gap=20px: 2×540+1×20=1100, fits ≤1120) */
@media (max-width: 1024px) {
  .hn-event-box,
  .hn-gallery-img {
    flex: 0 0 calc(50% - 10px) !important;
    width: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }
}

/* Mobile: full-width stack */
@media (max-width: 767px) {
  .hn-event-box,
  .hn-equip-col,
  .hn-equip-img,
  .hn-gallery-img {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
  }
}

/* ============================================================
   NASZE REALIZACJE — filterable packery gallery
   ============================================================ */

.hn-realizacje-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Filter bar */
.hn-r-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 40px;
}

.hn-r-filter-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.65);
  padding: 8px 22px;
  border-radius: 3px;
  font-family: Barlow Condensed, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.section-hale .hn-r-filter-btn:hover,
.section-hale .hn-r-filter-btn.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* Grid */
.hn-r-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: row dense;
  gap: 10px;
}

.hn-r-item {
  grid-column: span 1;
  grid-row: span 1;
  cursor: pointer;
  outline: none;
}

.hn-r-item--large {
  grid-column: span 2;
  grid-row: span 2;
}

.hn-r-item.hn-r-hidden {
  display: none;
}

/* Cover tile */
.hn-r-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  overflow: hidden;
}

.hn-r-cover-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease, filter 0.4s ease;
  will-change: transform, filter;
}

.hn-r-item:hover .hn-r-cover-img {
  transform: scale(1.06);
  filter: brightness(0.35);
}

/* Overlay — event name */
.hn-r-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 2;
  pointer-events: none;
}

.hn-r-title {
  color: #fff;
  font-family: Barlow Condensed, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s;
}

.hn-r-item:hover .hn-r-title {
  opacity: 1;
  transform: translateY(0);
}

/* Hidden lightGallery anchors */
.hn-r-lg-items {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Tablet: 2-col */
@media (max-width: 1024px) {
  .hn-r-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hn-r-item--large {
    grid-column: span 2;
  }
}

/* Mobile: 1-col */
@media (max-width: 767px) {
  .hn-r-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .hn-r-item,
  .hn-r-item--large {
    grid-column: span 1;
  }
}

/* ============================================================
   ELEMENTOR INLINE STYLE OVERRIDES — accent color
   Elementor stores colors in the DB and outputs them as inline
   styles. These !important rules override those with the CSS var
   so the Customizer accent color applies everywhere.
   ============================================================ */

/* Configurator "Porównaj wszystkie rozmiary" button */
.section-hale .elementor-element-hn000258 .elementor-button {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}
.section-hale .elementor-element-hn000258 .elementor-button:hover {
  background-color: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
}

/* Footer CTA section background */
.section-hale .elementor-element-hn000329:not(.elementor-motion-effects-element-type-background),
.section-hale .elementor-element-hn000329 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: var(--hale-bg-cta, #A66B49) !important;
}

/* Event type section — stacked icon backgrounds */
.section-hale .elementor-element-hn000264.elementor-view-stacked .elementor-icon,
.section-hale .elementor-element-hn000268.elementor-view-stacked .elementor-icon,
.section-hale .elementor-element-hn000272.elementor-view-stacked .elementor-icon,
.section-hale .elementor-element-hn000276.elementor-view-stacked .elementor-icon,
.section-hale .elementor-element-hn000280.elementor-view-stacked .elementor-icon,
.section-hale .elementor-element-hn000284.elementor-view-stacked .elementor-icon,
.section-hale .elementor-element-hn000288.elementor-view-stacked .elementor-icon,
.section-hale .elementor-element-hn000292.elementor-view-stacked .elementor-icon,
.section-hale .elementor-element-hn000296.elementor-view-stacked .elementor-icon,
.section-hale .elementor-element-hn000300.elementor-view-stacked .elementor-icon,
.section-hale .elementor-element-hn000304.elementor-view-stacked .elementor-icon {
  background-color: var(--color-accent) !important;
}

/* Text selection */
body.section-hale ::selection {
  background: var(--color-accent);
  color: #ffffff;
}

/* ============================================================
   HALL CONFIGURATOR SLIDER — override inline widget styles
   The slider CSS is embedded in an Elementor HTML widget so
   we override here with var(--color-accent).
   ============================================================ */

/* Active pill */
body.section-hale .hv-pill.hv-active {
  color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  background: rgba(var(--color-accent-rgb, 66 129 164), 0.08) !important;
}

/* Slider thumb */
body.section-hale #hv-slider::-webkit-slider-thumb {
  background: var(--color-accent) !important;
}
body.section-hale #hv-slider::-moz-range-thumb {
  background: var(--color-accent) !important;
}

/* Slider track fill */
body.section-hale #hv-slider::-webkit-slider-runnable-track {
  background: linear-gradient(
    90deg,
    var(--color-accent) 0%,
    var(--color-accent) var(--hv-fill, 33%),
    rgba(255,255,255,0.15) var(--hv-fill, 33%),
    rgba(255,255,255,0.15) 100%
  ) !important;
}
body.section-hale #hv-slider::-moz-range-track {
  background: linear-gradient(
    90deg,
    var(--color-accent) 0%,
    var(--color-accent) var(--hv-fill, 33%),
    rgba(255,255,255,0.15) var(--hv-fill, 33%),
    rgba(255,255,255,0.15) 100%
  ) !important;
}

/* Info value — primary dimension (Szerokość) only */
body.section-hale .hv-info-value:not(.hv-dim) {
  color: var(--color-accent) !important;
}

/* ============================================================
   SECTION PALETTE — cream (light) sections
   hn000212 = Configurator  |  hn000316 = Realizacje
   ============================================================ */

/* Configurator section — cream background */
.section-hale .elementor-element-hn000212 {
  background: var(--hale-bg-light, #F2EBDC) !important;
}
.section-hale .elementor-element-hn000213 .elementor-heading-title {
  color: var(--hale-bg-dark, #020300) !important;
}
.section-hale .elementor-element-hn000214 p {
  color: rgba(54, 49, 31, 0.65) !important;
}

/* Realizacje section — cream background */
.section-hale .elementor-element-hn000316 {
  background: var(--hale-bg-light, #F2EBDC) !important;
}
.section-hale .elementor-element-hn000317 .elementor-heading-title {
  color: var(--hale-bg-dark, #020300) !important;
}
.section-hale .elementor-element-hn000318 p,
.section-hale .elementor-element-hn000318 {
  color: rgba(54, 49, 31, 0.65) !important;
}

/* Filter pills — dark on cream */
.section-hale .elementor-element-hn000316 .hn-r-filter-btn {
  border-color: rgba(54, 49, 31, 0.30);
  color: rgba(54, 49, 31, 0.65);
}
.section-hale .elementor-element-hn000316 .hn-r-filter-btn:hover,
.section-hale .elementor-element-hn000316 .hn-r-filter-btn.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* ============================================================
   CONTACT FORM — Potrzebujesz hali na swoje wydarzenie?
   ============================================================ */

.ev-section {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.ev-card {
  display: grid;
  grid-template-columns: 400px 1fr;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.10),
    0 32px 64px rgba(0,0,0,0.08);
}

/* ── Left dark panel ── */
.ev-left {
  background: #36311f;
  padding: 52px 44px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.ev-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(66,129,164,0.12) 0%, transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(200,168,75,0.08) 0%, transparent 45%);
  pointer-events: none;
}
.ev-left::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(232,235,228,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,235,228,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.ev-left-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ev-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C8A84B;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ev-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: #C8A84B;
  opacity: 0.6;
}

.ev-headline {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  color: #FFFFFF !important;
  margin-bottom: 14px !important;
}

.ev-sub {
  font-size: 0.88rem;
  line-height: 1.65;
  color: rgba(232,235,228,0.85);
  margin-bottom: 36px;
}

.ev-trust {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: auto;
  padding: 0;
}
.ev-trust li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.86rem;
  color: rgba(232,235,228,0.85);
  line-height: 1.45;
}
.ev-trust-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(66,129,164,0.18);
  border: 1px solid rgba(66,129,164,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.ev-trust-label {
  font-weight: 600;
  color: #FFFFFF;
}

/* ── Contact snippet (bottom of left panel) ── */
.ev-contact-snippet {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(232,235,228,0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ev-contact-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: rgba(232,235,228,0.55);
}
.ev-contact-line a {
  color: rgba(232,235,228,0.85);
  text-decoration: none;
}
.ev-contact-line a:hover { color: #FFFFFF; }
.ev-contact-line svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ── Right form panel ── */
.ev-right {
  background: #FAFAF8;
  padding: 48px 44px;
}

/* ── CF7 form layout inside .ev-right ── */
.ev-right .wpcf7 { margin: 0; }
.ev-right .wpcf7-form { margin: 0; }

.ev-form-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #1A1A0E !important;
  margin-bottom: 24px !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ev-form-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #D1D5C8;
}

.ev-cf7-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  margin-bottom: 14px;
}
.ev-cf7-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ev-cf7-field.ev-cf7-span2 {
  grid-column: 1 / -1;
}

.ev-cf7-label,
.ev-right label.ev-cf7-label {
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  color: #6B7160 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.4 !important;
  margin-bottom: 0 !important;
}

.ev-right input.ev-input,
.ev-right select.ev-select,
.ev-right textarea.ev-textarea {
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 0.9rem !important;
  color: #1A1A0E !important;
  background: #FFFFFF !important;
  border: 1px solid #D1D5C8 !important;
  border-radius: 6px !important;
  padding: 9px 12px !important;
  outline: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  height: auto !important;
  line-height: 1.5 !important;
}
.ev-right input.ev-input:focus,
.ev-right select.ev-select:focus,
.ev-right textarea.ev-textarea:focus {
  border-color: #4281A4 !important;
  box-shadow: 0 0 0 3px rgba(66,129,164,0.18) !important;
}
.ev-right textarea.ev-textarea {
  min-height: 90px !important;
  resize: vertical !important;
}
.ev-right input[type="date"].ev-input::-webkit-calendar-picker-indicator {
  opacity: 0.4;
  cursor: pointer;
}

.ev-cf7-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.ev-right input.btn-ev-send,
.ev-right input.btn-ev-send.wpcf7-submit {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: #FFFFFF !important;
  background: #4281A4 !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 12px 28px !important;
  cursor: pointer !important;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
}
.ev-right input.btn-ev-send:hover,
.ev-right input.btn-ev-send.wpcf7-submit:hover {
  background: #386e8b !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(66,129,164,0.30) !important;
}

.ev-cf7-note {
  font-size: 0.78rem;
  color: #6B7160;
  font-family: 'Nunito Sans', sans-serif;
}

.ev-cf7-privacy {
  font-size: 0.74rem !important;
  color: #6B7160 !important;
  line-height: 1.5 !important;
  margin-bottom: 14px !important;
  font-family: 'Nunito Sans', sans-serif !important;
}
.ev-cf7-privacy a {
  color: #4281A4;
  text-decoration: none;
}
.ev-cf7-privacy a:hover { text-decoration: underline; }

/* Validation error styling */
.ev-right .wpcf7-not-valid {
  border-color: #C0392B !important;
}
.ev-right .wpcf7-not-valid-tip {
  font-size: 0.72rem !important;
  color: #C0392B !important;
  font-family: 'Nunito Sans', sans-serif !important;
}
.ev-right .wpcf7-response-output {
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 0.84rem !important;
  border-radius: 6px !important;
  margin-top: 12px !important;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .ev-card { grid-template-columns: 1fr; }
  .ev-left { padding: 40px 32px; }
  .ev-right { padding: 36px 32px; }
}
@media (max-width: 580px) {
  .ev-section { padding: 0; }
  .ev-card { border-radius: 0; }
  .ev-left { padding: 36px 22px; }
  .ev-right { padding: 32px 22px; }
  .ev-cf7-grid { grid-template-columns: 1fr; }
  .ev-cf7-field.ev-cf7-span2 { grid-column: 1; }
  .ev-cf7-footer { flex-direction: column; align-items: flex-start; }
}