/* =============================================================
   CALDERAS.CSS — Calderas page specific styles
   ENEFLIX — v=20260603
   ============================================================= */

/* ── Hero overrides ────────────────────────────────────────── */
.page-calderas .hero {
    padding-top: 0;
    padding-bottom: 1.35rem;
}

.page-calderas .hero .container {
    padding-top: 1.35rem;
}

.page-calderas .hero-layout {
    grid-template-columns: 1.08fr 0.92fr;
    gap: 2.2rem;
    align-items: end;
}

/* Badge — large accent text */
.page-calderas .hero-badge {
    background: transparent;
    color: #0d2e73;
    font-size: 2.65rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0.15rem;
    display: block;
}

/* Features — 3-col grid with SVG icons */
.page-calderas .hero-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex-direction: unset;
    gap: 1rem;
    max-width: 760px;
    margin-bottom: 1.6rem;
}

.page-calderas .hero-feature {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    color: #566b89;
    font-size: 0.92rem;
    font-weight: 500;
}

.cal-hero-feature-icon {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

/* Inline form — 3-col pill style */
.page-calderas .hero-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.95rem 0.9rem;
    max-width: 780px;
    flex-direction: unset;
}

.page-calderas .hero-form input,
.page-calderas .hero-form select {
    min-width: 0;
    width: 100%;
    height: 54px;
    border-radius: 999px;
    border: 1.5px solid #0b4b82;
    background: transparent;
    color: #0b4470;
    padding: 0 1.7rem;
    font-size: 0.95rem;
}

.page-calderas .hero-form input::placeholder {
    color: #0b4470;
    opacity: 1;
}

.page-calderas .hero-form select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #0b4470 50%),
        linear-gradient(135deg, #0b4470 50%, transparent 50%);
    background-position:
        calc(100% - 24px) calc(50% - 3px),
        calc(100% - 19px) calc(50% - 3px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.page-calderas .hero-form input:focus,
.page-calderas .hero-form select:focus {
    outline: none;
    border-color: #0b4470;
    box-shadow: 0 0 0 3px rgba(11, 68, 112, 0.08);
}

.page-calderas .btn-hero-form {
    grid-column: 1 / -1;
    height: 54px;
    border-radius: 999px;
    font-size: 0.98rem;
    box-shadow: none;
}

/* Right column — image only, with diagonal navy shape */
.page-calderas .hero-visual {
    min-height: 420px;
    overflow: hidden;
    border-radius: 0;
    padding-top: 0;
    padding-right: 0.8rem;
    justify-content: flex-end;
}

.page-calderas .hero-visual::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 76%;
    background: #0b4f7e;
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
    z-index: 0;
}

.page-calderas .hero-img {
    position: absolute;
    right: -0.35rem;
    bottom: -0.35rem;
    left: auto;
    top: auto;
    width: min(100%, 560px);
    height: auto;
    max-height: 104%;
    object-fit: contain;
    object-position: 100% 100%;
    z-index: 1;
}

.page-calderas .hero-visual::after {
    display: none;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .page-calderas .hero-title { font-size: 3.2rem; }
    .page-calderas .hero-badge { font-size: 2.1rem; }
}

@media (max-width: 768px) {
    .page-calderas .hero-layout {
        grid-template-columns: 1fr;
    }
    .page-calderas .hero-form {
        grid-template-columns: 1fr;
    }
    .page-calderas .btn-hero-form {
        grid-column: auto;
    }
    .page-calderas .hero-visual {
        min-height: 260px;
        padding-right: 0;
    }
    .page-calderas .hero-img {
        right: 0;
        width: min(100%, 430px);
        max-height: 100%;
    }
}

@media (max-width: 520px) {
    .page-calderas .hero-features {
        grid-template-columns: 1fr 1fr;
    }
    .page-calderas .hero-badge { font-size: 1.75rem; }
    .page-calderas .hero-visual {
        min-height: 220px;
    }
    .page-calderas .hero-img {
        width: min(100%, 340px);
        bottom: 0;
    }
}