/* ============================================================
   ARTISTS PAGE — /artists.php
   Propuesta visual "Latin Hands Artists": intro claro, índice
   numerado 01–09 y una ficha por artista (placa + datos +
   trayectoria). Se carga solo en esta página vía $pageCss.
   Usa la paleta y las fuentes del sitio (styles.css :root).
   ============================================================ */

/* ============================================================
   TOKENS
   ============================================================ */

:root {
    /* --- Color --- */
    --artists-ink: var(--sombra);
    --artists-muted: #6f6660; /* propuesta; 5.3:1 sobre --cream */
    --artists-rule: #ddd3c6; /* propuesta; filete neutro entre fichas */
    --artists-accent: #a94f3b; /* terracota de la propuesta (#C0604A) oscurecida para 4.5:1 en texto chico */
    --artists-mauve: #9b7ea6; /* propuesta; único tono de placa sin equivalente en la paleta del sitio */
    --artists-plate-ink: var(--cream);
    --artists-photo-scrim: rgb(20 16 14 / 0.72); /* fondo del pie sobre foto; ≥7:1 con --cream sobre cualquier foto */

    /* --- Fonts --- */
    --artists-serif: 'Playfair Display', serif;
    --artists-sans: 'DM Sans', sans-serif;

    /* --- Type scale --- */
    --artists-text-label: 0.6875rem;
    --artists-text-small: 0.875rem;
    --artists-text-body: 1rem;
    --artists-text-index: 1.0625rem;
    --artists-text-h1: clamp(2rem, 1rem + 6vw, 4.2rem); /* mínimo 2rem: "latinoamericanas" (es) cabe en 320px */
    --artists-text-h2: clamp(1.9rem, 4vw, 2.6rem);
    --artists-text-stat: 2.4rem;
    --artists-text-initials: clamp(4rem, 11vw, 7.5rem);

    /* --- Spacing: micro / meso / macro --- */
    --artists-space-2xs: 0.25rem;
    --artists-space-xs: 0.5rem;
    --artists-space-sm: 0.75rem;
    --artists-space-md: 1.25rem;
    --artists-space-lg: 2rem;
    --artists-space-xl: 2.75rem;
    --artists-space-2xl: 3.5rem;
    --artists-gutter: 3rem; /* = 48px del padding lateral del resto del sitio */

    /* --- Layout --- */
    --artists-max: 67.5rem; /* 1080px, ancho de la propuesta */
    --artists-nav-offset: 5rem; /* nav fijo de 64px + aire, para los saltos del índice */
}

/* ============================================================
   INTRO
   ============================================================ */

.artists-intro {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--artists-space-xl);
    align-items: end;
    max-width: var(--artists-max);
    margin-inline: auto;
    padding: var(--artists-space-2xl) 0 var(--artists-space-xl);
}

.artists-intro .section-eyebrow {
    margin-bottom: var(--artists-space-sm);
    font-size: var(--artists-text-label);
    color: var(--artists-accent);
}

.artists-intro h1 {
    font-family: var(--artists-serif);
    font-size: var(--artists-text-h1);
    font-weight: 400;
    line-height: 1.05;
    color: var(--artists-ink);
    text-wrap: balance;
}

.artists-intro h1 em {
    color: var(--artists-accent);
}

/* Intencional — el intro tiene un solo <p> directo (el lead). */
.artists-intro > p {
    max-width: 44ch;
    font-size: var(--artists-text-body);
    line-height: 1.7;
    color: var(--artists-muted);
}

/* ============================================================
   ROSTER
   ============================================================ */

.artists-roster {
    max-width: var(--artists-max);
    margin-inline: auto;
    padding-bottom: var(--artists-space-2xl);
}

/* --- Índice 01–09 ---
   styles.css estiliza el <nav> desnudo (fixed, fondo oscuro, padding) para el
   menú principal, y body.has-solid-nav nav le vuelve a poner fondo. Esta regla
   necesita especificidad (0,2,1) para ganarle a ambas sin !important. */
