/* =========================================================
   Home hero — Elementor widget rebuild (post 32272)

   The hero used to be a single Elementor "HTML" widget. It is now built from
   native Elementor Containers + Heading / Text Editor / Button / Video widgets
   so the client can edit every piece from the Elementor panel.

   The visual design still comes from home-plate.css (.hero-cine, .hero-media,
   .hero-slide, .hero-cine-content, .hero-cine-inner, .hero-cine-controls,
   .hero-dots, .hero-nav …). Those classes are set on the containers/widgets in
   Elementor ("Advanced → CSS Classes"). This file only:
     1. neutralises Elementor's own container/widget defaults that would fight
        that design (padding, gap, position, aspect-ratio, button skin …), and
     2. pushes the design into the *inner* elements Elementor renders
        (h1.elementor-heading-title, a.elementor-button, video …).

   Structure (Elementor Navigator):
     Container .hero-cine
       Container .hero-media                 (all slides, absolutely stacked)
         Container .hero-slide  ×N            (Video widget + hidden eyebrow/title/text)
       Container .hero-cine-content.container
         Container .hero-cine-inner          (badge, live eyebrow/title/text, buttons)
         Container .hero-cine-controls       (dots [auto], counter, prev/next)
   ========================================================= */

/* ---------- Containers: strip Elementor defaults, restate the layout with
   enough specificity to beat .e-con's variable-driven rules ---------- */
.e-con.hero-cine,
.hero-cine .e-con.hero-media,
.hero-cine .e-con.hero-slide,
.hero-cine .e-con.hero-cine-content,
.hero-cine .e-con.hero-cine-inner,
.hero-cine .e-con.hero-cine-actions,
.hero-cine .e-con.hero-cine-controls,
.hero-cine .e-con.hero-dots,
.hero-cine .e-con.hero-nav {
	--padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0;
	--margin-top: 0; --margin-right: 0; --margin-bottom: 0; --margin-left: 0;
	--gap: 0; --row-gap: 0; --column-gap: 0;
	max-width: none;
}

.e-con.hero-cine {
	position: relative; width: 100%; min-height: 100svh; overflow: hidden; isolation: isolate;
	display: flex; flex-direction: column;
	background: var(--dark); color: #FFFFFF;
}

/* Media layer: sits behind everything, oversized at the top for the scroll parallax. */
.hero-cine .e-con.hero-media {
	position: absolute; inset: -14% 0 0 0; width: auto; height: auto; min-height: 0;
	z-index: -1; overflow: hidden; display: block; will-change: transform;
}
/* Replaces the old <span class="hero-cine-overlay"> */
.hero-cine .e-con.hero-media::after {
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background:
		linear-gradient(90deg, rgba(20,26,24,0.62) 0%, rgba(20,26,24,0.28) 45%, rgba(20,26,24,0.05) 100%),
		linear-gradient(180deg, rgba(20,26,24,0.42) 0%, rgba(20,26,24,0) 32%, rgba(20,26,24,0.10) 60%, rgba(20,26,24,0.72) 100%);
}

/* Each slide container fills the media layer; JS toggles .is-active */
.hero-cine .e-con.hero-slide {
	position: absolute; inset: 0; width: auto; height: auto; min-height: 0; display: block;
	opacity: 0; visibility: hidden; transition: opacity 1.4s ease;
}
.hero-cine .e-con.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }

/* Video widget → fill the slide (Elementor wraps <video> in two divs + aspect-ratio) */
.hero-cine .hero-slide .elementor-widget-video,
.hero-cine .hero-slide .elementor-widget-video .elementor-widget-container,
.hero-cine .hero-slide .elementor-widget-video .elementor-wrapper {
	position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; margin: 0;
	aspect-ratio: auto; transform: none; overflow: hidden;
}
.hero-cine .hero-slide .elementor-widget-video video {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
	background: transparent; transform: scale(1.06); transition: transform 8s ease-out;
}
.hero-cine .hero-slide.is-active .elementor-widget-video video { transform: scale(1); }

/* Per-slide copy widgets: read by JS, never shown directly on the live site */
.hero-cine .hero-slide .hero-slide-eyebrow,
.hero-cine .hero-slide .hero-slide-title,
.hero-cine .hero-slide .hero-slide-text { display: none; }

/* ---------- Content column (bottom-left) ---------- */
.hero-cine .e-con.hero-cine-content {
	position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end;
	width: 100%; max-width: 1400px; min-height: 100svh; margin-inline: auto;
	padding: 120px 20px 28px;
}
@media (min-width: 768px)  { .hero-cine .e-con.hero-cine-content { padding-inline: 40px; } }
@media (min-width: 900px)  { .hero-cine .e-con.hero-cine-content { padding-bottom: 40px; } }
@media (min-width: 1280px) { .hero-cine .e-con.hero-cine-content { padding-inline: 24px; } }

.hero-cine .e-con.hero-cine-inner { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 680px; }
.hero-cine .hero-cine-inner > .elementor-widget { width: auto; max-width: 100%; margin: 0; }
/* Mobile: lift the copy block 50px above the slider controls (content column is
   justify-content:flex-end, so bottom margin on the inner container moves it up while
   the controls stay put). Routed through Elementor's --margin-bottom so an editor value can override. */
@media (max-width: 767px) { .hero-cine .e-con.hero-cine-inner { --margin-bottom: 50px; } }

