/*
|--------------------------------------------------------------------------
| GVAM - Estilos generales
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Base
|--------------------------------------------------------------------------
*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
}

:root {

    /* Identidad */
    --gvam-color-brand: oklch(48% 0.14 28);
    --gvam-color-accent: oklch(60% 0.16 210);

    /* Texto */
    --gvam-color-text: oklch(28% 0.02 250);
    --gvam-color-text-muted: oklch(50% 0.015 250);

    /* Superficies */
    --gvam-color-surface: oklch(100% 0 0);
    --gvam-color-surface-muted: oklch(96% 0.01 250);

    /* Bordes */
    --gvam-color-border: oklch(88% 0.01 250);
    --gvam-color-border-hover: oklch(70% 0.02 250);

    /* Sombras */
    --gvam-shadow-card:
        0 0.25rem 0.75rem oklch(20% 0.02 250 / 0.10);

}


/*
|--------------------------------------------------------------------------
| Tipografía
|--------------------------------------------------------------------------
*/

h1,
h2,
h3 {
    font-family: 'Libre Baskerville', serif;
    margin-top: 0;
    margin-bottom: 1em;

    color: var(--gvam-color-brand);
}


/*
|--------------------------------------------------------------------------
| Contenedor
|--------------------------------------------------------------------------
*/

.container {
    width: 100%;
    max-width: 1170px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 15px;
    padding-right: 15px;
}


/*
|--------------------------------------------------------------------------
| Cabezal
|--------------------------------------------------------------------------
*/

.gvam__cabezal {
    height: 125px;

    background: var(--gvam-color-brand);
}

h1.gvam__logo {
    height: 105px;

    margin: 0;

    background: url("../logogvam.gif") top left no-repeat;

    text-indent: -9999px;
}

h1.gvam__logo a {
    display: block;

    height: 105px;
}


/*
|--------------------------------------------------------------------------
| Breadcrumb
|--------------------------------------------------------------------------
*/

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5em;

    margin: 0 0 1.5em;
    padding: 0;

    list-style: none;

    font-size: 0.9em;
}

.breadcrumb-item {
    display: inline;
}

.breadcrumb-item a {
    color: var(--gvam-color-text-muted);

    text-decoration: none;
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
    color: var(--gvam-color-brand);

    text-decoration: none;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";

    margin-right: 0.5em;

    color: oklch(65% 0.01 250);
}

.breadcrumb-item.active {
    color: oklch(55% 0.01 250);
}


/*
|--------------------------------------------------------------------------
| Índice general de salones
|--------------------------------------------------------------------------
*/

