/* Archive de semilleros — diseño en Figma "Arthum Planeación", nodo 5378-4373.
   Se encola solo en is_post_type_archive('semilleros') (functions.php).
   Primera versión: lista de 12 columnas (3 c/u) con nombre, imagen que
   aparece al hover/focus, temas y departamento(s) académico(s). */

main.semilleros-archive {
    margin-left: var(--min-side-margin);
    margin-right: var(--min-side-margin);
    padding-bottom: calc(var(--top-margin) * 4);
}

/* Mismo patrón que .grupos-title-text (css/grupos-artisticos.css): título
   cursivo enorme, centrado, escalando con el viewport en vez de un tamaño
   fijo. Acá va estático en el flujo (sin position:fixed) porque no hay
   ningún slide/scroll que deba perseguir. */
.semilleros-title-text {
    font-family: var(--arthum-ff-palast);
    font-variation-settings: 'opsz' 10;
    font-weight: var(--arthum-fw-thin);
    font-style: italic;
    color: var(--arthum-black);
    line-height: 1em;
    font-size: 13vw;
    text-align: center;
    margin: calc(var(--top-margin) * 6) auto calc(var(--top-margin) * 6);
}

.semilleros-list {
    display: flex;
    flex-direction: column;
    /* Gap entre semilleros — valor fijo del diseño (Figma), no un múltiplo
       de --top-margin. */
    gap: 40px;
    /* Containing block de .semillero-hover-image (más abajo): la imagen
       flota en cualquier punto vertical de TODA la lista, no solo de la
       fila sobre la que está el cursor. */
    position: relative;
}

.semillero-row,.semillero-row-header{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: top;
    column-gap: var(--top-margin);
    color: var(--arthum-black);
    
}

.semillero-row{
    height: 5em;    
}

.semillero-row-header {
    height: 4.5em;
}

.semillero-row-name,
.semillero-row-topics,
.semillero-row-department {
    font-family: var(--arthum-ff-area);
    font-size: var(--fz-27pt);
    line-height: 1.3;
    color: inherit;
    transition: color 0.2s ease;
    font-weight: var(--arthum-fw-semibold);
}

.header-name,
.header-topics,
.header-department {
    font-family: var(--arthum-ff-palast);
    font-size: var(--fz-30pt);
    line-height: 1.3;
    color: inherit;
    font-style: italic;
    transition: color 0.2s ease;
    font-weight: var(--arthum-fw-light);
}

.semillero-row-name,
.header-name {
    grid-column: 1 / span 3;
    
}

.semillero-row-name{
    font-weight: 700;
}

.semillero-row-topics,
.header-topics {
    grid-column: 7 / span 3;
    
}

.semillero-row-department,
.header-department {
    grid-column: 10 / span 3;
    text-align: right;
}


/* Elemento único y compartido (no uno por fila): js/semilleros-archive.js
   le cambia la imagen y el "top" a un valor aleatorio dentro del alto de
   .semilleros-list en cada hover/focus — reaparece en un punto distinto de
   la columna cada vez que el cursor pasa por encima. Horizontalmente
   queda fija en la misma columna reservada (4/12 a 7/12, ver .semillero-row). */
/* Sin aspect-ratio fijo ni overflow:hidden: el alto lo da la proporción
   real de cada imagen (ver img de abajo), nunca se recorta. */
.semillero-hover-image {
    position: absolute;
    left: 25%;
    width: 25%;
    top: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, top 0.2s ease;
    display: flex;
    justify-content: end;
}

.semillero-hover-image.is-visible {
    opacity: 1;
}

.semillero-hover-image img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 400px;
}

.semillero-row:hover,
.semillero-row:focus-visible {
    color: var(--arthum-orange);
}

.semilleros-empty {
    font-family: var(--arthum-ff-area);
    font-size: var(--fz-20pt);
    text-align: center;
    padding: calc(var(--top-margin) * 4) 0;
}

/* -------------------- RESPONSIVE -------------------- */
/* Mismo breakpoint que single-gruposartisticos.css (900px): en mobile solo
   quedan nombre y temas, sin imagen ni departamento. */

@media (max-width: 1200px){
    .semillero-row {
        height: 7em;
    }

    .semilleros-list {
        display: flex;
        flex-direction: column;
        gap: 0px;
        position: relative;
    }
}


@media (max-width: 900px) {

    .semillero-list {
        padding-bottom: 0;
        gap: 20px;
    }

    .semillero-row{
        grid-template-columns: 1fr 1fr;
        column-gap: var(--top-margin);
        height: 8em;
    }

    .semillero-row-header{
        grid-template-columns: 1fr 1fr;
        column-gap: var(--top-margin);
        height: 5em;
    }

    .semillero-row-name,
    .header-name {
        grid-column: 1;
    }

    .semillero-row-topics,
    .header-topics {
        grid-column: 2;
        text-align: left;
    }

    .semillero-hover-image,
    .semillero-row-department,
    .header-department {
        display: none;
    }
}

@media (max-width: 768px) {
  .semillero-row-name,
  .semillero-row-topics {
    font-size: var(--fz-22pt);
  }
}