/* llepo.photos — web pública
   Tema oscuro: gris grafito frío, texto claro y azul de pista como acento. */
:root {
    color-scheme: dark;
    --bg: #202428;
    --ink: #e9ecee;
    --muted: #9aa4ad;
    --line: #3a4148;
    --accent: #6fa3e8;
    --tile: #2c3237;
    --raised: #2c3237;
    --condensed: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
    --body: "Barlow", "Helvetica Neue", Arial, sans-serif;
    --gutter: clamp(1rem, 3.5vw, 2.5rem);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 400 1rem/1.5 var(--body);
}

a { color: inherit; }
img { display: block; max-width: 100%; }

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Cabecera ---------- */

.site-head {
    background: var(--bg);
    color: var(--ink);
    --head-muted: var(--muted);
    --head-line: var(--line);
    --head-accent: var(--accent);
}

.head-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(1.5rem, 3.5vw, 2.75rem) var(--gutter) 0;
}

.brand {
    grid-column: 1;
    justify-self: start;
    display: block;
    color: #fff;
    text-decoration: none;
}

.logo {
    height: clamp(2.6rem, 6.5vw, 5.25rem);
    width: auto;
    max-width: 100%;
}

.wordmark {
    display: block;
    font: 700 clamp(3rem, 11vw, 8.5rem)/0.95 var(--condensed);
    letter-spacing: -0.02em;
}


.menu-toggle { display: none; }

.menu {
    grid-column: 1 / -1;
    margin-top: 1.5rem;
    border-top: 1px solid var(--head-line);
}

.menu > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu li { position: relative; }

.menu a {
    display: block;
    padding: 0.75rem 0;
    font: 600 1.2rem/1.2 var(--condensed);
    text-decoration: none;
}

.menu > ul > li > a { border-bottom: 3px solid transparent; }
.menu > ul > li > a:hover { border-bottom-color: var(--head-line); }
.menu > ul > li > a[aria-current="page"],
.menu > ul > li.is-active > a { border-bottom-color: var(--head-accent); }

.menu .has-sub > a::after {
    content: "";
    display: inline-block;
    width: 0.4em; height: 0.4em;
    margin-left: 0.4em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.2em) rotate(45deg);
}

.menu .sub {
    position: absolute;
    top: 100%;
    left: -1rem;
    z-index: 10;
    min-width: 14rem;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    background: var(--raised);
    color: var(--ink);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    display: none;
}

.menu .has-sub:hover > .sub,
.menu .has-sub:focus-within > .sub { display: block; }

.menu .sub a {
    padding: 0.45rem 1rem 0.45rem calc(1rem + var(--depth, 0) * 1rem);
    font-weight: 500;
    font-size: 1.1rem;
}
.menu .sub a:hover { background: var(--line); }
.menu .sub a[aria-current="page"] { color: var(--accent); }

.site-head :focus-visible { outline-color: var(--head-accent); }

/* ---------- Contenido ---------- */

.site-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(1.5rem, 3.5vw, 2.75rem) var(--gutter) 3rem;
}

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1rem;
    margin-bottom: 1.75rem;
}

.crumbs {
    flex-basis: 100%;
    margin: 0;
    color: var(--muted);
    font: 500 1.1rem/1.2 var(--condensed);
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.section-head {
    --title-size: clamp(2.2rem, 5vw, 3.5rem);
}

.section-head h1 {
    margin: 0;
    font: 700 var(--title-size)/1 var(--condensed);
    letter-spacing: -0.01em;
}

/* Escudo o imagen de la categoría: a la derecha del nombre, con la altura
   de sus mayúsculas; apoyado en la línea base del texto. */
.cat-img {
    align-self: baseline;
    height: calc(var(--title-size) * 0.72);
    width: auto;
    max-width: calc(var(--title-size) * 2.5);
    object-fit: contain;
}

.count { margin: 0; color: var(--muted); }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 2.25rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.album {
    display: block;
    text-decoration: none;
}

/* Hueco de portada horizontal 4:3 (debe coincidir con COVER_FRAME_RATIO).
   La foto nunca se recorta: las que no son 3:2 se ven enteras. */
.album .frame {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--tile);
}

.album .photo {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Relleno de los laterales: la misma foto, ampliada, desenfocada y oscurecida. */
.album .backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(22px) brightness(0.45) saturate(1.1);
    transform: scale(1.2);
}

