/* ID HOPE — bridges the design onto Elementor's container markup.
   Loads after final.css.

   Rule of thumb: never set `padding`, `margin`, `width` or `overflow`
   directly on .e-con here. Elementor drives those from CSS variables, so
   zeroing the VARIABLES neutralises Elementor's defaults while leaving
   final.css free to style .idh-sec, .wrap and friends normally.        */

.idh :where(.e-con) {
  --padding-block-start: 0px;  --padding-block-end: 0px;
  --padding-inline-start: 0px; --padding-inline-end: 0px;
  --margin-block-start: 0px;   --margin-block-end: 0px;
  --margin-inline-start: 0px;  --margin-inline-end: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  --container-max-width: 100%;
  --content-width: 100%;
  --width: 100%;
}
.idh :where(.e-con-inner) {
  --padding-block-start: 0px;  --padding-block-end: 0px;
  --padding-inline-start: 0px; --padding-inline-end: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  --content-width: 100%;
}
.idh :where(.elementor-widget) { margin-block-end: 0 }
.idh :where(.elementor-widget-container) { margin: 0 }
.idh .elementor-widget-image img { display: block }

/* Elementor stacks containers as flex columns by default. Most of the
   design assumes normal block flow, so restore it and let the few
   genuinely flex/grid sections declare themselves in final.css. */
.idh :where(.e-con, .e-con-inner) { display: block }

/* ---------- header ---------- */
.idh .idh-hdr {
  display: flex; flex-direction: row; align-items: center;
  justify-content: space-between; gap: 1rem; width: 100%;
}
.idh .idh-hdr > .elementor-widget { width: auto; flex: 0 0 auto }
.idh .idh-brand img {
  height: clamp(38px, 4.4vw, 52px) !important;
  width: auto !important; max-width: none !important;
}
/* the WP admin bar sits over the fixed header while logged in */
.admin-bar .idh-hdr { top: 32px }
@media screen and (max-width: 782px) { .admin-bar .idh-hdr { top: 46px } }

/* ---------- cinema ---------- */
.idh .idh-stage {
  position: sticky !important; top: 0;
  display: flex; align-items: center; justify-content: center;
}
.idh .idh-aperture {
  flex: 0 0 auto; display: block;
  width: var(--ap-w, 30vw) !important;
  height: var(--ap-h, 74vh) !important;
  max-width: none !important;
}
.idh .idh-frame { position: absolute; inset: 0; width: 100%; height: 100% }
.idh .idh-frame > .elementor-widget-container,
.idh .idh-frame img { width: 100%; height: 100% }
.idh .idh-frame img { object-fit: cover; object-position: center }

.idh .idh-chapters { position: absolute; inset: 0; z-index: 5; pointer-events: none }

/* Elementor forces position:relative on every container, which stopped the
   chapters from stacking on top of each other. And .e-con-inner only exists
   when a container is "boxed" — the import did not honour that, so nothing
   below may depend on it. Flex on the chapter itself works either way:
   the single child sizes to its content and parks at the bottom. */
.idh .idh-chapter {
  position: absolute !important; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: clamp(4.5rem, 13vh, 8rem);
  text-align: left;
}
/* Elementor gives .e-con-inner flex-grow:1, so it fills the whole stage and
   justify-content has no free space left to distribute — the copy ends up at
   the top of a full-height child. Collapsing the child to its own content
   height is what actually moves it. margin-top:auto is a second, independent
   push to the bottom in case the height is forced elsewhere. */
.idh .idh-chapter > .e-con-inner,
.idh .idh-chapter > .elementor-widget {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: auto !important;
  margin-top: auto !important;
  width: min(84rem, 92vw); margin-inline: auto; display: block;
}
/* alternate: odd chapters read bottom-left, even ones bottom-right */
.idh .idh-chapters > .e-con:nth-child(even) { text-align: right }

.idh .idh-chapter h1, .idh .idh-chapter h2 {
  font-family: var(--idh-display); font-weight: 400;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.06;
  letter-spacing: -.02em; margin: 0; max-width: 32rem;
}
.idh .idh-chapter--hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1.02; max-width: 36rem;
}
.idh .idh-chapter p {
  margin: 1.3rem 0 0; font-size: 1.0625rem; line-height: 1.8;
  color: #111; max-width: 32rem;
}
.idh .idh-chapters > .e-con:nth-child(even) h1,
.idh .idh-chapters > .e-con:nth-child(even) h2,
.idh .idh-chapters > .e-con:nth-child(even) p { margin-left: auto }

