/* ==========================================================================
   Page: downloads  (site/downloads/index + the About page's section)
   --------------------------------------------------------------------------
   .dl-grid   responsive card grid
   .dl-card   cover "window" (rounded, accent ring on hover, file-type pill)
              · title · description · Download / View buttons · size
   ========================================================================== */

.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-6); }

.dl-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--card);
    overflow: hidden;
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.dl-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -44px rgb(0 0 0 / 0.55); }

.dl-card__cover {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    margin: var(--space-3) var(--space-3) 0;
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--accent) 22%, #fff);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--line);
}
.dl-card__cover img { width: 100%; height: 100%; object-fit: contain; background: #fff; transition: transform 0.6s var(--ease-out); }
.dl-card:hover .dl-card__cover img { transform: scale(1.04); }
.dl-card__tile { display: grid; place-content: center; justify-items: center; gap: var(--space-2); height: 100%; color: var(--ink-soft); font-weight: 600; }
.dl-card__tile .icon { width: 48px; height: 48px; stroke-width: 1.2; }
.dl-card__type {
    position: absolute; inset-block-start: var(--space-3); inset-inline-start: var(--space-3);
    padding: 0.2em 0.8em;
    border-radius: var(--r-pill);
    background: rgb(255 255 255 / 0.92);
    box-shadow: 0 0 0 1.5px var(--accent);
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em;
}

.dl-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-6) var(--space-6); }
.dl-card__title { font-size: var(--fs-xl); line-height: 1.5; }
.dl-card__text { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.85; }
.dl-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-4); }
.dl-card__size { margin-inline-start: auto; color: var(--ink-faint); font-size: var(--fs-xs); }
.dl-empty { padding: var(--space-10); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); color: var(--ink-soft); text-align: center; }

/* ── /downloads: one "document" row per file ─────────────────────────────── */
.dl-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: var(--space-12);
    padding-block: var(--space-12);
    border-bottom: 1px solid var(--line);
}
.dl-row:first-child { padding-top: 0; }
.dl-row:last-child { border-bottom: 0; padding-bottom: 0; }
.dl-row--flip .dl-doc { order: 2; }

/* The document: cover on a stack of sheets, inside the logo's ring lines */
.dl-doc { position: relative; display: grid; place-items: center; aspect-ratio: 5 / 4; isolation: isolate; }
.dl-doc__rings {
    position: absolute; z-index: -2;
    width: 78%; aspect-ratio: 1;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 20%, var(--paper));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
        0 0 0 16px var(--paper), 0 0 0 17px color-mix(in srgb, var(--accent) 40%, transparent),
        0 0 0 32px var(--paper), 0 0 0 33px color-mix(in srgb, var(--accent) 28%, transparent);
    transition: transform 0.8s var(--ease-out);
}
.dl-doc__dot {
    position: absolute; z-index: 2; inset-block-start: 6%; inset-inline-end: 12%;
    width: 22px; height: 22px; border-radius: 50%;
    border: 3px solid var(--accent); background: var(--paper);
}
.dl-doc__page, .dl-doc__sheet {
    grid-area: 1 / 1;
    width: 76%; aspect-ratio: 16 / 10;
    border-radius: 12px;
    background: #fff;
}
.dl-doc__sheet { z-index: -1; box-shadow: 0 0 0 1px var(--line), 0 18px 40px -30px rgb(0 0 0 / 0.5); transition: transform 0.6s var(--ease-out); }
.dl-doc__sheet--3 { transform: rotate(-7deg) translate(-4%, 3%); }
.dl-doc__sheet--2 { transform: rotate(-3.5deg) translate(-2%, 1.5%); }
.dl-doc__page {
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--line), 0 30px 60px -34px rgb(0 0 0 / 0.55);
    transition: transform 0.6s var(--ease-out);
}
.dl-doc__page img { width: 100%; height: 100%; object-fit: contain; background: #fff; }   /* whole cover, never cropped */
.dl-doc:hover .dl-doc__page { transform: translateY(-6px) rotate(1deg); }
.dl-doc:hover .dl-doc__sheet--3 { transform: rotate(-10deg) translate(-7%, 4%); }
.dl-doc:hover .dl-doc__sheet--2 { transform: rotate(-5deg) translate(-3.5%, 2%); }
.dl-doc:hover .dl-doc__rings { transform: scale(1.04); }
[dir="rtl"] .dl-doc__sheet--3 { transform: rotate(7deg) translate(4%, 3%); }
[dir="rtl"] .dl-doc__sheet--2 { transform: rotate(3.5deg) translate(2%, 1.5%); }
[dir="rtl"] .dl-doc:hover .dl-doc__sheet--3 { transform: rotate(10deg) translate(7%, 4%); }
[dir="rtl"] .dl-doc:hover .dl-doc__sheet--2 { transform: rotate(5deg) translate(3.5%, 2%); }
[dir="rtl"] .dl-doc:hover .dl-doc__page { transform: translateY(-6px) rotate(-1deg); }

/* The text */
.dl-row__eyebrow { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.dl-row__num { font-family: var(--font-display); font-weight: 200; font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3.2rem); line-height: 1; color: var(--accent); }
.dl-row__type {
    padding: 0.25em 0.9em; border-radius: var(--r-pill);
    box-shadow: inset 0 0 0 1.5px var(--accent);
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em;
}
.dl-row__title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); line-height: 1.45; }
.dl-row__text { margin-top: var(--space-3); max-width: 52ch; color: var(--ink-soft); font-size: var(--fs-lg); line-height: 1.9; }
.dl-row__meta { display: flex; flex-wrap: wrap; margin: var(--space-6) 0 0; border-block: 1px solid var(--line); }
.dl-row__meta div { flex: 1 1 0; min-width: 90px; padding: var(--space-3) var(--space-4); }
.dl-row__meta div + div { border-inline-start: 1px solid var(--line); }
.dl-row__meta div:first-child { padding-inline-start: 0; }
.dl-row__meta dt { color: var(--ink-faint); font-size: var(--fs-xs); }
.dl-row__meta dd { margin: 0; font-weight: 600; }
.dl-row__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

@media (max-width: 991.98px) {
    .dl-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding-block: var(--space-10); }
    .dl-row--flip .dl-doc { order: 0; }
    .dl-doc { width: min(100%, 440px); margin-inline: auto; }
}

@media (max-width: 575.98px) {
    .dl-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
    .dl-card__body { padding: var(--space-4) var(--space-5) var(--space-5); }
    .dl-doc__rings { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 0 10px var(--paper), 0 0 0 11px color-mix(in srgb, var(--accent) 40%, transparent); }
    .dl-row__actions .btn { flex: 1; }
    .dl-row__meta div { padding-inline: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
    .dl-card, .dl-card__cover img, .dl-doc__page, .dl-doc__sheet, .dl-doc__rings { transition: none; }
}