/* ===========================
   Concursos (/concursos) y Formularios (/formularios) — ibercook-contests.css
   Comparten hoja de estilos porque son visualmente la misma familia de página
   (listado en tarjetas + detalle con hero a la izquierda y card navy con
   formulario a la derecha). Detalle de concurso: nodo Figma 877:9222 (LP),
   archivo https://www.figma.com/design/ySIn7LBv4z9i6DKBUnul8J
   =========================== */

/* Page wrapper with grain texture, mismo patrón que el resto de páginas nuevas */
.cnt-page {
    position: relative;
    background: var(--ib-off-white);
    min-height: 100vh;
}
.cnt-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/images/ib/textura-fondo.jpg');
    background-repeat: repeat;
    background-size: 512px 512px;
    opacity: 0.15;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}
.cnt-page > * {
    position: relative;
    z-index: 1;
}

/* Detalle de concurso con foto de fondo (imagen del campo "Imagen" del concurso,
   pasada como custom property --cnt-bg-image desde contest/show.html.twig). Se
   añade como modificador en vez de tocar .cnt-page a secas porque esta hoja la
   comparten el listado y /formularios, que no llevan foto de fondo.
   Ajustado al nodo Figma 877:9222 (LP) 2026-07-22: fondo claro (no navy oscuro),
   sin tarjetas de cristal — el texto va suelto sobre el fondo aclarado y la card
   del formulario es navy sólido, igual que en modo sin foto. La foto real de
   cada concurso puede ser oscura (p. ej. una cocina), así que se aclara con un
   velo denso color crema (--ib-off-white) en vez de mostrarla tal cual. */
.cnt-page--photo {
    background-color: var(--ib-off-white);
    min-height: 0;
}
.cnt-page--photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(180deg, rgba(245, 242, 235, .94) 0%, rgba(245, 242, 235, .96) 100%),
        var(--cnt-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}
.cnt-page__a_logo {
    display: block;
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    margin: 0;
}
.cnt-page__logo {
    display: block;
    height: 40px;
    width: auto;
}
.cnt-page--photo .cnt-hero { padding-top: 6rem; }
.cnt-form-card__title {
    font-family: var(--ib-font-heading);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--ib-red);
    text-align: center;
    margin: 0 0 1.5rem;
}

/* -- Listado (/concursos, /formularios) -- */
.cnt-list-hero {
    max-width: 900px;
    margin: 0 auto;
    padding: 4rem 5vw 2.5rem;
    text-align: center;
}
.cnt-list-hero__eyebrow {
    font-family: var(--ib-font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ib-red);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.75rem;
}
.cnt-list-hero__title {
    font-family: var(--ib-font-heading);
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    font-weight: 700;
    color: var(--ib-navy);
    margin: 0 0 1rem;
    line-height: 1.1;
}
.cnt-list-hero__description {
    font-family: var(--ib-font-body);
    font-size: 1.125rem;
    color: var(--ib-blue);
    line-height: 1.55;
    margin: 0;
}

.cnt-empty {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 5vw 5rem;
    font-family: var(--ib-font-body);
    color: var(--ib-blue);
    text-align: center;
}

.cnt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.75rem;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 5vw 5rem;
}

.cnt-card {
    display: flex;
    flex-direction: column;
    background: var(--ib-off-white);
    border: 1px solid #ccc;
    border-radius: var(--ib-radius);
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.2s, transform 0.18s, box-shadow 0.18s;
}
.cnt-card:hover {
    border-color: var(--ib-navy);
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(30, 52, 86, 0.1);
}

.cnt-card__image {
    position: relative;
    height: 200px;
    background: var(--ib-light-gray);
    flex-shrink: 0;
}
.cnt-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cnt-card__status {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 0.3rem 0.9rem;
    border-radius: var(--ib-radius-pill);
    font-family: var(--ib-font-body);
    font-size: 0.8125rem;
    font-weight: 600;
}
.cnt-card__status--open { background: var(--ib-red); color: #fff; }
.cnt-card__status--closed { background: rgba(30, 52, 86, 0.7); color: #fff; }

.cnt-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem 1.5rem 1.75rem;
    flex: 1;
}
.cnt-card__type {
    font-family: var(--ib-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ib-red);
    text-transform: uppercase;
    margin: 0;
}
.cnt-card__title {
    font-family: var(--ib-font-heading);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--ib-navy);
    margin: 0;
    line-height: 1.25;
}
.cnt-card__prize {
    font-family: var(--ib-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ib-navy);
    margin: 0;
}
.cnt-card__excerpt {
    font-family: var(--ib-font-body);
    font-size: 0.9375rem;
    color: var(--ib-blue);
    line-height: 1.55;
    margin: 0;
}
.cnt-card__cta {
    margin-top: auto;
    padding-top: 0.75rem;
    font-family: var(--ib-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ib-red);
}

.cnt-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 1440px;
    margin: 0 auto;
    padding: 4rem 5vw 5rem;
    align-items: start;
}

/* -- Columna izquierda: texto del concurso -- */
.cnt-hero__eyebrow {
    font-family: var(--ib-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ib-red);
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.cnt-hero__title {
    font-family: var(--ib-font-heading);
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    font-weight: 700;
    color: var(--ib-navy);
    line-height: 1.1;
    margin: 0 0 1.5rem;
}

.cnt-hero__meta {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0 0 1.25rem;
}
.cnt-hero__meta-item {
    font-family: var(--ib-font-body);
    font-size: 1rem;
    color: var(--ib-blue);
    margin: 0;
}
.cnt-hero__meta-item strong { color: var(--ib-navy); }

.cnt-hero__description {
    font-family: var(--ib-font-body);
    font-size: 1.25rem;
    color: var(--ib-navy);
    line-height: 1.6;
    margin: 0 0 2rem;
}

.cnt-hero__image {
    border-radius: var(--ib-radius);
    overflow: hidden;
    margin: 0 0 2rem;
}
.cnt-hero__image img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    display: block;
}

