/**
 * WebCreator - download list / file cards (markup: docs/page-editor-blocks.md)
 *
 * Loaded only on pages that contain a download list (div.wc-downloads, see wc_block_assets()). No script.
 * Colours, radius, shadow and fonts come from the theme variables (docs/themes.md, 4 and 7), with fallbacks:
 *   surface --color-bg + --color-border      text --wc-text, quiet text --color-text-muted
 *   primary button --wc-primary / --wc-on-primary, second button like .btn-secondary (--wc-secondary)
 *   file icon: a page shape drawn with CSS (the label PDF/DOC/... comes from data-wc-type): --color-primary-50 + --wc-primary-text
 *   ring --wc-focus-ring      shape --wc-radius, --wc-btn-radius, --wc-shadow
 * Layout: a list (one row per file: icon, title and details, buttons) or a grid of 2 or 3 file cards; 1 column on a phone.
 */
.wc-downloads {
    --wcd-cols: 1;
    display: grid;
    grid-template-columns: repeat(var(--wcd-cols), minmax(0, 1fr));
    gap: clamp(0.75rem, 2vw, 1.25rem);
    box-sizing: border-box;
    margin: 1.5rem 0;
    padding: 0;
}
.wc-downloads[data-wc-layout="grid"] { --wcd-cols: 2; }
.wc-downloads[data-wc-layout="grid"][data-wc-columns="3"] { --wcd-cols: 3; }
@media (max-width: 60rem) {
    .wc-downloads[data-wc-layout="grid"][data-wc-columns="3"] { --wcd-cols: 2; }
}
@media (max-width: 40rem) {
    .wc-downloads[data-wc-layout="grid"],
    .wc-downloads[data-wc-layout="grid"][data-wc-columns] { --wcd-cols: 1; }
}

.wc-downloads > .wc-download {
    box-sizing: border-box;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding: clamp(0.9rem, 2.5vw, 1.25rem);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--wc-radius, 8px);
    background: var(--color-bg, #fff);
    color: var(--wc-text, var(--color-text, #111827));
    box-shadow: var(--wc-shadow, 0 1px 3px rgba(0, 0, 0, 0.12));
    text-align: left;
    line-height: 1.5;
}

/* the file icon: a page with a folded corner and the type as its label */
.wc-downloads > .wc-download::before {
    content: "FILE";
    content: "FILE" / "";
    flex: 0 0 auto;
    box-sizing: border-box;
    display: grid;
    place-items: end start;
    width: 2.75rem;
    height: 3.4rem;
    padding: 0.35rem 0.3rem;
    background: var(--color-primary-50, #e8f5ec);
    color: var(--wc-primary-text, var(--color-primary, #1e7a43));
    clip-path: polygon(0 0, calc(100% - 0.9rem) 0, 100% 0.9rem, 100% 100%, 0 100%);
    border-radius: 0.2rem;
    font: 700 0.7rem/1 var(--font-family, system-ui, sans-serif);
    letter-spacing: 0.02em;
}
.wc-downloads > .wc-download[data-wc-type="pdf"]::before { content: "PDF"; content: "PDF" / ""; }
.wc-downloads > .wc-download[data-wc-type="doc"]::before { content: "DOC"; content: "DOC" / ""; }
.wc-downloads > .wc-download[data-wc-type="xls"]::before { content: "XLS"; content: "XLS" / ""; }
.wc-downloads > .wc-download[data-wc-type="ppt"]::before { content: "PPT"; content: "PPT" / ""; }
.wc-downloads > .wc-download[data-wc-type="txt"]::before { content: "TXT"; content: "TXT" / ""; }
.wc-downloads > .wc-download[data-wc-type="zip"]::before { content: "ZIP"; content: "ZIP" / ""; }

.wc-downloads .wc-download .wc-download-body { flex: 1 1 14rem; min-width: 0; }
.wc-downloads .wc-download .wc-download-title {
    margin: 0;
    padding: 0;
    color: inherit;
    font-family: var(--font-family-heading, inherit);
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--wc-heading-weight, 700);
    line-height: 1.3;
    text-transform: none;
    letter-spacing: normal;
    overflow-wrap: anywhere;
}
.wc-downloads .wc-download .wc-download-desc {
    margin: 0.35rem 0 0;
    color: inherit;
    font-size: var(--font-size-base, 1rem);
}
.wc-downloads .wc-download .wc-download-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    margin: 0.3rem 0 0;
    color: var(--color-text-muted, #4b5563);
    font-size: 0.875rem;
}
.wc-downloads .wc-download .wc-download-meta > span + span::before {
    content: "\00b7";
    content: "\00b7" / "";
    margin-right: 0.5rem;
}

/* grid: file cards of equal height, the buttons at the bottom */
.wc-downloads[data-wc-layout="grid"] > .wc-download {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}
.wc-downloads[data-wc-layout="grid"] .wc-download .wc-download-body { flex: 1 1 auto; width: 100%; }

/* buttons */
.wc-downloads .wc-download .wc-download-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 0 0 auto;
}
@media (max-width: 40rem) {
    .wc-downloads:not([data-wc-layout="grid"]) > .wc-download::before { align-self: flex-start; }
    .wc-downloads:not([data-wc-layout="grid"]) .wc-download .wc-download-actions { flex-basis: 100%; }
}
.wc-downloads .wc-download .wc-download-actions a.wc-download-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-sizing: border-box;
    min-height: 2.75rem;
    padding: 0.55rem 1.1rem;
    border: 2px solid var(--wc-primary, var(--color-primary, #27ae60));
    border-radius: var(--wc-btn-radius, var(--radius-md, 6px));
    background: var(--wc-primary, var(--color-primary, #27ae60));
    color: var(--wc-on-primary, #111111);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color var(--transition-fast, 0.15s ease), color var(--transition-fast, 0.15s ease);
}
.wc-downloads .wc-download .wc-download-actions a.wc-download-button::before {
    content: "\2193";
    content: "\2193" / "";
    font-weight: 700;
}
.wc-downloads .wc-download .wc-download-actions a.wc-download-button[target="_blank"]::before { content: "\2197"; content: "\2197" / ""; }
.wc-downloads .wc-download .wc-download-actions a.wc-download-button:hover {
    border-color: var(--wc-primary-hover, var(--color-primary-dark, var(--wc-primary, #1e8449)));
    background: var(--wc-primary-hover, var(--color-primary-dark, var(--wc-primary, #1e8449)));
    color: var(--wc-on-primary-hover, var(--wc-on-primary, #111111));
}
/* the second link (for example the English version): an outline button, like .btn-secondary */
.wc-downloads .wc-download .wc-download-actions a.wc-download-button.is-secondary {
    border-color: var(--wc-secondary, var(--wc-text, #111827));
    background: transparent;
    color: var(--wc-secondary, var(--wc-text, #111827));
}
.wc-downloads .wc-download .wc-download-actions a.wc-download-button.is-secondary:hover {
    background: var(--wc-secondary, var(--wc-text, #111827));
    color: var(--wc-on-secondary, #ffffff);
}
.wc-downloads .wc-download a:focus-visible {
    outline: 3px solid var(--wc-focus-ring, var(--color-primary, #27ae60));
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .wc-downloads .wc-download .wc-download-actions a.wc-download-button { transition: none; }
}