.gvam_indice-salones {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.gvam-indice__titulo {
    margin-bottom: 1.75rem;

    text-align: center;
}


/*
|--------------------------------------------------------------------------
| Lista de salones
|--------------------------------------------------------------------------
*/

.gvam-home-list {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1rem;

    margin: 0;
    padding: 0;

    list-style: none;
}


/*
|--------------------------------------------------------------------------
| Tarjetas
|--------------------------------------------------------------------------
*/

.gvam-card {
    border: 1px solid var(--gvam-color-border);

    background: var(--gvam-color-surface);

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.gvam-card:hover {
    border-color: var(--gvam-color-border-hover);

    box-shadow: var(--gvam-shadow-card);
}

.gvam-card__titulo {
    color: var(--gvam-color-text);
}

.gvam-card__link:hover .gvam-card__titulo,
.gvam-card__link:focus .gvam-card__titulo {
    color: var(--gvam-color-accent);
}


/*
|--------------------------------------------------------------------------
| Enlace de la tarjeta de salón
|--------------------------------------------------------------------------
*/

.gvam-card__link {
    display: flex;
    align-items: center;

    gap: 1rem;

    min-height: 100px;

    padding: 0.75rem;

    color: var(--gvam-color-text);

    text-decoration: none;
}

.gvam-card__link:hover,
.gvam-card__link:focus {
    color: var(--gvam-color-accent);

    text-decoration: none;
}


/*
|--------------------------------------------------------------------------
| Imagen de la tarjeta de salón
|--------------------------------------------------------------------------
*/

.gvam-card__imagen {
    display: block;

    flex: 0 0 100px;

    width: 100px;
    height: 100px;

    overflow: hidden;

    border-radius: 5px;

    background: var(--gvam-color-surface-muted);
}

.gvam-card__imagen img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/*
|--------------------------------------------------------------------------
| Contenido de la tarjeta de salón
|--------------------------------------------------------------------------
*/

.gvam-card__contenido {
    display: block;

    flex: 1;

    min-width: 0;
}

.gvam-card__titulo {
    display: block;

    color: var(--gvam-color-text);

    font-size: 1rem;
    font-weight: 500;
    line-height: 1.45;
}

.gvam-card__link:hover .gvam-card__titulo,
.gvam-card__link:focus .gvam-card__titulo {
    color: var(--gvam-color-accent);
}


/*
|--------------------------------------------------------------------------
| Índice de obras
|--------------------------------------------------------------------------
*/

.grid-thumbnails {
    display: grid;
    gap: 1rem;
    grid-auto-rows: 22rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    
    margin: 0 0 5em;
    padding: 0;

    list-style: none;
}


/*
|--------------------------------------------------------------------------
| Card de obra
|--------------------------------------------------------------------------
*/

.gvam__thumbnails {
    display: block;

    border: 1px solid var(--gvam-color-border);

    background: var(--gvam-color-surface);

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.gvam__thumbnails:hover {
    border-color: var(--gvam-color-border-hover);

    box-shadow: var(--gvam-shadow-card);
}


/*
|--------------------------------------------------------------------------
| Enlace de la obra
|--------------------------------------------------------------------------
*/

.gvam__thumbnails > .gvam-card__link {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 0;

    height: 100%;

    padding: 0;

    color: var(--gvam-color-text);

    text-decoration: none;
    outline: 3px solid red:
}


/*
|--------------------------------------------------------------------------
| Imagen de la obra
|--------------------------------------------------------------------------
*/

.gvam__thumbnails .gvam-card__imagen {
    display: block;

    flex: none;

    width: 100%;
    height: 220px;

    overflow: hidden;

    border-radius: 0;

    background: var(--gvam-color-surface-muted);
}

.gvam__thumbnails .gvam-card__imagen img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 180ms ease;
}

.gvam__thumbnails:hover .gvam-card__imagen img {
    transform: scale(1.025);
}


/*
|--------------------------------------------------------------------------
| Información de la obra
|--------------------------------------------------------------------------
*/

.gvam__thumbnails .gvam-card__contenido {
    display: flex;
    flex-direction: column;

    gap: 0.25rem;

    flex: 1;

    min-width: 0;

    padding: 1rem;
}


/*
|--------------------------------------------------------------------------
| Título de la obra
|--------------------------------------------------------------------------
*/

.gvam__thumbnails .gvam-card__titulo {
    display: block;

    margin-bottom: 0.25rem;

    color: var(--gvam-color-text);

    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}


/*
|--------------------------------------------------------------------------
| Datos de la obra
|--------------------------------------------------------------------------
*/

.gvam__thumbnails .gvam-card__dato {
    display: block;

    color: var(--gvam-color-text-muted);

    font-size: 0.9rem;
    line-height: 1.4;
}

.gvam__thumbnails:hover .gvam-card__titulo,
.gvam__thumbnails:focus-within .gvam-card__titulo {
    color: var(--gvam-color-accent);
}


/*
|--------------------------------------------------------------------------
| Obra destacada
|--------------------------------------------------------------------------
*/

.gvam__foto-destacada {
    margin-bottom: 3em;
    padding: 2em 0;
    background: var(--gvam-color-surface-muted);
}

.gvam__foto-destacada .foto-gvam img {
    max-width: 100%;
    height: auto;
    display: block;
}

.gvam__obra--titulo {
    color: var(--gvam-color-brand);
}

.gvam__obra--titulo::before {
    content: "";

    padding: 0 1.5em 0 0;

    background: url("../h1.gif") no-repeat;

    color: var(--gvam-color-brand);
}


/*
|--------------------------------------------------------------------------
| Responsive - tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1024px) {

    .container {
        max-width: 970px;
    }

    .grid-thumbnails {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/*
|--------------------------------------------------------------------------
| Responsive - móvil
|--------------------------------------------------------------------------
*/

@media (max-width: 767px) {

    .container {
        max-width: none;
    }

    .gvam-home-list {
        grid-template-columns: 1fr;
    }

    .grid-thumbnails {
        grid-template-columns: 1fr;
    }

}