/* ======================================================================
   CREATIVE ENERGY • HERO
   - Final structure: .hero-ces → .hero-ces__copy → .hero-ces__stack
   - Image via [ces_hero_picture]
   - All inner content centered as a unit; positioned ~1/3 viewport from left
   ====================================================================== */

:root{
  --brand-accent: #2b8db1;
}

/* --- Hero container & image ------------------------------------------ */
.hero-ces{
  position: relative;
  overflow: hidden;
  border-radius: .5rem;

  /* TUNE ME: position & sizing */
  --hero-left: 15vw;                               /* content column offset (≈ 1/3 vw)  */
  --hero-col:  min(68ch, 980px);                   /* max content column width          */
  --hero-top:  calc(clamp(16px,4vw,64px) + 25vh);  /* vertical offset for the whole set */
}

@media (min-width: 901px){ .hero-ces{ aspect-ratio: 16/9; } }
@media (max-width: 900px){ .hero-ces{ aspect-ratio: 4/5; } }

.hero-ces__picture,
.hero-ces__picture img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 0;
}

/* --- Global scrim OVER the photo (keeps palette intact, boosts legibility) */
.hero-ces::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.36) 0%,
                           rgba(0,0,0,.14) 46%,
                           rgba(0,0,0,.48) 100%);
  mix-blend-mode: soft-light;
}

/* --- Content grid: left “air” + content column + rest ---------------- */
.hero-ces__copy{
  position: absolute;
  inset: 0;
  z-index: 2;

  display: grid;
  grid-template-columns: var(--hero-left) var(--hero-col) 1fr;
  align-content: start;
  padding-block-start: var(--hero-top);      /* <= vertical position knob */

  /* Local scrims (stacked) only behind the text area */
  background:
    radial-gradient(34% 38% at 40% 58%,
      rgba(0,0,0,.18) 0%,
      rgba(0,0,0,.10) 34%,
      transparent 66%),
    radial-gradient(120% 100% at 18% 55%,
      rgba(0,0,0,.32) 0%,
      rgba(0,0,0,.18) 35%,
      transparent 65%);
  background-repeat: no-repeat;
}

/* The whole stack (H1 + subtitle + CTAs) centers as a unit */
.hero-ces__stack{
  grid-column: 2;              /* place in the content column */
  justify-self: center;        /* center the whole set within the column */
  text-align: center;          /* center text inside */
}

/* Prevent TT5 constrained margins from auto-centering inner blocks oddly */
.hero-ces__stack > :where(.wp-block-heading, p, .wp-block-buttons){
  margin-inline: 0;
}

/* --- Typography ------------------------------------------------------- */
/* H1: two lines */
.hero-ces__title{
  color: #fff;
  margin: 0;
  line-height: 1.04;
  letter-spacing: -0.01em;
  font-size: clamp(24px, 4.5vw, 56px);
  text-shadow:
    0 1px 1px rgba(0,0,0,.55),
    0 0 14px rgba(0,0,0,.30);
}
.hero-ces__title span{ display: block; }
.hero-ces__title span + span{ margin-top: 15px; }    /* line 1 → 2 spacing */

/* Subtitle: two lines, same size as H1, medium weight, accent color */
.hero-ces__subtitle{
  margin-top: 40px;                                   /* H1 → subtitle spacing */
  font-size: clamp(24px, 4.5vw, 56px);                /* same size as H1 */
  font-weight: 500;                                   /* “appearance: medium” */
  color: var(--brand-accent);
  text-shadow:
    0 1px 1px rgba(0,0,0,.45),
    0 0 8px  rgba(0,0,0,.28),
    0 0 18px rgba(0,0,0,.20);
}
.hero-ces__subtitle span{ display: block; }           /* force line break */

/* Optional: nudge a single word darker for micro-contrast
   <span class="hero-word--for">for</span> */
