/* Your View — Brand photos
 * Mapa de slots data-photo → imágenes reales en /static/brand/.
 *
 * ▸ Cómo añadir fotos:
 *   1. Guarda la imagen en server/static/brand/<slot>.jpg (o .webp, ajusta la URL).
 *   2. Sin tocar CSS: la regla ya apunta a ese archivo. Si no existe, el
 *      gradiente original del .yv-photo queda como fallback automático.
 *   3. Para nuevos slots, copia la plantilla del final de este archivo.
 *
 * ▸ Formato recomendado:
 *   - JPG/WebP, calidad 80-85, sRGB, metadatos stripped.
 *   - Max 250 KB por foto; redimensiona al tamaño real de display × 2 (retina).
 *   - Composición horizontal salvo "hero-retiro" y "route-hero" que son verticales.
 *
 * ▸ Fallback:
 *   Cada regla apila la url(...) como PRIMERA capa de background-image y el
 *   gradiente como SEGUNDA capa. Si el archivo no carga (404), la segunda
 *   capa se muestra sola — mismo resultado visual que sin brand.css.
 */

/* ---- Landing ---- */

.yv-photo[data-photo="hero-retiro"] {
    background-image:
        url('/static/brand/hero-retiro.jpg'),
        linear-gradient(170deg, var(--yv-sage-2) 0%, var(--yv-salvia) 55%, var(--yv-forest) 100%);
    background-size: cover;
    background-position: center;
}

/* Una foto por tarjeta de ruta. Los IDs se generan como "route-<id>" desde el JS. */
.yv-photo[data-photo="route-1"] {
    background-image:
        url('/static/brand/route-1.jpg'),
        linear-gradient(170deg, var(--yv-sage-2) 0%, var(--yv-salvia) 55%, var(--yv-forest) 100%);
    background-size: cover;
    background-position: center;
}
.yv-photo[data-photo="route-2"] {
    background-image:
        url('/static/brand/route-2.jpg'),
        linear-gradient(170deg, var(--yv-sage-2) 0%, var(--yv-salvia) 55%, var(--yv-forest) 100%);
    background-size: cover;
    background-position: center;
}
.yv-photo[data-photo="route-3"] {
    background-image:
        url('/static/brand/route-3.jpg'),
        linear-gradient(170deg, var(--yv-sage-2) 0%, var(--yv-salvia) 55%, var(--yv-forest) 100%);
    background-size: cover;
    background-position: center;
}
.yv-photo[data-photo="route-4"] {
    background-image:
        url('/static/brand/route-4.jpg'),
        linear-gradient(170deg, var(--yv-sage-2) 0%, var(--yv-salvia) 55%, var(--yv-forest) 100%);
    background-size: cover;
    background-position: center;
}

/* ---- Login ---- */

.yv-photo[data-photo="login-conserjeria"] {
    background-image:
        url('/static/brand/login-conserjeria.jpg'),
        linear-gradient(170deg, var(--yv-sage-2) 0%, var(--yv-salvia) 55%, var(--yv-forest) 100%);
    background-size: cover;
    background-position: center;
}

/* ---- Register ---- */

.yv-photo[data-photo="register-preview"] {
    background-image:
        url('/static/brand/register-preview.jpg'),
        linear-gradient(170deg, var(--yv-sage-2) 0%, var(--yv-salvia) 55%, var(--yv-forest) 100%);
    background-size: cover;
    background-position: center;
}

/* ---- Route público ---- */

/* Por defecto reutilizamos hero-retiro. Si quieres por-ruta, crea
 * .yv-photo[data-photo="route-hero-<id>"] apuntando a la foto específica.
 */
.yv-photo[data-photo="route-hero"] {
    background-image:
        url('/static/brand/route-hero.jpg'),
        linear-gradient(170deg, var(--yv-sage-2) 0%, var(--yv-salvia) 55%, var(--yv-forest) 100%);
    background-size: cover;
    background-position: center;
}

/* ---- Analytics photo grid ---- */

.yv-photo[data-photo="wp-0"] {
    background-image:
        url('/static/brand/wp-0.jpg'),
        linear-gradient(170deg, var(--yv-sage-2) 0%, var(--yv-salvia) 55%, var(--yv-forest) 100%);
    background-size: cover;
    background-position: center;
}
.yv-photo[data-photo="wp-1"] {
    background-image:
        url('/static/brand/wp-1.jpg'),
        linear-gradient(170deg, var(--yv-sage-2) 0%, var(--yv-salvia) 55%, var(--yv-forest) 100%);
    background-size: cover;
    background-position: center;
}
.yv-photo[data-photo="wp-2"] {
    background-image:
        url('/static/brand/wp-2.jpg'),
        linear-gradient(170deg, var(--yv-sage-2) 0%, var(--yv-salvia) 55%, var(--yv-forest) 100%);
    background-size: cover;
    background-position: center;
}
.yv-photo[data-photo="wp-3"] {
    background-image:
        url('/static/brand/wp-3.jpg'),
        linear-gradient(170deg, var(--yv-sage-2) 0%, var(--yv-salvia) 55%, var(--yv-forest) 100%);
    background-size: cover;
    background-position: center;
}

/* ---- Planner / edit-route ----
 * "waypoint-current" y "waypoint-edit" son dinámicos (cambian según la parada
 * seleccionada). Dejamos gradiente por defecto. Para personalizarlos por
 * parada, el JS debería cambiar data-photo a algo como "wp-<place_id>" y
 * añadiríamos reglas aquí.
 */

/* ---- Template para nuevos slots ---------------------------------------- */
/*
.yv-photo[data-photo="<slot>"] {
    background-image:
        url('/static/brand/<slot>.jpg'),
        linear-gradient(170deg, var(--yv-sage-2) 0%, var(--yv-salvia) 55%, var(--yv-forest) 100%);
    background-size: cover;
    background-position: center;
}
*/