/* over the film, the copy turns white */
.idh .idh-stage.is-wide .idh-chapter h1,
.idh .idh-stage.is-wide .idh-chapter h2,
.idh .idh-stage.is-wide .idh-chapter p { color: #fff }

/* ---------- sections that must clip their own contents ----------
   The watermark, the horizontal track and the aperture all rely on this.
   Declared here because the page-level sticky fix used to override it. */
.idh .idh-estate, .idh .idh-bottles, .idh .idh-quality,
.idh .idh-stage, .idh .idh-hstage, .idh .idh-season__stage { overflow: clip }
/* ...and the three that must NOT clip, because they hold sticky children */
.idh .idh-cinema, .idh .idh-hscroll, .idh .idh-season { overflow: visible }

/* ---------- our origin ---------- */
.idh .idh-estate { position: relative }
.idh .idh-estate__mark {
  position: absolute; right: -4%; top: -6%;
  width: min(46vw, 560px); opacity: .5; pointer-events: none; z-index: 1;
}
.idh .idh-estate__mark img { width: 100%; height: auto }
.idh .idh-estate__grid {
  position: relative; z-index: 2; display: grid;
  grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.idh .idh-estate__shot img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  border: 1px solid rgba(46,51,45,.35);
}
@media (max-width: 860px) { .idh .idh-estate__grid { grid-template-columns: 1fr } }

/* ---------- one season ---------- */
/* breathing room so the pinned section does not butt against Our Origin */
.idh .idh-estate { padding-bottom: clamp(10rem, 20vw, 18rem) }
/* centred vertically via flex, so it does not depend on .e-con-inner */
.idh .idh-season__stage {
  position: sticky !important; top: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.idh .idh-season__stage > .e-con-inner,
.idh .idh-season__stage > .e-con,
.idh .idh-season__stage > .elementor-widget {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: auto !important;
  margin-block: auto !important;   /* centres it whatever flex does */
  width: min(84rem, 92vw); margin-inline: auto; display: block;
}

/* ---------- why (horizontal track) ---------- */
.idh .idh-hstage {
  position: sticky !important; top: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.idh .idh-hstage > .e-con-inner,
.idh .idh-hstage > .e-con,
.idh .idh-hstage > .elementor-widget {
  flex: 0 0 auto !important; height: auto !important; min-height: 0 !important;
}

/* ---------- footer ----------
   The three link columns arrive as one HTML widget, so the outer grid is
   two cells wide and the columns grid sits inside it. */
.idh .idh-footer__top { display: grid; grid-template-columns: 1.15fr 2.85fr; gap: clamp(2rem, 4vw, 3.5rem) }
.idh .idh-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem) }
.idh .idh-footer__brand img { height: 96px; width: auto; display: block }
@media (max-width: 760px) {
  .idh .idh-footer__top, .idh .idh-footer__cols { grid-template-columns: 1fr 1fr }
  .idh .idh-footer__brand img { height: 76px }
}

/* ---------- quality: text and figures animate in ---------- */
.idh .idh-spec__name,
.idh .idh-spec__val,
.idh .idh-spec__cap {
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s var(--idh-ease), transform .7s var(--idh-ease);
}
.idh .idh-spec__row.is-in .idh-spec__name { opacity: 1; transform: none; transition-delay: .05s }
.idh .idh-spec__row.is-in .idh-spec__val  { opacity: 1; transform: none; transition-delay: .12s }
.idh .idh-spec__row.is-in .idh-spec__cap  { opacity: .72; transform: none; transition-delay: .34s }
/* the tick mark only makes sense once the bar has drawn */
.idh .idh-spec__track u { opacity: 0; transition: opacity .5s var(--idh-ease) 1.2s }
.idh .idh-spec__row.is-in .idh-spec__track u { opacity: 1 }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .idh .idh-aperture {
    width: min(72rem, 92vw) !important; height: 66vh !important; margin-inline: auto;
  }
  .idh .idh-chapters { position: relative; inset: auto }
  .idh .idh-chapter { position: relative; inset: auto; opacity: 1; padding: 3rem 0 }
  .idh .idh-season__stage, .idh .idh-hstage { position: static; height: auto; padding: 5rem 0 }
  .idh .idh-chapter { position: relative !important; inset: auto; padding-bottom: 0 }
  .idh .idh-stage, .idh .idh-season__stage, .idh .idh-hstage { position: static !important }
  .idh .idh-chapter > .e-con-inner { margin-top: 0 !important }
  .idh .idh-season__stage > .e-con-inner { margin-block: 0 !important }
  .idh .idh-spec__name, .idh .idh-spec__val { opacity: 1; transform: none }
  .idh .idh-spec__cap { opacity: .72; transform: none }
  .idh .idh-spec__track u { opacity: 1 }
}