/* =========================================================
   ELON Landing Master
   Default project variables
   These are fallbacks. ACF colors override them via functions.php.
========================================================= */

body.page-template-template-elon-landing-php {
  --elon-primary: #63503f;
  --elon-primary-dark: #002f25;
  --elon-secondary: #f7941d;
  --elon-light: #f7941d;
  --elon-white: #ffffff;
  --elon-text-dark: #082c23;
}

body.page-template-template-elon-landing-php .button {
    background-color: var(--elon-secondary);
    color: #1a2f3a;
}

/* =========================================================
   Global landing color layer
========================================================= */

body.page-template-template-elon-landing-php #body {
  background-color: var(--elon-primary);
}

/* Main green sections */
body.page-template-template-elon-landing-php .panel-intro,
body.page-template-template-elon-landing-php .panel-portfolio,
body.page-template-template-elon-landing-php .panel-location,
body.page-template-template-elon-landing-php .panel-features,
body.page-template-template-elon-landing-php .panel-construction {
  background-color: var(--elon-primary);
}

/* Dark sections / footer-like CTA areas if present */
body.page-template-template-elon-landing-php .footer,
body.page-template-template-elon-landing-php footer,
body.page-template-template-elon-landing-php .site-footer {
  background-color: var(--elon-primary-dark);
}

/* Highlight text */
body.page-template-template-elon-landing-php .highlight,
body.page-template-template-elon-landing-php .hero-title .highlight,
body.page-template-template-elon-landing-php .content-section-title .highlight {
  color: var(--elon-light);
}

/* Buttons */
body.page-template-template-elon-landing-php .button {
  background-color: var(--elon-secondary);
  color: var(--elon-text-dark);
}

/* Button arrow circle / icon area */
body.page-template-template-elon-landing-php .button .icon-arrow-right {
  color: var(--elon-text-dark);
}

/* Inverse buttons */
body.page-template-template-elon-landing-php .button.button-inverse {
  background-color: var(--elon-secondary);
  color: var(--elon-text-dark);
}

/* Pills / meta highlight */
body.page-template-template-elon-landing-php .meta-component li.highlight {
  background-color: var(--elon-light);
  color: var(--elon-text-dark);
}

/* CTA pins */
body.page-template-template-elon-landing-php .panel-cta .pin {
  background-color: var(--elon-primary);
}

body.page-template-template-elon-landing-php .panel-cta .pin .icon {
  background-color: color-mix(in srgb, var(--elon-primary) 80%, var(--elon-white) 20%);
}

/* Construction progress badge */
body.page-template-template-elon-landing-php .panel-construction .number {
  background-color: var(--elon-primary);
  color: var(--elon-white);
}

/* Active timeline item */
body.page-template-template-elon-landing-php .panel-construction .progress .item.active .icon {
  background-color: var(--elon-secondary);
}

/* =========================================================
   HERO – better long headline + compact CTA
========================================================= */

body.page-template-template-elon-landing-php #hero .hero-component.home .content-inner {
  max-width: min(1280px, 92vw);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

body.page-template-template-elon-landing-php #hero .hero-title {
  max-width: min(1280px, 92vw);
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(48px, 5vw, 86px) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

body.page-template-template-elon-landing-php #hero .hero-title .highlight {
  display: block;
  color: var(--elon-light);
  font-size: 1em;
  line-height: 0.9;
}

/* Compact hero button instead of full-width bar */
body.page-template-template-elon-landing-php #hero .button.cent-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: max-content !important;
  min-width: 260px;
  margin-top: clamp(24px, 3vw, 42px);
  padding: 16px 24px 16px 30px !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  white-space: nowrap;
}

body.page-template-template-elon-landing-php #hero .button.cent-btn .icon-arrow-right {
  flex: 0 0 auto;
  margin-left: 18px;
}

/* Tablet */
@media (max-width: 1024px) {
  body.page-template-template-elon-landing-php #hero .hero-title {
    font-size: clamp(44px, 8vw, 76px) !important;
    line-height: 0.94 !important;
  }
}

/* Mobile */
@media (max-width: 640px) {
  body.page-template-template-elon-landing-php #hero .hero-title {
    max-width: 94vw;
    font-size: clamp(38px, 12vw, 58px) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.045em;
  }

  body.page-template-template-elon-landing-php #hero .button.cent-btn {
    min-width: 0;
    max-width: calc(100vw - 40px) !important;
    padding: 15px 20px 15px 24px !important;
    font-size: 14px;
  }
}

/* HERO – center content + CTA */
body.page-template-template-elon-landing-php #hero .hero-component.home .content-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
}

body.page-template-template-elon-landing-php #hero .hero-component.home .content-inner > .button.cent-btn {
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* =========================================================
   HEADER LOGO FIX
========================================================= */

body.page-template-template-elon-landing-php #header .logo {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
}

body.page-template-template-elon-landing-php #header .logo a.project-logo {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
}

body.page-template-template-elon-landing-php #header .logo .project-logo__img--header {
  display: block !important;
  width: auto !important;
  height: 112px !important;
  max-width: 260px !important;
  max-height: 112px !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
}

@media (max-width: 768px) {
  body.page-template-template-elon-landing-php #header .logo .project-logo__img--header {
    height: 72px !important;
    max-height: 72px !important;
    max-width: 210px !important;
  }
}

