/* Elementor Free page system for Henny Thijssen theme. */

.ht-main--elementor {
    overflow: hidden;
}

body.elementor-page .elementor,
body.elementor-page .elementor-element {
    --ht-el-gap: clamp(1.4rem, 3vw, 2.4rem);
}

.ht-el-section {
    width: 100% !important;
    max-width: none !important;
    padding: clamp(4.5rem, 8vw, 8rem) 0 !important;
    background: var(--ht-bg);
}

.ht-el-section--soft {
    background: var(--ht-bg-soft) !important;
}

.ht-el-shell {
    width: min(calc(100% - 40px), var(--ht-container)) !important;
    max-width: var(--ht-container) !important;
    margin-inline: auto !important;
    gap: var(--ht-el-gap) !important;
}

.ht-el-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: .35rem !important;
}

.ht-el-grid-2 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: clamp(2.5rem, 7vw, 7rem) !important;
}

.ht-el-grid-2--hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr) !important;
}

.ht-el-grid-2--top {
    align-items: start !important;
}

.ht-el-card-grid-2,
.ht-el-card-grid-3 {
    display: grid !important;
    gap: 1.25rem !important;
}

.ht-el-card-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
.ht-el-card-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }

.ht-el-hero {
    min-height: min(820px, calc(100vh - var(--ht-header))) !important;
    display: grid !important;
    align-items: center !important;
    position: relative;
    background:
        radial-gradient(circle at 75% 25%, rgba(201,168,106,.12), transparent 30%),
        linear-gradient(140deg, #080809 0%, #111012 55%, #0b0b0c 100%) !important;
}

.ht-el-hero::before,
.ht-el-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0,0,0,.15), transparent 45%, rgba(201,168,106,.035));
}

.ht-el-hero > *,
.ht-el-page-hero > * { position: relative; z-index: 1; }

.ht-el-page-hero {
    padding-top: clamp(5rem, 9vw, 9rem) !important;
    padding-bottom: clamp(4rem, 7vw, 7rem) !important;
    background: linear-gradient(135deg, #09090a, #171310) !important;
}

.ht-el-page-hero--simple .ht-el-shell {
    max-width: 900px !important;
}

.ht-el-kicker .elementor-heading-title {
    color: var(--ht-accent) !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
}

.ht-el-display-title .elementor-heading-title,
.ht-el-page-title .elementor-heading-title,
.ht-el-section-title .elementor-heading-title,
.ht-el-statement .elementor-heading-title,
.ht-el-quote .elementor-heading-title,
.ht-el-card-title .elementor-heading-title {
    color: var(--ht-text) !important;
    font-family: Georgia, "Times New Roman", ui-serif, serif !important;
    font-weight: 500 !important;
    letter-spacing: -.025em !important;
}

.ht-el-display-title .elementor-heading-title {
    font-size: clamp(4rem, 7.5vw, 7.2rem) !important;
    line-height: .91 !important;
    margin: 0 !important;
}

.ht-el-page-title .elementor-heading-title {
    font-size: clamp(3.2rem, 6vw, 6.3rem) !important;
    line-height: .98 !important;
}

.ht-el-section-title .elementor-heading-title {
    font-size: clamp(2.25rem, 4vw, 4rem) !important;
    line-height: 1.06 !important;
}

.ht-el-section-title--small .elementor-heading-title {
    font-size: clamp(2rem, 3vw, 3rem) !important;
}

.ht-el-statement .elementor-heading-title {
    max-width: 850px;
    font-size: clamp(2rem, 3.7vw, 3.8rem) !important;
    line-height: 1.05 !important;
    color: #f4eee4 !important;
}

.ht-el-subtitle .elementor-heading-title {
    color: var(--ht-accent-strong) !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: clamp(.95rem, 1.5vw, 1.25rem) !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

.ht-el-card-title .elementor-heading-title {
    font-size: clamp(1.55rem, 2.2vw, 2.1rem) !important;
}

.ht-el-quote .elementor-heading-title {
    max-width: 900px;
    font-size: clamp(2.6rem, 5vw, 5.2rem) !important;
    color: var(--ht-accent-strong) !important;
}

.ht-el-section .elementor-widget-text-editor,
.ht-el-section .elementor-widget-text-editor p,
.ht-el-section .elementor-widget-text-editor li {
    color: #d1ccc3;
}

.ht-el-section .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.ht-el-lead .elementor-widget-container,
.ht-el-lead .elementor-widget-container p {
    color: #ece7df !important;
    font-size: clamp(1.15rem, 2vw, 1.45rem) !important;
    line-height: 1.6 !important;
}

.ht-el-admin-note {
    display: none !important;
}
body.logged-in .ht-el-admin-note { display: block !important; }
body.logged-in .ht-el-admin-note .elementor-widget-container {
    padding: .9rem 1rem;
    border: 1px dashed rgba(201,168,106,.45);
    border-radius: 10px;
    background: rgba(201,168,106,.07);
    font-size: .92rem;
}

.ht-el-button-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .75rem !important;
    margin-top: .8rem;
}

.ht-el-button { width: auto !important; }
.ht-el-button .elementor-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.2rem !important;
    border: 1px solid var(--ht-accent) !important;
    border-radius: 999px !important;
    background: var(--ht-accent) !important;
    color: #111 !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: transform .2s ease, background .2s ease !important;
}
.ht-el-button .elementor-button:hover { transform: translateY(-2px); background: var(--ht-accent-strong) !important; }
.ht-el-button--secondary .elementor-button {
    background: transparent !important;
    color: var(--ht-text) !important;
    border-color: rgba(255,255,255,.25) !important;
}
.ht-el-button--secondary .elementor-button:hover { border-color: var(--ht-accent) !important; color: var(--ht-accent-strong) !important; }