/* Badge: heading widget; the accent dot is drawn with ::before instead of the old <span class="dot"> */
.hero-cine .hero-cine-inner .hero-cine-badge {
	display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; margin-bottom: 22px;
	border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; backdrop-filter: blur(6px); background: rgba(20,26,24,0.25);
	font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.92);
}
.hero-cine .hero-cine-inner .hero-cine-badge::before {
	content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
	background: var(--accent); box-shadow: 0 0 0 4px rgba(150,105,84,0.35);
}
.hero-cine .hero-cine-inner .hero-cine-badge .elementor-widget-container { display: contents; }

/* Eyebrow: heading widget with classes "eyebrow hero-cine-eyebrow" */
.hero-cine .hero-cine-inner .hero-cine-eyebrow {
	display: block; margin-bottom: 12px;
	font-family: var(--font-mono, var(--font-body)); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--accent-tint);
}

/* Title: heading widget (H1) */
.hero-cine .hero-cine-inner .hero-cine-title {
	margin-bottom: 18px;
	font-family: var(--font-display); font-weight: 500; font-style: italic;
	font-size: clamp(2.5rem, 6.6vw, 5.4rem); line-height: 1.04; letter-spacing: -0.015em;
	color: #FFFFFF; text-wrap: balance; text-shadow: 0 10px 40px rgba(0,0,0,0.45);
}

/* Text: text-editor widget */
.hero-cine .hero-cine-inner .hero-cine-text {
	margin-bottom: 30px; max-width: min(46ch, 100%);
	font-family: var(--font-body); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; opacity: 0.85; text-shadow: 0 2px 14px rgba(0,0,0,0.4);
}
.hero-cine .hero-cine-inner .hero-cine-text p { margin: 0; }

/* Make the inner heading/paragraph inherit the wrapper's type (browser h1 defaults +
   Elementor's .elementor-heading-title {line-height:1} would otherwise override it) */
.hero-cine .hero-cine-badge .elementor-heading-title,
.hero-cine .hero-cine-eyebrow .elementor-heading-title,
.hero-cine .hero-cine-title .elementor-heading-title,
.hero-cine .hero-cine-count .elementor-heading-title {
	margin: 0; padding: 0;
	font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit;
	line-height: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}

/* Buttons row */
.hero-cine .e-con.hero-cine-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; width: auto; }
.hero-cine .hero-cine-actions > .elementor-widget-button { width: auto; margin: 0; }
.hero-cine .hero-cine-actions .elementor-button-wrapper { display: inline-flex; }
.hero-cine .hero-cine-actions .elementor-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 14px 30px; border-radius: var(--btn-radius, 4px); border: 1px solid transparent;
	font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; line-height: 1.2; letter-spacing: 0.03em; text-transform: uppercase;
	background: var(--accent); color: var(--btn-text, #FFFFFF);
	transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, background 0.3s ease, color 0.3s ease;
	will-change: transform;
}
.hero-cine .hero-cine-actions .elementor-button:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -14px var(--accent); }
.hero-cine .hero-cine-actions .hero-btn-ghost .elementor-button {
	background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.45); color: #FFFFFF; backdrop-filter: blur(6px);
}
.hero-cine .hero-cine-actions .hero-btn-ghost .elementor-button:hover { background: #FFFFFF; color: var(--dark); box-shadow: none; }

/* ---------- Slider controls: dots + counter left, arrows right ---------- */
.hero-cine .e-con.hero-cine-controls {
	display: flex; flex-direction: row; align-items: center; gap: 18px; width: 100%;
	margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.22);
}
.hero-cine .e-con.hero-dots { display: flex; flex-direction: row; align-items: center; gap: 8px; width: auto; min-height: 9px; }
.hero-cine .hero-dots button { width: 9px; height: 9px; border-radius: 50%; background: #FFF; opacity: 0.45; border: 0; padding: 0; cursor: pointer; transition: width 0.3s ease, opacity 0.3s ease; }
.hero-cine .hero-dots button.is-active { opacity: 1; width: 28px; border-radius: 5px; background: var(--accent); }

.hero-cine .hero-cine-controls > .hero-cine-count { width: auto; margin: 0; font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.1em; opacity: 0.7; color: #FFFFFF; }
.hero-cine .hero-cine-count b { font-weight: 600; color: #FFF; opacity: 1; }

.hero-cine .e-con.hero-nav { display: flex; flex-direction: row; align-items: center; gap: 10px; width: auto; margin-left: auto; }
.hero-cine .hero-nav > .elementor-widget-button { width: auto; margin: 0; }
.hero-cine .hero-nav .elementor-button {
	display: inline-flex; align-items: center; justify-content: center; padding: 0;
	width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); background: rgba(20,26,24,0.3);
	backdrop-filter: blur(6px); color: #FFF; font-family: var(--font-body); font-size: 1rem; line-height: 1; cursor: pointer;
	transition: background 0.3s ease, border-color 0.3s ease;
}
.hero-cine .hero-nav .elementor-button:hover { background: var(--accent); border-color: var(--accent); }

/* ---------- Elementor editor ----------
   The editor shows the hero exactly as the live site (slide 1 active, the others stacked
   behind it). Use the Navigator (Structure panel) to select slides 2/3 and their widgets.
   Only the empty-container placeholder of the auto-generated dots is hidden. */
body.elementor-editor-active .hero-cine .hero-dots .elementor-empty-view,
body.elementor-editor-active .hero-cine .hero-dots > .elementor-first-add { display: none; }