.artists-roster nav.artists-index {
    display: block;
    position: static;
    margin-bottom: var(--artists-space-xl);
    padding: var(--artists-space-md) 0;
    border-block: 1px solid var(--artists-rule);
    background: none;
    transition: none;
}

.artists-index ol {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--artists-space-md); /* sin row-gap: el aire entre renglones lo da el padding de cada enlace */
    list-style: none;
}

/* Área táctil: el padding lleva el enlace de ~22px a ~30px de alto
   (mínimo WCAG 2.2: 24px) sin que cambie cómo se ve el índice. */
.artists-index a {
    display: inline-block;
    padding-block: var(--artists-space-2xs);
    font-family: var(--artists-serif);
    font-size: var(--artists-text-index);
    color: var(--artists-ink);
    text-decoration: none;
    transition: color 0.15s;
}

.artists-index a:hover {
    color: var(--artists-accent);
}

.artists-index span {
    margin-right: var(--artists-space-2xs);
    font-family: var(--artists-sans);
    font-size: var(--artists-text-label);
    font-variant-numeric: tabular-nums;
    color: var(--artists-muted);
}

/* ============================================================
   ARTIST SHEET
   ============================================================ */

.artist-sheet {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--artists-space-xl);
    padding-block: var(--artists-space-xl);
    border-bottom: 1px solid var(--artists-rule);
    scroll-margin-top: var(--artists-nav-offset);
}

.artist-sheet a:focus-visible {
    outline: 2px solid var(--artists-accent);
    outline-offset: 3px;
}

/* --- Placa --- */
.artist-plate {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    aspect-ratio: 4 / 3;
    align-self: start;
    padding: var(--artists-space-md);
    background: var(--artists-plate-bg);
    color: var(--artists-plate-ink);
    overflow: hidden;
}

.artist-plate--sombra  { --artists-plate-bg: var(--sombra); }
.artist-plate--mauve   { --artists-plate-bg: var(--artists-mauve); }
.artist-plate--archivo { --artists-plate-bg: var(--archivo); }
.artist-plate--tierra  { --artists-plate-bg: var(--tierra); }
.artist-plate--oro     { --artists-plate-bg: var(--oro); }
.artist-plate--verde   { --artists-plate-bg: var(--verde); }

/* Filete interior de la placa (marco de lámina). */
.artist-plate::after {
    position: absolute;
    inset: 0.875rem; /* 14px de la propuesta: el marco queda dentro del padding */
    border: 1px solid currentColor;
    opacity: 0.28;
    content: "";
    pointer-events: none;
}

.artist-plate img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.artist-plate-caption,
.artist-plate-initials {
    position: relative;
}

.artist-plate-caption {
    font-family: var(--artists-sans);
    font-size: var(--artists-text-label);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Sobre foto el pie va en una etiqueta sólida: un degradado no basta cuando
   la esquina de la foto es clara (ej. Triana Parera). */
.artist-plate.has-photo .artist-plate-caption {
    align-self: flex-start;
    padding: var(--artists-space-2xs) var(--artists-space-xs);
    background: var(--artists-photo-scrim);
}

.artist-plate-initials {
    align-self: flex-end;
    font-family: var(--artists-serif);
    font-size: var(--artists-text-initials);
    font-style: italic;
    line-height: 0.8;
    opacity: 0.95;
}

/* --- Encabezado --- */
.artist-sheet-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--artists-space-sm);
    margin-bottom: var(--artists-space-xs);
}

.artist-sheet-head h2 {
    font-family: var(--artists-serif);
    font-size: var(--artists-text-h2);
    font-weight: 400;
    line-height: 1.05;
    color: var(--artists-ink);
    text-wrap: balance;
}

.artist-handle {
    font-size: var(--artists-text-small);
    color: var(--artists-muted);
    text-decoration: none;
    transition: color 0.15s;
}