.ht-el-hero-image img,
.ht-el-page-image img,
.ht-el-feature-image img {
    width: 100% !important;
    object-fit: cover !important;
    border-radius: var(--ht-radius) !important;
    box-shadow: var(--ht-shadow) !important;
}
.ht-el-hero-image img { aspect-ratio: 4 / 5 !important; max-height: 650px; }
.ht-el-page-image img { aspect-ratio: 4 / 5 !important; max-height: 620px; }
.ht-el-page-image--square img { aspect-ratio: 1 / 1 !important; }
.ht-el-page-image--wide img { aspect-ratio: 16 / 10 !important; }
.ht-el-feature-image img { aspect-ratio: 4 / 3 !important; min-height: 420px; }

.ht-el-info-card,
.ht-el-credit-card,
.ht-el-form-card {
    padding: clamp(1.5rem, 3vw, 2.2rem) !important;
    border: 1px solid var(--ht-line) !important;
    border-radius: var(--ht-radius) !important;
    background: var(--ht-surface) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.02);
}
.ht-el-credit-card--accent { border-color: rgba(201,168,106,.55) !important; }
.ht-el-form-card { background: #111113 !important; }

.ht-el-cta,
.ht-el-quote-section {
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(201,168,106,.15), transparent 45%),
        #0a0a0b !important;
}
.ht-el-cta .ht-el-shell,
.ht-el-quote-section .ht-el-shell {
    max-width: 900px !important;
    align-items: center !important;
    text-align: center;
}
.ht-el-cta .ht-el-button { margin-inline: auto; }
.ht-el-quote-section .ht-el-button-row { justify-content: center !important; }

.ht-el-shortcode-raw {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.ht-el-shortcode-raw > .e-con-inner { max-width: none !important; }
.ht-el-shortcode-raw .elementor-widget-shortcode { width: 100% !important; }

.ht-el-legal {
    max-width: 900px;
    margin-inline: auto;
}
.ht-el-legal h2 { margin-top: 2.7rem; }
.ht-el-legal h3 { margin-top: 2rem; }

.ht-contact-details {
    display: grid;
    gap: .8rem;
    margin: .3rem 0 1.5rem;
}
.ht-contact-detail {
    display: grid;
    gap: .15rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--ht-line);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
}
.ht-contact-detail > span {
    color: var(--ht-accent);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.ht-contact-detail a { font-size: 1.08rem; text-decoration: none; }

.ht-dynamic-grid { margin-top: 1.4rem; }
.ht-el-booking-info ul { margin: .5rem 0 0; padding-left: 1.25rem; color: #d1ccc3; }

@media (max-width: 900px) {
    .ht-el-grid-2,
    .ht-el-grid-2--hero,
    .ht-el-card-grid-3 {
        grid-template-columns: 1fr !important;
    }
    .ht-el-card-grid-2 { grid-template-columns: 1fr 1fr !important; }
    .ht-el-hero { min-height: auto !important; }
    .ht-el-hero-image { max-width: 600px; }
    .ht-el-hero-image img { aspect-ratio: 16 / 11 !important; max-height: none; }
    .ht-el-page-image img { aspect-ratio: 16 / 10 !important; max-height: none; }
    .ht-el-feature-image img { min-height: 0; }
}

@media (max-width: 720px) {
    .ht-el-section { padding: 4.2rem 0 !important; }
    .ht-el-shell { width: min(calc(100% - 28px), var(--ht-container)) !important; }
    .ht-el-card-grid-2 { grid-template-columns: 1fr !important; }
    .ht-el-button-row { align-items: stretch !important; }
    .ht-el-button { width: 100% !important; }
    .ht-el-button .elementor-button { width: 100%; }
    .ht-el-display-title .elementor-heading-title { font-size: clamp(3.2rem, 17vw, 5rem) !important; }
    .ht-el-page-title .elementor-heading-title { font-size: clamp(2.9rem, 14vw, 4.6rem) !important; }
}