.cnt-hero__body {
    font-family: var(--ib-font-body);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--ib-navy);
}
.cnt-hero__body p { margin: 0 0 1rem; }
.cnt-hero__body :last-child { margin-bottom: 0; }

/* Bloque insertable desde plantilla CKEditor ("Destacado + imagen"): titular en
   rojo Ibercook, imagen debajo, texto de cierre. Vive dentro de .cnt-hero__body. */
.cnt-content-block { margin: 0 0 2rem; }
.cnt-content-block__lead {
    font-family: var(--ib-font-heading);
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 700;
    color: var(--ib-red);
    line-height: 1.3;
    margin: 0 0 1.25rem;
}
.cnt-content-block__image {
    border-radius: var(--ib-radius);
    overflow: hidden;
    margin: 0 0 1.25rem;
}
.cnt-content-block__image img {
    width: 100%;
    height: auto;
    display: block;
}
.cnt-content-block__text { margin: 0; }

/* -- Columna derecha: card navy con el formulario de participación -- */
.cnt-form-card {
    background: var(--ib-navy);
    border-radius: var(--ib-radius);
    padding: 2.5rem;
}

.cnt-alert {
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
}
.cnt-alert--success { background: #d4edda; color: #155724; }
.cnt-alert--error { background: #f8d7da; color: #721c24; }

.cnt-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
}

.cnt-form__group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.cnt-form__group--full { grid-column: 1 / -1; }

.cnt-form__label {
    font-family: var(--ib-font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(245, 245, 245, 0.85);
}

.cnt-form__input,
.cnt-form__textarea {
    background: var(--ib-light-gray);
    border: none;
    border-radius: 12px;
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--ib-navy);
    width: 100%;
    box-sizing: border-box;
}
.cnt-form__input::placeholder,
.cnt-form__textarea::placeholder { color: #999; }
.cnt-form__input:focus,
.cnt-form__textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--ib-red);
}
.cnt-form__textarea { resize: vertical; min-height: 100px; line-height: 1.5; }

/* Estado de error (form_errors de Symfony, con el theme que añade class="form-errors") */
.cnt-form ul.form-errors {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
}
.cnt-form ul.form-errors li {
    font-size: 0.8125rem;
    color: var(--ib-red);
}
.cnt-form__group:has(.form-errors) .cnt-form__input,
.cnt-form__group:has(.form-errors) .cnt-form__textarea {
    box-shadow: 0 0 0 1.5px var(--ib-red);
}

/* Desplegable "Tipo de negocio" (LandingForm::collectBusinessType) */
.cnt-form__select-wrap { position: relative; }
.cnt-form__select-wrap .cnt-form__input {
    appearance: none;
    cursor: pointer;
    padding-right: 2.5rem;
}
.cnt-form__select-wrap::after {
    content: '';
    pointer-events: none;
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--ib-navy);
}

.cnt-form ul {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
    color: #ffb4b4;
    font-size: 0.8125rem;
}

.cnt-form__legal {
    margin-top: 1rem;
    font-family: var(--ib-font-body);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: rgba(245, 245, 245, 0.65);
}
.cnt-form__legal p { margin: 0; }

.cnt-form__checks {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cnt-form__check {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}
.cnt-form__check input[type="checkbox"] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 0.15rem;
    border: 0.5px solid var(--ib-navy);
    border-radius: 3px;
    background: var(--ib-light-gray);
    appearance: none;
    cursor: pointer;
    position: relative;
}
.cnt-form__check input[type="checkbox"]:checked { background: var(--ib-red); }
.cnt-form__check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.cnt-form__check-label {
    font-family: var(--ib-font-body);
    font-size: 0.875rem;
    color: rgba(245, 245, 245, 0.9);
    line-height: 1.45;
}

.cnt-form__submit {
    margin-top: 1.75rem;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--ib-red);
    color: #f5f5f5;
    font-size: 1.125rem;
    font-weight: 500;
    font-family: var(--ib-font-body);
    padding: 0.875rem 2rem;
    border: none;
    border-radius: var(--ib-radius);
    cursor: pointer;
    transition: background 0.15s;
}
.cnt-form__submit:hover { background: #a80823; }

.cnt-form__closed {
    color: rgba(245, 245, 245, 0.85);
    font-family: var(--ib-font-body);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .cnt-hero {
        grid-template-columns: 1fr;
        padding: 2.5rem 5vw 3rem;
        gap: 2rem;
    }
}

@media (max-width: 600px) {
    .cnt-form-card { padding: 1.75rem; }
    .cnt-form__grid { grid-template-columns: 1fr; }
    .cnt-form__group--full { grid-column: auto; }
}

/* ============================================================
   PIE PROPIO del detalle de concurso (contest/show.html.twig no
   extiende base.html.twig, así que no lleva el footer del sitio)
   ============================================================ */
.cnt-standalone-footer {
    background: var(--ib-navy);
    padding: 2.5rem 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.cnt-standalone-footer__logo {
    height: 32px;
    width: auto;
}
.cnt-standalone-footer__copyright {
    font-family: var(--ib-font-body);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, .65);
    margin: 0;
}