/* Catálogo de cajas de categoría (maqueta: categoria-personalizado.html). Compartido por Views/MenuCategoria/Index y Views/Etiqueta/EtiquetaList. Archivo nuevo, no toca las hojas heredadas. */
/* Catálogo de categorías = .personalized-catalog de la maqueta
   (categoria-personalizado.html): título de sección + contador, rejilla
   de 4 columnas (3 <=1060px, 2 <=700px), foto 730/575 con esquinas
   redondeadas y nombre debajo. Ancho de la maqueta (.shell: 1320px máx.,
   24px de margen a cada lado). La parte superior (texto + imagen) no
   cambia. */
/* La parte superior (texto + imagen) usa el mismo ancho que el catálogo
   de abajo; con padding 0 el contenido de las columnas (que ya llevan
   15px) queda alineado con el borde del catálogo. */
.personalizado-top {
    width: min(1320px, calc(100% - 48px));
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}
.personalizado-catalogo {
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
    padding: 32px 0 64px;
    font-family: 'DM Sans', Arial, sans-serif;
    color: #222326;
}
/* Página de categorías personalizadas: el título de la rejilla va a la misma distancia de la cabecera (30px, el margen inferior de la
   cabecera) que el título del listado de productos en el resto de páginas; sin relleno extra encima. En móvil (hasta 700px) se
   mantiene el relleno de 26px. */
@media (min-width: 701px) {
    .personalizado-top + .personalizado-catalogo {
        padding-top: 0;
    }
}
.personalizado-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}
.personalizado-heading h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.6px;
    line-height: 1.5;
}
.personalizado-heading > span {
    font-size: 14px;
    color: #6a6870;
}
.personalizado-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 19px 22px;
}
.personalizado-card {
    /* Columna: foto y franja de texto pegadas; en una misma fila las franjas
       tienen la misma altura aunque un nombre ocupe dos líneas. */
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
    text-decoration: none;
    color: inherit;
}
.personalizado-photo {
    overflow: hidden;
    border-radius: 14px 14px 0 0;
    background: #f4f4f4;
    aspect-ratio: 730 / 575;
}
.personalizado-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .25s;
}
/* Nombre + flecha roja a la derecha: mismo formato que el título de las
   tarjetas de categoría de la home (.categoria-card-title). */
.personalizado-card > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 1 1 auto;
    /* Mismo formato que las tarjetas de categoría de la home: franja gris muy
       clara pegada a la foto, sin separación. */
    padding: 8px 10px;
    background: #f6f5f4;
    border-radius: 0 0 14px 14px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
}
.personalizado-card > span::after {
    content: "→";
    flex-shrink: 0;
    color: #d9263b;
}
.personalizado-card:hover .personalizado-photo img {
    transform: scale(1.025);
}
.personalizado-card:focus-visible {
    outline: 3px solid #d9263b;
    outline-offset: 5px;
}
@media (max-width: 1060px) {
    .personalizado-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 700px) {
    .personalizado-catalogo {
        padding-top: 26px;
    }
    .personalizado-heading {
        display: block;
        margin-bottom: 20px;
    }
    .personalizado-heading h2 {
        margin-bottom: 5px;
        font-size: 23px;
    }
    .personalizado-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 13px 14px;
    }
    .personalizado-photo {
        border-radius: 10px 10px 0 0;
    }
    .personalizado-card > span {
        border-radius: 0 0 10px 10px;
    }
}

/* Variante para cajas dentro de un .container (páginas de etiquetas): sin el
   bloque .personalizado-catalogo, con aire arriba/abajo y foto recortada
   (object-fit: cover) porque sus imágenes son cuadradas, no 730/575. */
.personalizado-grid--inline {
    margin: 8px 0 40px;
}
.personalizado-photo--cover img {
    object-fit: cover;
}

/* Fechas señaladas (regalos/regalos-originales): las imágenes son cuadradas, así que la
   foto se muestra cuadrada completa (sin recortar) y el nombre debajo hace que la
   tarjeta sea rectangular. */
.personalizado-photo--square {
    aspect-ratio: 1 / 1;
}
.personalizado-photo--square img {
    object-fit: cover;
}

/* Móvil: la cabecera de la categoría (también etiquetas y fechas señaladas) no lleva imagen ni texto, solo el título, que
   sustituye a la imagen. En algunas vistas la fila entera está oculta por el CSS heredado (.header-categoria) y el título
   lleva .no-mobile; aquí se muestran las dos cosas. */