.album time {
    display: block;
    margin-top: 0.7rem;
    color: var(--muted);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.album h2 {
    margin: 0.15rem 0 0;
    font: 600 1.3rem/1.15 var(--condensed);
    max-width: 40ch;
}

.album-photo { display: block; }
.album-cap { color: inherit; text-decoration: none; }

.album-cap:hover h2 {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.empty {
    max-width: 50ch;
    padding: 3rem 0;
    color: var(--muted);
    font-size: 1.1rem;
}

.pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
}
.pager a {
    color: var(--ink);
    font: 600 1.15rem/1 var(--condensed);
}

.site-foot {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem var(--gutter) 2.5rem;
    color: var(--muted);
    font-size: 0.9rem;
}

/* ---------- Móvil ---------- */

@media (max-width: 760px) {
    .head-inner { padding-top: 1.1rem; padding-bottom: 1rem; }
    .logo { height: 2.3rem; }

    .menu-toggle {
        display: block;
        grid-column: 2;
        grid-row: 1;
        padding: 0.5rem 0.9rem;
        border: 2px solid #fff;
        background: transparent;
        color: #fff;
        font: 600 1.05rem/1 var(--condensed);
        cursor: pointer;
    }
    .menu-toggle[aria-expanded="true"] { background: #fff; color: var(--bg); }

    .menu { margin-top: 1rem; }
    .menu > ul { display: block; }
    .menu > ul > li { border-bottom: 1px solid var(--head-line); }
    .menu > ul > li > a { border-bottom: 0; }
    .menu > ul > li.is-active > a,
    .menu > ul > li > a[aria-current="page"] { color: var(--head-accent); }

    .menu .sub {
        position: static;
        display: block;
        padding: 0 0 0.6rem;
        background: none;
        color: #fff;
        box-shadow: none;
    }
    .menu .sub a { padding: 0.35rem 0 0.35rem calc(1rem + var(--depth, 0) * 1rem); }
    .menu .sub a:hover { background: none; text-decoration: underline; }
    .menu .sub a[aria-current="page"] { background: none; color: var(--head-accent); }
    .menu .has-sub > a::after { display: none; }

    /* Móvil: una sola columna, portada a todo el ancho. */
    .grid {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }
}

/* ---------- Buscador ---------- */

.menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 2rem;
}

.search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
}

.search input {
    width: 13rem;
    padding: 0.35rem 0;
    border: 0;
    border-bottom: 2px solid var(--head-line);
    background: transparent;
    color: #fff;
    font: 500 1.1rem/1.2 var(--condensed);
}
.search input::placeholder { color: var(--head-muted); }
.search input:focus { outline: none; border-bottom-color: var(--head-accent); }
.search input:focus-visible { outline: none; }

