/* Downloads - its own page header, and the What We Build card laid out as a grid.
   The card itself is left to the kit stylesheet on purpose: same artwork that greys out
   until hover, same Details button sliding up, same card taking its accent colour. All this
   file does is give the page a header and arrange the cards. */

.dl-main { padding: 0 0 10px; }
.dl-wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

/* --- the page header -------------------------------------------------------
   Every other section opens with a hero, so this one does too - in its own shape. The
   title and its line sit side by side rather than stacked, on a warm tint, with the title
   underscored in the accent. Method's is a dark band, Magazine's is a stacked display
   headline, the home page has a carousel: none of them are this. */
.dl-hero {
    background: #FFF6F1;
    border-bottom: 2px solid var(--ink, #111);
    padding: 132px 0 42px;
}
.dl-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 32ch);
    align-items: end;
    gap: 14px 48px;
}
.dl-eyebrow {
    grid-column: 1 / -1;
    font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: #FF4500; margin: 0;
}
.dl-hero h1 {
    font-size: clamp(2.6rem, 5.4vw, 4.2rem);
    line-height: 1.0; letter-spacing: -0.035em; font-weight: 700;
    margin: 0; padding-bottom: 12px;
    border-bottom: 6px solid #FF4500;
    width: fit-content; max-width: 100%;
}
.dl-lede {
    font-size: 19px; line-height: 1.55; color: #444;
    margin: 0 0 10px; max-width: 32ch;
}

/* --- the grid -------------------------------------------------------------
   The cards are built for a horizontal strip (flex: 0 0 320px), so in a grid they are told
   to fill their cell instead. Equal heights keep the Details button's reveal from jumping
   between rows. */
.dl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 26px;
    padding: 34px 0 44px;
}
.dl-grid .product-card {
    flex: none; width: 100%; min-height: 430px;
    display: flex; flex-direction: column;
    transition: background 0.05s linear, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.28s ease;
}
.dl-grid .product-info { flex: 1 1 auto; display: flex; flex-direction: column; }

/* the honest status, under the tagline */
.dl-chip {
    display: inline-block; align-self: flex-start; margin-top: 12px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
    color: #8a2c00; border: 2px solid #FF4500; border-radius: 999px; padding: 3px 11px;
    transition: color 0.05s linear, border-color 0.05s linear;
}
.dl-grid .product-card:hover .dl-chip { color: #fff; border-color: #fff; }

/* --- hover, on top of the kit's own effects ------------------------------- */
.dl-grid .product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(17, 17, 17, 0.16);
}

/* cards arrive in sequence rather than all at once */
.dl-grid .product-card.reveal { transition-delay: 0s; }
.dl-grid .product-card:nth-child(2) { transition-delay: 0.07s; }
.dl-grid .product-card:nth-child(3) { transition-delay: 0.14s; }
.dl-grid .product-card:nth-child(4) { transition-delay: 0.21s; }
.dl-grid .product-card:nth-child(5) { transition-delay: 0.28s; }
.dl-grid .product-card:nth-child(6) { transition-delay: 0.35s; }

/* --- closing note --------------------------------------------------------- */
.dl-note { padding: 0 0 46px; }
.dl-note h2 {
    font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: #FF4500; margin: 0 0 12px;
}
.dl-note p { font-size: 16px; line-height: 1.65; color: #333; max-width: 62ch; margin: 0; }

@media (max-width: 820px) {
    .dl-hero { padding: 112px 0 32px; }
    .dl-hero-grid { grid-template-columns: 1fr; gap: 18px; }
    .dl-hero h1 { font-size: clamp(2.1rem, 9vw, 3rem); }
    .dl-lede { font-size: 17px; max-width: none; margin-bottom: 0; }
}

@media (max-width: 720px) {
    .dl-grid { grid-template-columns: 1fr; gap: 20px; }
    .dl-grid .product-card { min-height: 0; }
}

/* Anyone who has asked their machine to calm down keeps the colour change and loses the
   movement. The kit's own hover effects are untouched either way. */
@media (prefers-reduced-motion: reduce) {
    .dl-grid .product-card,
    .dl-grid .product-card:hover {
        transform: none; box-shadow: none; transition: background 0.05s linear;
    }
    .product-card:hover .product-media svg { transform: none; }
    .dl-grid .product-card.reveal,
    .dl-grid .product-card:nth-child(n) { transition-delay: 0s; }
}