@media (max-width: 767px) {
    .personalizado-top > .row:has(> .cat-h-img) {
        display: block;
        margin-bottom: 14px;
    }
    .personalizado-top > .row:has(> .cat-h-img) > [class*="col-"]:first-child {
        display: block !important;
    }
    .personalizado-top > .row:has(> .cat-h-img) h1 {
        margin: 0;
        color: var(--ro-brand, #d9263b); /* el mismo rojo que en escritorio */
    }
    .personalizado-top > .row:has(> .cat-h-img) p,
    .personalizado-top .cat-h-img {
        display: none;
    }
    /* Frase que va justo antes de los productos en las etiquetas y fechas señaladas ("El mejor regalo para un bautizo:") y título de la rejilla
       de la página de categorías personalizadas ("¿Qué quieres personalizar?" + contador) */
    .ro-subtitulo-listado {
        display: none;
    }
}

/* Cabecera de las páginas con productos (categorías, fechas señaladas, etiquetas, búsquedas por precio): caja redondeada
   con el texto en un panel gris muy claro a la izquierda y la imagen a la derecha, como en la maqueta de tazas
   (.mugs-hero). Es el mismo bloque (.row con texto + .cat-h-img) en todas esas vistas. Desde 768px; en móvil solo se
   muestra el título (bloque anterior). */
@media (min-width: 768px) {
    .personalizado-top > .row:has(> .cat-h-img) {
        display: grid;
        grid-template-columns: .8fr 1.2fr;
        align-items: stretch;
        gap: 0;
        margin: 0 0 30px;
        overflow: hidden;
        background: #faf7f8;
        border-radius: 18px;
    }
    .personalizado-top > .row:has(> .cat-h-img) > [class*="col-"] {
        flex: none;
        width: auto;
        max-width: none;
        padding: 0;
    }
    /* Texto */
    .personalizado-top > .row:has(> .cat-h-img) > [class*="col-"]:first-child {
        display: block !important; /* en algunas vistas lleva no-mobile, que el CSS heredado oculta hasta 991px */
        align-self: center;
        padding: 30px 32px;
    }
    .personalizado-top > .row:has(> .cat-h-img) h1 {
        margin: 0 0 16px;
        font-size: clamp(28px, 2.9vw, 38px);
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -.035em;
        color: var(--ro-brand, #d9263b);
    }
    .personalizado-top > .row:has(> .cat-h-img) p {
        margin: 0;
        font-size: 15px;
        line-height: 1.7;
        color: #645c63;
    }
    /* Imagen: ocupa todo el alto de la caja (hasta 340px) y se recorta si hace falta */
    .personalizado-top > .row:has(> .cat-h-img) > .cat-h-img {
        margin: 0;
    }
    .personalizado-top > .row:has(> .cat-h-img) > .cat-h-img img {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 340px;
        object-fit: cover;
    }
}

/* Tablet (768-991px): el texto largo no cabe en una columna estrecha junto a la imagen, así que se apilan: texto arriba e
   imagen debajo a todo el ancho de la caja (como en la maqueta en pantallas pequeñas). */
@media (min-width: 768px) and (max-width: 991px) {
    .personalizado-top > .row:has(> .cat-h-img) {
        grid-template-columns: minmax(0, 1fr);
    }
    .personalizado-top > .row:has(> .cat-h-img) > [class*="col-"]:first-child {
        padding: 26px 28px 22px;
    }
    .personalizado-top > .row:has(> .cat-h-img) > .cat-h-img img {
        height: auto;
        max-height: none;
    }
}

/* Escritorio (desde 992px): la imagen de la cabecera vuelve a ocupar el ancho que tenía (dos tercios, como el antiguo col-md-8) y
   rellena siempre todo su espacio: la caja mide lo que el mayor de texto e imagen (la imagen, a su proporción natural, marca un mínimo)
   y la imagen se ajusta a ella con object-fit: cover, así nunca queda una franja vacía arriba/abajo cuando el texto es más alto que la
   imagen (solo se recorta un poco si la proporción de la caja difiere de la del banner). Para que el texto de la izquierda quepa en el
   tercio restante se reduce el tamaño de letra del título y del párrafo. */
@media (min-width: 992px) {
    .personalizado-top > .row:has(> .cat-h-img) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
    .personalizado-top > .row:has(> .cat-h-img) > [class*="col-"]:first-child {
        padding: 24px 28px;
    }
    .personalizado-top > .row:has(> .cat-h-img) h1 {
        margin: 0 0 12px;
        font-size: clamp(22px, 2.1vw, 28px);
    }
    .personalizado-top > .row:has(> .cat-h-img) p {
        font-size: 13px;
        line-height: 1.6;
    }
    .personalizado-top > .row:has(> .cat-h-img) > .cat-h-img img {
        display: block;
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: cover;
    }
}