.search button {
    padding: 0.4rem 0.8rem;
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
    font: 600 1rem/1 var(--condensed);
    cursor: pointer;
}
.search button:hover { background: #fff; color: var(--bg); }

.empty a { color: var(--accent); }

@media (max-width: 760px) {
    .menu { display: none; }
    .menu.is-open { display: block; }
    .search { padding: 1rem 0 0.5rem; }
    .search input { flex: 1; width: auto; }
}

/* ---------- Portfolio: mosaico al estilo Autofocus (vista de prueba) ----------
   Rejilla de 6 columnas. Cada fila mide lo justo para que una pieza de
   3 columnas sea 4:3. Las piezas siguen un patrón que se repite cada 6:
   ancha + estrecha, estrecha + ancha, mitad + mitad. */

.mosaic {
    --gap: 6px;
    container-type: inline-size;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: calc(18.75cqi - var(--gap) / 2);
    grid-auto-flow: dense;
    gap: var(--gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mosaic > li { grid-row: span 2; }
.mosaic > li:nth-child(6n + 1),
.mosaic > li:nth-child(6n + 4) { grid-column: span 4; }
.mosaic > li:nth-child(6n + 2),
.mosaic > li:nth-child(6n + 3) { grid-column: span 2; }
.mosaic > li:nth-child(6n + 5),
.mosaic > li:nth-child(6n + 6) { grid-column: span 3; }

.tile {
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden;
    background: var(--tile);
    color: #fff;
    text-decoration: none;
}

.tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.3s ease;
}

/* Título y fecha: aparecen al pasar el ratón, sobre un degradado. */
.cap {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2.5rem 1rem 0.9rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.cap time {
    display: block;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}
.cap-title {
    display: block;
    font: 600 1.25rem/1.15 var(--condensed);
}

.tile:hover img,
.tile:focus-visible img { transform: scale(1.03); filter: brightness(0.9); }
.tile:hover .cap,
.tile:focus-visible .cap { opacity: 1; transform: none; }
.tile:focus-visible { outline-offset: -3px; }

/* En pantallas táctiles no hay "pasar el ratón": el pie se ve siempre. */
@media (hover: none) {
    .cap { opacity: 1; transform: none; padding-top: 2rem; }
}

@media (max-width: 760px) {
    /* Móvil: una pieza a todo el ancho y dos a medias, alternando. */
    .mosaic {
        --gap: 4px;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: calc(37.5cqi - var(--gap) / 2);
    }
    .mosaic > li,
    .mosaic > li:nth-child(n) { grid-column: span 1; grid-row: span 1; }
    .mosaic > li:nth-child(3n + 1) { grid-column: span 2; grid-row: span 2; }
    .cap { padding: 1.5rem 0.7rem 0.6rem; }
    .mosaic > li:not(:nth-child(3n + 1)) .cap time { display: none; }
    .mosaic > li:not(:nth-child(3n + 1)) .cap-title {
        font-size: 1rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tile img, .cap { transition: none; }
}

/* ---------- Fecha y título sobre la portada (opción titulos_sobre_foto) ---------- */

.album-cap { display: block; }

.captions-over .album { position: relative; }

/* El degradado va sobre la foto; el enlace de fecha y título es solo la franja de texto. */
.captions-over .frame::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 62%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0));
    pointer-events: none;
}

.captions-over .album-cap {
    position: absolute;
    inset: auto 0 0 0;
    padding: 0.5rem 1rem 0.9rem;
    color: #fff;
}

.captions-over .album time {
    margin-top: 0;
    color: rgba(255, 255, 255, 0.78);
}

.captions-over .album h2 {
    margin-top: 0.1rem;
    font-size: 1.35rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.album .photo { transition: filter 0.25s ease; }
.album-photo:hover .photo,
.album-photo:focus-visible .photo { filter: brightness(1.08); }
.album-photo:focus-visible { outline-offset: -3px; }

/* Etiqueta «Galería ↗»: indica que la foto abre Google Photos. */
.gal-badge {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 1;
    padding: 0.3rem 0.6rem;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font: 600 0.95rem/1 var(--condensed);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.album-photo:hover .gal-badge,
.album-photo:focus-visible .gal-badge,
.album-hero:hover .gal-badge,
.album-hero:focus-visible .gal-badge { opacity: 1; }
@media (hover: none) {
    .gal-badge { opacity: 0.85; font-size: 0.85rem; }
}

.captions-over { row-gap: 1.5rem; }

@media (max-width: 760px) {
    .captions-over .album h2 { font-size: 1.25rem; }
    .captions-over { row-gap: 1rem; }
}

/* Títulos largos (equipos con todos sus patrocinadores): letra algo menor
   y como mucho dos líneas; el título completo sale al dejar el ratón encima. */
.captions-over .album h2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.captions-over .album.is-long h2 { font-size: 1.15rem; line-height: 1.12; }
@media (max-width: 760px) {
    .captions-over .album.is-long h2 { font-size: 1.1rem; }
}

/* Con los títulos sobre la foto, las portadas van casi juntas, con la misma
   separación fina que el portfolio. Las columnas se reparten el ancho, así
   que al reducir el hueco las fotos crecen y siguen llegando a los bordes. */
.grid.captions-over { gap: 6px; }
@media (max-width: 760px) {
    .grid.captions-over { gap: 6px; }
}


/* ---------- Página de álbum ---------- */

.album-head { margin-bottom: 1.25rem; }
.album-head .crumbs { margin-bottom: 0.4rem; }
.album-head h1 {
    margin: 0;
    max-width: 32ch;
    font: 700 clamp(2rem, 4.5vw, 3.2rem)/1.02 var(--condensed);
    letter-spacing: -0.01em;
}
.album-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.8rem;
    margin: 0.7rem 0 0;
    color: var(--muted);
}
.album-meta .tag {
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font: 500 1rem/1.3 var(--condensed);
    text-decoration: none;
}
.album-meta .tag:hover { border-color: var(--accent); color: var(--accent); }

.album-hero {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
}
.album-hero img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 80vh;
}

.album-cta { margin: 1.25rem 0 0; }
.btn-gallery {
    display: inline-block;
    padding: 0.75rem 1.2rem;
    background: var(--accent);
    color: #0f1418;
    font: 600 1.2rem/1 var(--condensed);
    text-decoration: none;
}
.btn-gallery:hover { filter: brightness(1.1); }

.preview-note {
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    border-left: 4px solid #e0b04a;
    background: var(--tile);
}

.related { margin-top: 3rem; }
.related-title {
    margin: 0 0 1rem;
    font: 700 1.8rem/1.1 var(--condensed);
}
.related-title a { color: inherit; }

@media (max-width: 760px) {
    .btn-gallery { display: block; text-align: center; }
}