/*
 * Extracted from mu-plugins/kalon-contact-form.php on 2026-04-10
 * (Phase 4 of the kalon-theme refactor).
 */


/* ── Hero ───────────────────────────────────────────────── */
.kcf-hero {
    position: relative; overflow: hidden;
    min-height: 50svh; display: flex; align-items: center; justify-content: center;
}
.kcf-hero::before {
    content: ''; position: absolute; inset: 0;
    background: rgba(0,0,0,0.45); z-index: 1;
}
.kcf-hero img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
.kcf-hero__content {
    position: relative; z-index: 2;
    text-align: center; padding: 100px 24px 60px; max-width: 700px;
}
.kcf-hero__content h1 {
    font-family: var(--kalon-font); font-size: clamp(28px,5vw,48px);
    font-weight: 300; text-transform: uppercase; letter-spacing: 0.14em;
    color: #fff; line-height: 1.3; margin: 0;
}
.kcf-hero__content h1 span { display: block; font-weight: 500; }
.kcf-hero__subtitle {
    font-family: var(--kalon-font-serif, Georgia, serif);
    font-size: clamp(16px, 2vw, 20px); font-style: italic; font-weight: 300;
    color: rgba(255,255,255,0.9); margin: 16px 0 0; line-height: 1.5;
}


/* ── Steps ──────────────────────────────────────────────── */
.kcf-steps { padding: 80px 0; }
.kcf-steps__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
    margin-top: 48px; position: relative;
}
/* Connecting line between steps */
.kcf-steps__grid::before {
    content: ''; position: absolute;
    top: 28px; left: calc(16.67% + 28px); right: calc(16.67% + 28px);
    height: 2px; background: var(--kalon-border-light, #e5e0d9);
    z-index: 0;
}
.kcf-step { text-align: center; position: relative; z-index: 1; }
.kcf-step__icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--kalon-cyan); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 20px; position: relative;
}
.kcf-step__icon svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kcf-step__title {
    font-family: var(--kalon-font); font-size: 14px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--kalon-text-primary); margin: 0 0 10px;
    min-height: 2.8em; display: flex; align-items: center; justify-content: center;
}
.kcf-step__desc {
    font-size: 14px; line-height: 1.7; color: var(--kalon-text-body); margin: 0;
}


/* ── Form section with side review ──────────────────────── */
.kcf-section { padding: 72px 0; }
.kcf-header { margin-bottom: 24px; }
.kcf-subtitle {
    font-size: 15px; color: var(--kalon-text-light);
    margin: 4px 0 0; line-height: 1.6;
}

/* Two-column: form left, review right */
.kcf-layout {
    display: grid; grid-template-columns: 1fr 340px; gap: 56px;
    align-items: start;
}
.kcf-layout__form { min-width: 0; }
.kcf-layout__review {
    padding: 32px; border-radius: var(--kalon-radius, 12px);
    background: var(--kalon-bg-warm, #f7f4ef);
}
.kcf-review-card__stars {
    color: #f5a623; font-size: 14px; letter-spacing: 2px; margin-bottom: 12px;
}
.kcf-review-card__text {
    font-size: 14px; line-height: 1.7; color: var(--kalon-text-body);
    margin: 0 0 16px; font-style: italic;
}
.kcf-review-card__footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; flex-wrap: wrap;
}
.kcf-review-card__name {
    font-family: var(--kalon-font); font-size: 13px; font-weight: 600;
    color: var(--kalon-text-primary);
}
.kcf-review-card__meta {
    font-size: 12px; color: var(--kalon-text-light);
}
.kcf-review-card__source {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--kalon-text-light); margin-top: 4px;
}
.kcf-review-card__source svg { flex-shrink: 0; }
.kcf-review-card__aggregate {
    margin-top: 20px; padding-top: 16px;
    border-top: 1px solid var(--kalon-border-faint, #eeebe6);
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.kcf-agg-badge {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--kalon-text-light);
    text-decoration: none;
}
.kcf-agg-badge:hover { color: var(--kalon-text-primary); }
.kcf-agg-badge__score { font-weight: 600; color: var(--kalon-text-primary); font-size: 13px; }
.kcf-agg-badge__stars { color: #f5a623; font-size: 11px; letter-spacing: 1px; }

/* The form inside .kcf-form-wrap is now provided by kalon-check-availability
   (a self-styled .kalon-form-root). The previous ~110 lines of CSS in this file
   targeted .elementor-form-fields-wrapper / .elementor-field / .elementor-button
   selectors that don't exist anymore. The new form's styling is fully scoped
   inside its own assets/kalon-form.css. */

/* Contact links */
.kcf-contact {
    display: flex; gap: 24px; margin-top: 16px; padding-top: 16px;
    border-top: 1px solid var(--kalon-border-faint); flex-wrap: wrap;
}
.kcf-contact a {
    font-size: 13px; font-weight: 400; color: var(--kalon-text-light);
    text-decoration: none; letter-spacing: .03em; transition: color .2s;
}
.kcf-contact a:hover { color: var(--kalon-cyan); }


/* ── Video section ──────────────────────────────────────── */
.kcf-video { padding: 80px 0; }
.kcf-video__wrap { max-width: 800px; margin: 32px auto 0; }
/* Facade styles (from DS) */
.kalon-video-facade {
    position: relative; width: 100%; padding-bottom: 56.25%;
    overflow: hidden; border-radius: 8px; background: #111; cursor: pointer;
}
.kalon-video-facade img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; transition: opacity .3s;
}
.kalon-video-facade:hover img { opacity: .85; }
.kalon-video-facade__play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 72px; height: 72px; background: rgba(0,0,0,.65);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    transition: background .3s, transform .3s; pointer-events: none;
}
.kalon-video-facade:hover .kalon-video-facade__play {
    background: rgba(0,0,0,.85); transform: translate(-50%,-50%) scale(1.08);
}
.kalon-video-facade__play svg {
    width: 24px; height: 24px; fill: #fff; margin-left: 3px;
}


/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 960px) {
    .kcf-layout {
        grid-template-columns: 1fr; gap: 32px;
    }
    .kcf-layout__review {
        position: static; order: -1;
    }
}

@media (max-width: 768px) {
    .kcf-hero { min-height: 45svh; }
    .kcf-hero::before { background: rgba(0,0,0,0.55); }
    .kcf-hero__content { padding: 80px 24px 40px; }

    .kcf-steps { padding: 48px 0; }
    .kcf-steps__grid {
        grid-template-columns: 1fr; max-width: 320px;
        margin-left: auto; margin-right: auto; gap: 32px;
    }
    .kcf-steps__grid::before { display: none; }
    .kcf-step__title { min-height: auto; }

    .kcf-section { padding: 48px 0; }
    .kcf-video { padding: 48px 0; }
}