/* HERO title highlight color and line*/
body.page-template-template-elon-landing-php #hero .hero-title .highlight {
  color: #f7941d !important;
}

body.page-template-template-elon-landing-php #hero .hero-title .hero-line {
  display: block;
}

/* =========================================================
   Portfolio gradient - reversed direction
========================================================= */

body.page-template-template-elon-landing-php .panel-portfolio::before {
  background-image: linear-gradient(
    to bottom,
    var(--background-color-3-a00) 0%,
    var(--background-color-3) 100%
  ) !important;
}

/* =========================================================
   PORTFOLIO BACKGROUND OVERRIDE
========================================================= */

/* Mobile / base */
body.page-template-template-elon-landing-php .panel-portfolio {
  background-image:
    url("../img/panels/portfolio/bg_vyhlady.webp"),
    url("../img/svg/shape-4.svg") !important;

  background-position:
    bottom center,
    bottom right !important;

  background-repeat:
    no-repeat,
    no-repeat !important;

  background-size:
    cover,
    clamp(50%, 50vw, 600px) auto !important;
}

/* Tablet / desktop */
@media only screen and (min-width: 768px) {
  body.page-template-template-elon-landing-php .panel-portfolio {
    background-image:
      url("../img/panels/portfolio/bg_vyhlady.webp"),
      url("../img/svg/shape-3.svg") !important;

    background-position:
      bottom center,
      bottom left !important;

    background-size:
      cover,
      clamp(35%, 35vw, 600px) auto !important;
  }
}

/* =========================================================
   Portfolio gradient - overlap into previous section
========================================================= */

body.page-template-template-elon-landing-php .panel-portfolio {
  position: relative;
  overflow: visible !important;
}

body.page-template-template-elon-landing-php .panel-portfolio::before {
  content: "" !important;
  position: absolute !important;

  top: -180px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  inset: auto !important;

  height: 360px !important;

  background-image: linear-gradient(
    to bottom,
    var(--background-color-3-a00) 0%,
    var(--background-color-3) 55%,
    var(--background-color-3) 100%
  ) !important;

  pointer-events: none !important;
  z-index: 0 !important;
}

body.page-template-template-elon-landing-php .panel-portfolio > * {
  position: relative;
  z-index: 1;
}

/* =========================================================
   INTRO - hide left number block + center right column only
========================================================= */

body.page-template-template-elon-landing-php .panel-intro .two-side-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

body.page-template-template-elon-landing-php .panel-intro .two-side-wrapper > .left-side {
  display: none !important;
}

body.page-template-template-elon-landing-php .panel-intro .two-side-wrapper > .right-side {
  width: 100% !important;
  max-width: 1100px !important;
  flex: 0 1 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Nadpis môže ostať pekne centrovaný */
body.page-template-template-elon-landing-php .panel-intro .content-section-header {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Ikony/list nech sa správajú ako pôvodne */
body.page-template-template-elon-landing-php .panel-intro .text-icon-list-component {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  text-align: initial !important;
}

body.page-template-template-elon-landing-php .panel-intro .text-icon-list-component .list {
  justify-content: flex-start !important;
}

body.page-template-template-elon-landing-php .panel-intro .text-icon-container {
  text-align: left !important;
  justify-content: flex-start !important;
}

/* =========================================================
   INTRO - mobile spacing fix after hiding left side
========================================================= */

@media (max-width: 767px) {
   body.page-template-template-elon-landing-php .panel-intro article {
    min-height: 0 !important;
  }

  body.page-template-template-elon-landing-php .panel-intro .two-side-wrapper {
    min-height: 0 !important;
    height: auto !important;
    align-items: flex-start !important;
    gap: 32px !important;
  }

  body.page-template-template-elon-landing-php .panel-intro .two-side-wrapper > .right-side {
    max-width: 100% !important;
    flex: 0 1 auto !important;
  }

  body.page-template-template-elon-landing-php .panel-intro .content-section-header {
    margin-bottom: 28px !important;
  }

  body.page-template-template-elon-landing-php .panel-intro .text-icon-list-component {
    margin-bottom: 0 !important;
  }

  body.page-template-template-elon-landing-php .panel-intro .text-icon-list-component .list {
    gap: 18px !important;
  }
}

/* =========================================================
   HOMEPAGE FEATURES - top divider
========================================================= */
body.page-home .panel-features.content-section {
  border-top: 1px solid rgba(247, 148, 29, 0.35);
}

body.page-home .panel-apartments .list > .item {
  --scroll-percentage: 0px;
}

/* =========================================================
   HERO STAMP - VÝHĽADY
   podľa pôvodného Pod zeleným dvorom štýlu
========================================================= */

.hero-component.home .content .hero-title {
  position: relative;
}

.hero-component.home .content .hero-title .highlight {
  position: relative;
  display: inline-block;
}

.hero-component.home .content .hero-title img {
  position: absolute;
  z-index: -1;
  bottom: 80%;
  right: 0;
  max-inline-size: clamp(75px, 2em, 150px);
  height: auto;
  display: block;
  transform: translate(65%, 0);
  pointer-events: none;
}

@media (max-width: 767px) {
  .hero-component.home .content .hero-title img {
     right: 50px;
  }