/* ==================================================================
   PRAYER + CARE  (/care)  — WEN127308

   Solo lo que NO existe en el sitio: el panorama de apertura, el bloque
   que pasa de cream a oscuro, y las tarjetas de ministerio con la foto
   de fondo. Titulos, botones, formulario y muro usan los componentes de
   siempre (custom.css), que es como se armo el diseno aprobado.
   ================================================================== */

/* ---- Panorama de apertura ---- */
.cwc-panorama {
    height: clamp(380px, 46vw, 640px);
    overflow: hidden;
    background-color: #152022;
}

.cwc-panorama img {
    width: 100%;
    height: 110%;              /* el 10% extra es el recorrido del parallax */
    object-fit: cover;
    object-position: center 40%;
    display: block;
    will-change: transform;
}

/* ---- Intro + Care Team: arranca cream, pasa a oscuro ----
   Lo dispara el JS (seccion 16) al entrar en pantalla. */
.cwc-care-shift {
    background-color: #f5f0e0;
    color: #152022;
    transition: background-color 0.6s ease, color 0.6s ease;
}

/* Las secciones traen fondo propio: hay que transparentarlo o tapan el
   del bloque y la mitad de arriba no cambia de color. */
.cwc-care-shift .cwc-page-title,
.cwc-care-shift .cwc-care-team {
    background-color: transparent;
}

.cwc-care-shift.is-dark {
    background-color: #152022;
}

/* Hereda todo el texto, incluidos los <strong> del aviso de crisis */
.cwc-care-shift.is-dark,
.cwc-care-shift.is-dark h1,
.cwc-care-shift.is-dark h2,
.cwc-care-shift.is-dark p,
.cwc-care-shift.is-dark strong {
    color: #f5f0e0;
}

.cwc-care-shift.is-dark a {
    color: #d2dc51;
}

/* Los botones llevan la variante --dark en el blade (fondo cream);
   cuando el bloque ya es oscuro vuelven a la clara. */
.cwc-care-shift.is-dark .btn-transparency--dark {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: rgba(255, 255, 255, 0.12);
    --bs-btn-hover-color: #152022;
    --bs-btn-hover-bg: #ffffff;
}

/* ---- Care Team ---- */
.cwc-care-team {
    padding: 0 0 90px 0;
}

.cwc-care-team__lead {
    font-size: 18px;
    line-height: 1.65;
    margin-bottom: 26px;
}

.cwc-care-contact {
    margin: 0 0 26px 0;
}

.cwc-care-contact p {
    margin: 0;
    line-height: 1.9;
}

/* Aviso de crisis: borde lima a la izquierda. Tiene que saltar a la
   vista sin gritar. */
.cwc-care-crisis {
    border-left: 4px solid #d2dc51;
    padding: 12px 0 12px 18px;
}

.cwc-care-crisis p {
    margin: 0;
    line-height: 1.65;
}

/* ---- Encabezado de la seccion de ministerios ----
   Aire propio: con el mb-5 de Bootstrap el titulo quedaba pegado a las
   tarjetas. */
.cwc-care__title {
    margin-bottom: 56px;
}

/* ---- Tarjetas de ministerio ----
   Lo unico realmente nuevo: foto de fondo a sangre y el texto encima. */
.cwc-ministry {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Contenido al pie, como el diseno aprobado: los titulos quedan
       escalonados a proposito segun el largo de cada texto. */
    justify-content: flex-end;
    height: 100%;
    min-height: 590px;
    overflow: hidden;
    border-radius: 10px;
    background-color: #152022;
}

.cwc-ministry__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Velo oscuro para que el texto se lea sobre cualquier foto */
.cwc-ministry::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(21, 32, 34, 0.55);
    z-index: 1;
}

/* Anclado al pie con position absolute: ni justify-content ni
   margin-top:auto lo pegaban abajo de forma consistente. */
.cwc-ministry__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 28px;
    color: #ffffff;
}

.cwc-ministry__body h3 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(28px, 2.6vw, 38px);
    line-height: 1.05;
    letter-spacing: -0.5px;
    margin: 0 0 14px 0;
    color: #ffffff;
}

.cwc-ministry__body p {
    font-size: 16px;
    line-height: 1.55;
    margin: 0 0 24px 0;
    color: #ffffff;
}

/* Botones a lo ancho de la tarjeta, texto a la izquierda y la flecha
   contra el borde derecho, como el diseno aprobado. */
.cwc-ministry__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.cwc-ministry__actions .btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 14px;
    padding: 13px 18px;
    text-align: left;
}

/* En las tarjetas el texto va en capitalizacion normal, no en
   mayusculas como el resto de los botones del sitio. */
.cwc-ministry__actions .btn span {
    text-transform: none;
    font-size: 15px;
    letter-spacing: 0;
}


/* ---- Seccion del formulario ---- */
.cwc-care__form-heading {
    max-width: 22ch;
    margin-bottom: 48px;
}

/* La caja del formulario: borde fino, esquinas de 10px y labels a la
   vista encima de cada campo, como el diseno aprobado. */
.cwc-care-form {
    border: 1px solid rgba(245, 240, 224, 0.25);
    border-radius: 10px;
    padding: 30px;
}

.cwc-care-form__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 24px;
    line-height: 1.1;
    margin: 0 0 24px 0;
    color: #f5f0e0;
}

.cwc-care-form label {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
    color: #f5f0e0;
}

@media (max-width: 767.98px) {
    .cwc-care-form {
        padding: 24px 20px;
    }

    .cwc-care__form-heading {
        margin-bottom: 32px;
    }
}

/* El responsive de esta pagina NO va aca: vive en los archivos del
   proyecto, que se cargan despues y son la convencion del sitio.
     mobile  -> responsive-mobile.css
     iPad    -> responsive-ipad-vertical.css / -horizontal.css */