/* ============================================================
   DOWNLOADS  ·  .downloads
   Brochures to download (sections/downloads.php). Each tile is one
   link: the file's cover, set slightly askew like a brochure left
   on a table, beside its title, note and size. Tokens only.
   ============================================================ */

/* The section after it (the inquiry form) brings its own top padding. */
.downloads {
  padding-block-end: var(--section-space-xs);
}

.downloads__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.downloads__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-m);
}

.download {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: center;
  gap: var(--space-m);
  height: 100%;
  padding: var(--space-m);
  background: var(--bg-light);
  border: var(--border);
  border-radius: var(--radius-l);
  color: var(--text-dark);
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-normal) var(--ease-out-expo);
}

.download:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-m);
  color: var(--text-dark);
}

.download__cover {
  display: block;
  aspect-ratio: 17 / 22;
  overflow: hidden;
  background: var(--bg-semi-light);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-l);
  rotate: -2deg;
  transition: rotate var(--duration-normal) var(--ease-out-expo), translate var(--duration-normal) var(--ease-out-expo);
}

.download:hover .download__cover {
  rotate: 0deg;
  translate: 0 -0.4rem;
}

.download__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.download__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.download__title {
  font-family: var(--font-display);
  font-size: var(--h5);
  font-weight: 600;
  line-height: var(--heading-line-height);
}

.download__note {
  font-size: var(--text-s);
  color: var(--text-dark-muted);
}

.download__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--secondary);
}

/* Drawn arrow-into-tray, masked so it takes the link colour. */
.download__meta::before {
  content: "";
  width: 1.1em;
  aspect-ratio: 1;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 11l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 11l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

.download__size {
  font-size: var(--text-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--text-dark-muted);
}

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

@media (min-width: 1200px) {
  .downloads__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}