/* =====================================================================
   Atlantis Almere — Ons Verhaal (Story)  (dc-content-block)
   Cinematic split: layered parallax visual | content.
   Scoped under .dc-story. Edge-to-edge, self-contained.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap');

.elementor-widget-dc-content-block,
.elementor-widget-dc-content-block .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    max-width: 100%;
}

.dc-story {
    --dc-ink:       #08131f;
    --dc-ink-2:     #0d2438;
    --dc-gold:      #d4a24e;
    --dc-gold-soft: #e7c98b;
    --dc-heading:   #ffffff;
    --dc-text:      rgba(255,255,255,.76);
    --dc-glass:     rgba(255,255,255,.06);
    --dc-glass-brd: rgba(255,255,255,.14);
    --dc-radius:    22px;
    --dc-ease:      cubic-bezier(.16,1,.3,1);

    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: clamp(80px, 11vw, 150px) 0;
    overflow: hidden;
    isolation: isolate;
    color: var(--dc-text);
    background:
        radial-gradient(70% 60% at 100% 100%, rgba(212,162,78,.10) 0%, transparent 55%),
        linear-gradient(180deg, var(--dc-ink) 0%, var(--dc-ink-2) 100%);
    font-family: 'Karla', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.dc-story__inner {
    width: 100%; max-width: 1320px; margin: 0 auto;
    padding: 0 clamp(22px, 5vw, 72px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}
.dc-story--reverse .dc-story__visual { order: 2; }

/* ----------------------------- visual ---------------------------- */
.dc-story__visual {
    position: relative;
    min-height: 460px;
}
.dc-story__img-main {
    position: relative; z-index: 2;
    width: 82%;
    border-radius: var(--dc-radius);
    overflow: hidden;
    box-shadow: 0 40px 90px -34px rgba(0,0,0,.8);
    border: 1px solid var(--dc-glass-brd);
}
.dc-story--reverse .dc-story__img-main { margin-left: auto; }
.dc-story__img-main img,
.dc-story__img-float img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-story__img-main img { aspect-ratio: 4 / 5; transform: scale(1.05); transition: transform 1s var(--dc-ease); }
.dc-story__img-main:hover img { transform: scale(1.1); }

.dc-story__img-float {
    position: absolute; z-index: 3;
    right: 0; bottom: 8%;
    width: 46%;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 70px -28px rgba(0,0,0,.85);
    border: 3px solid var(--dc-ink-2);
    will-change: transform;
}
.dc-story--reverse .dc-story__img-float { right: auto; left: 0; }
.dc-story__img-float img { aspect-ratio: 1 / 1; }

/* ----------------------------- content --------------------------- */
.dc-story__eyebrow {
    display: inline-flex; align-items: center; gap: 11px;
    padding: 8px 16px 8px 13px;
    border: 1px solid var(--dc-glass-brd); border-radius: 999px;
    background: var(--dc-glass);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--dc-gold-soft);
}
.dc-story__eyebrow svg { width: 17px; height: 17px; color: var(--dc-gold); }
.dc-story__title {
    margin: 20px 0 0;
    font-family: 'Playfair Display', Georgia, serif; font-weight: 600; color: var(--dc-heading);
    font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.08; letter-spacing: -.01em;
}
.dc-story__title em { font-style: italic; font-weight: 500; color: var(--dc-gold); }
.dc-story__text { margin: 20px 0 0; font-size: clamp(1rem,1.2vw,1.13rem); line-height: 1.75; }
.dc-story__text :where(p) { margin: 0 0 1em; }
.dc-story__text :where(p):last-child { margin-bottom: 0; }

.dc-story__features { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.dc-story__feature { display: flex; align-items: flex-start; gap: 13px; }
.dc-story__feature-ic {
    flex: none; display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: 9px; color: var(--dc-gold);
    background: rgba(212,162,78,.12); border: 1px solid rgba(212,162,78,.3);
}
.dc-story__feature-ic svg { width: 17px; height: 17px; }
.dc-story__feature span { font-size: 1rem; line-height: 1.45; color: rgba(255,255,255,.9); padding-top: 3px; }

.dc-story__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.dc-story__btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 26px; border-radius: 999px;
    font-size: 1rem; font-weight: 700; text-decoration: none; cursor: pointer;
    transition: transform .35s var(--dc-ease), box-shadow .35s var(--dc-ease), background-color .35s var(--dc-ease);
}
.dc-story__btn svg { width: 18px; height: 18px; transition: transform .35s var(--dc-ease); }
.dc-story__btn--primary { color: #1c1206; background: linear-gradient(135deg, var(--dc-gold-soft), var(--dc-gold)); box-shadow: 0 14px 32px -12px rgba(212,162,78,.7); }
.dc-story__btn--primary:hover { transform: translateY(-3px); box-shadow: 0 22px 46px -14px rgba(212,162,78,.85); }
.dc-story__btn--primary:hover svg { transform: translateX(4px); }
.dc-story__btn--ghost { color: #fff; background: rgba(255,255,255,.06); border: 1px solid var(--dc-glass-brd); }
.dc-story__btn--ghost:hover { transform: translateY(-3px); background: rgba(255,255,255,.13); }
.dc-story__btn:focus-visible { outline: 3px solid var(--dc-gold-soft); outline-offset: 3px; }

/* ----------------------------- reveal states --------------------- */
.dc-story--anim .dc-story__content > *,
.dc-story--anim .dc-story__img-main,
.dc-story--anim .dc-story__img-float { opacity: 0; }

/* ----------------------------- responsive ------------------------- */
@media (max-width: 900px) {
    .dc-story__inner { grid-template-columns: 1fr; gap: 48px; }
    .dc-story--reverse .dc-story__visual { order: 0; }
    .dc-story__visual { min-height: 420px; max-width: 520px; }
}
@media (max-width: 540px) {
    .dc-story__img-main { width: 86%; }
    .dc-story__img-float { width: 50%; }
    .dc-story__btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-story__img-main img, .dc-story__img-float { transform: none !important; transition: none; }
    .dc-story--anim .dc-story__content > *,
    .dc-story--anim .dc-story__img-main,
    .dc-story--anim .dc-story__img-float { opacity: 1 !important; }
}