.artist-handle:hover {
    color: var(--artists-accent);
}

.artist-lede {
    max-width: 60ch;
    margin: var(--artists-space-xs) 0 var(--artists-space-md);
    font-size: var(--artists-text-body);
    line-height: 1.7;
    color: var(--artists-ink);
}

/* --- Cifras (solo algunas fichas) --- */
.artist-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--artists-space-lg);
    margin-bottom: var(--artists-space-md);
    list-style: none;
}

.artist-stats strong {
    display: block;
    font-family: var(--artists-serif);
    font-size: var(--artists-text-stat);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--artists-ink);
}

.artist-stats span {
    font-size: var(--artists-text-label);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--artists-muted);
}

/* --- Datos --- */
.artist-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--artists-space-xs) var(--artists-space-lg);
    margin-bottom: var(--artists-space-lg);
    font-size: var(--artists-text-small);
    line-height: 1.6;
}

.artist-facts dt {
    font-weight: 500;
    color: var(--artists-ink);
}

.artist-facts dd {
    color: var(--artists-ink);
}

/* --- Trayectoria --- */
.artist-hl-title {
    margin-bottom: var(--artists-space-2xs);
    padding-bottom: var(--artists-space-xs);
    border-bottom: 1px solid var(--artists-ink);
    font-family: var(--artists-sans);
    font-size: var(--artists-text-label);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--artists-muted);
}

.artist-hl {
    list-style: none;
}

.artist-hl li {
    display: grid;
    grid-template-columns: 4.2rem 1fr auto; /* ancho fijo para que los años alineen en columna */
    gap: var(--artists-space-sm);
    align-items: baseline;
    padding: var(--artists-space-sm) 0;
    border-bottom: 1px solid var(--artists-rule);
    font-size: var(--artists-text-small);
    line-height: 1.6;
}

.artist-hl-key {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--artists-accent);
}

.artist-hl-kind {
    font-size: var(--artists-text-label);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--artists-muted);
}

.artist-pending {
    padding: var(--artists-space-sm) 0;
    border-bottom: 1px solid var(--artists-rule);
    font-size: var(--artists-text-small);
    font-style: italic;
    color: var(--artists-muted);
}

/* padding-block: área táctil ~30px (el texto solo mide ~20px). */
.artist-sheet-link {
    display: inline-block;
    margin-top: var(--artists-space-sm);
    padding-block: var(--artists-space-2xs);
    font-size: var(--artists-text-label);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--artists-accent);
    text-decoration: none;
    transition: color 0.15s;
}

.artist-sheet-link:hover {
    color: var(--artists-ink);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .artists-index a,
    .artist-handle,
    .artist-sheet-link {
        transition: none;
    }
}

/* ============================================================
   MOBILE
   ============================================================ */

/* --- Gutter: mismo breakpoint que el resto del sitio --- */
@media (max-width: 900px) {
    :root {
        --artists-gutter: 1.5rem; /* = 24px del sitio en móvil */
    }
}

/* --- Ancho completo con gutter lateral --- */
@media (max-width: 1176px) { /* 1080px de contenido + 2 × 48px de gutter */
    .artists-intro,
    .artists-roster {
        margin-inline: var(--artists-gutter);
    }
}

/* --- Una columna --- */
@media (max-width: 760px) {
    .artists-intro {
        grid-template-columns: 1fr;
        gap: var(--artists-space-md);
        padding: var(--artists-space-xl) 0 var(--artists-space-lg);
    }

    .artist-sheet {
        grid-template-columns: 1fr;
        gap: var(--artists-space-md);
        padding-block: var(--artists-space-lg);
    }

    .artist-hl li {
        grid-template-columns: 3.4rem 1fr;
    }

    .artist-hl-kind {
        grid-column: 2;
    }

    .artist-facts {
        gap: var(--artists-space-2xs) var(--artists-space-md);
    }
}