.hero-ces__subtitle .hero-word--for{
  color: color-mix(in srgb, var(--brand-accent) 90%, black);
}
@supports not (color: color-mix(in srgb, #000 100%, #fff 0%)){
  .hero-ces__subtitle .hero-word--for{ color: #257ca0; }
}

/* CTAs centered and spaced */
.hero-ces__ctas{
  display: flex;
  justify-content: center;
  gap: .75rem;
  margin-top: 50px;                                    /* subtitle → CTAs spacing */
}
.hero-ces__ctas .wp-block-button__link{
  border-radius: .5rem;
  font-weight: 600;
  padding: .85rem 1.25rem;
}
.hero-ces__ctas .is-style-fill .wp-block-button__link{
  background: var(--brand-accent);
  color: #fff;
}
.hero-ces__ctas .is-style-outline .wp-block-button__link{
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.55);
}

/* --- Anchor behavior (smooth only on click handled by JS; keep load stable) */
html{ scroll-behavior: auto; }        /* avoid auto-smooth on pageload */
:target{ scroll-margin-top: 96px; }   /* anchors below sticky header nicely in view */

/* --- Mobile adjustments ---------------------------------------------- */
@media (max-width: 900px){
  .hero-ces__copy{
    grid-template-columns: 1fr;       /* no 1/3 offset on small screens */
    padding-block-start: calc(clamp(16px,4vw,48px) + 8vh);
  }
  .hero-ces__stack{ grid-column: 1; }
}

.hero-ces.alignfull{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}

/* ---------------------- Damp above coffee cup ---------------------------- */

/* Tekst altijd boven de damp */
.ce-hero .hero-ces__copy{ z-index: 3; }
.ce-hero::before{ z-index: 1; } /* globale scrim blijft */

/* ===== Hyperrealistic Steam (met SVG filter) ===== */
.ce-hero::after{
  content:"";
  position:absolute; inset:auto 0 0 0;
  z-index:2; pointer-events:none;

  /* TUNE: plaats & grootte van de pluim */
  --steam-left:   24vw;   /* horizontaal */
  --steam-bottom: 37.5vh;   /* afstand vanaf onderkant hero */
  --steam-width:  17vw;
  --steam-height: 70vh;
  --steam-opacity: 0.09; /* 0.12 */

  left:   var(--steam-left);
  bottom: var(--steam-bottom);
  width:  var(--steam-width);
  height: var(--steam-height);
  opacity:var(--steam-opacity);

  /* Fallback-achtergrond (jouw eerdere zachte pluimen) */
  background:
    radial-gradient( 60% 45% at 50% 95%, rgba(255,255,255,.22) 0%, rgba(255,255,255,.10) 35%, transparent 60%),
    radial-gradient( 50% 40% at 60% 98%, rgba(255,255,255,.20) 0%, rgba(255,255,255,.09) 30%, transparent 60%),
    radial-gradient( 70% 60% at 40% 100%, rgba(255,255,255,.16) 0%, rgba(255,255,255,.07) 32%, transparent 62%);

  /* Realistische variant: wit vlak + mask shaped plume + SVG verstoring */
  /* (mask werkt in moderne browsers; fallback = de background hierboven) */
  background-color: rgba(255,255,255,.8);
  -webkit-mask-image:
    radial-gradient( 60% 45% at 50% 95%, #000 0%, #000 35%, transparent 60%),
    radial-gradient( 50% 40% at 60% 98%, #000 0%, #000 30%, transparent 60%),
    radial-gradient( 70% 60% at 40% 100%, #000 0%, #000 32%, transparent 62%);
  mask-image:
    radial-gradient( 60% 45% at 50% 95%, #000 0%, #000 35%, transparent 60%),
    radial-gradient( 50% 40% at 60% 98%, #000 0%, #000 30%, transparent 60%),
    radial-gradient( 70% 60% at 40% 100%, #000 0%, #000 32%, transparent 62%);
  -webkit-mask-composite: source-over;
  mask-composite: add;

  /* De magie: vervormen met het SVG-filter */
  filter: url(#ce-steam);

  will-change: transform;
  transform-origin: 50% 100%; /* voelt natuurlijker: “vast” aan de onderrand */

   /* Verticale amplitude (procent van eigen hoogte) */
  --rise-from:  0.5%;
  --rise-to:   -0.5%;

  /* Horizontale amplitude (in vw → altijd zichtbaar) */
  --sway-from: -0.5vw;
  --sway-to:    0.5vw;

  will-change: transform;
  transform-origin: 50% 100%;
  /* vervang je eerdere animation-regel door deze: */
  animation:
    ce-steam-motion 8s ease-in-out infinite alternate,
    ce-steam-drift1 10s linear infinite,
    ce-steam-drift2 15s linear infinite reverse;
}

/* Mobile tuning */
@media (max-width:900px){
  .ce-hero::after{
    --steam-left: -5vw;
    --steam-bottom: 37vh;
    --steam-width:  34vw;
    --steam-height: 66vh;
    --steam-opacity: 0.09;
  }
}

/* Animaties (beweging van de pluim) */
@keyframes ce-steam-motion{
  0%   { transform: translate(var(--sway-from), var(--rise-from)) scale(1); }
  100% { transform: translate(var(--sway-to),   var(--rise-to))   scale(1.06); }
}
@keyframes ce-steam-drift1{
  0%   { -webkit-mask-position: 0% 0%, 0% 0%, 0% 0%; mask-position: 0% 0%, 0% 0%, 0% 0%; }
  100% { -webkit-mask-position: -6% 0%, 5% 0%, -3% 0%;
          mask-position:         -6% 0%, 5% 0%, -3% 0%; }
}
@keyframes ce-steam-drift2{
  0%   { -webkit-mask-position: 0% 0%, 0% 0%, 0% 0%; mask-position: 0% 0%, 0% 0%, 0% 0%; }
  100% { -webkit-mask-position:  4% 0%, -5% 0%, 6% 0%;
          mask-position:          4% 0%, -5% 0%, 6% 0%; }
}

/* Motion-reduce respecteren */
@media (prefers-reduced-motion: reduce){
  .ce-hero::after{ animation:none; opacity:0; }
}

/* ----------------------------------- einde damp koffiekop ---------------------------------------------------- */