/* ==========================================================================
   Reference – portfolio realizací (hlavní realizace + asymetrická mřížka)
   ========================================================================== */

.projects-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.25rem, 1.5rem + 2.5vw, 4rem) clamp(1rem, 0.5rem + 1.5vw, 2rem);
}

@media (min-width: 640px) {
    .projects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .projects-grid > .project-card--featured,
    .projects-grid > .state {
        grid-column: 1 / -1;
    }
}

/* Desktop: 6 sloupců, řádky 2 velké (3+3) a 3 menší (2+2+2) – šířku určuje reference.js */
@media (min-width: 1000px) {
    .projects-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .projects-grid > .project-card { grid-column: span 2; }
    .projects-grid > .project-card[data-span='3'] { grid-column: span 3; }
    .projects-grid > .project-card[data-span='6'] { grid-column: 1 / -1; }
    .projects-grid > .project-card--featured { grid-column: 1 / -1; }
}

.project-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.project-card__media {
    position: relative;
    display: block;
    width: 100%;
    border-radius: var(--r-md);
    overflow: hidden;
}

.project-card__media .media {
    --ratio: 4 / 3;
    border-radius: 0;
}

.project-card[data-span='3'] .project-card__media .media {
    --ratio: 16 / 10;
}

.project-card__media img {
    transition: transform var(--t-slow), opacity 500ms var(--ease);
}

.project-card:hover .project-card__media img {
    transform: scale(1.05);
}

/* Ikona „zvětšit“ při najetí */
.project-card__media::after {
    content: '\f065';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: var(--sp-4);
    top: var(--sp-4);
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(12, 15, 18, 0.6);
    color: #fff;
    font-size: 0.8rem;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity var(--t), transform var(--t);
}

.project-card:hover .project-card__media::after,
.project-card__media:focus-visible::after {
    opacity: 1;
    transform: none;
}

.project-card__count {
    position: absolute;
    left: var(--sp-4);
    bottom: var(--sp-4);
}

.project-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top: var(--sp-5);
}

.project-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-ink);
}

.project-card__meta span + span::before {
    content: '·';
    margin-right: var(--sp-3);
    color: var(--line-strong);
}

.project-card h3 {
    margin-top: var(--sp-2);
    font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
    letter-spacing: -0.025em;
}

.project-card[data-span='3'] h3 {
    font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
}

.project-card h3 button {
    text-align: left;
    transition: color var(--t-fast);
}

.project-card:hover h3 button {
    color: var(--accent-ink);
}

.project-card__build {
    margin-top: 2px;
    font-weight: 500;
    color: var(--ink-2);
}

.project-card__facts {
    margin-top: var(--sp-1);
    font-size: var(--fs-sm);
    color: var(--muted);
}

.project-card .tag-list {
    margin-top: var(--sp-5);
}

.tag--more {
    background: var(--surface-2);
    border-color: transparent;
    font-weight: 600;
}

.project-card__link {
    margin-top: var(--sp-4);
    align-self: flex-start;
}

.project-card__link i {
    transition: transform var(--t);
}

.project-card:hover .project-card__link i {
    transform: translateX(3px);
}

/* Hlavní realizace – velká fotografie + informace vedle */
.project-card--featured .project-card__media .media {
    --ratio: 16 / 10;
}

.project-card--featured h3 {
    font-size: clamp(2rem, 1.2rem + 2.8vw, 3.75rem);
    font-stretch: var(--wider);
    letter-spacing: -0.035em;
    line-height: 1;
}

.project-card--featured .project-card__build {
    margin-top: var(--sp-3);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--accent-ink);
}

.project-card--featured .project-card__link {
    margin-top: var(--sp-6);
}

@media (min-width: 1000px) {
    .project-card--featured {
        display: grid;
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
        gap: clamp(2rem, 1rem + 2.5vw, 4rem);
        align-items: center;
        padding-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 4rem);
        border-bottom: 1px solid var(--line);
    }

    .project-card--featured .project-card__body {
        padding-top: 0;
    }
}

.load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
    margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
    padding-top: var(--sp-8);
    border-top: 1px solid var(--line);
}

.load-more[hidden] {
    display: none;
}

.load-more__count {
    font-size: var(--fs-sm);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

#projectFilters {
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}