/*
 * "Today in Swiss retail" on the EN/DE/FR homepages, right after the market
 * signals demo. components/retail-news/build.mjs writes the section and owns
 * this file's ?v= (HOME_V). Three cards, newest first: 3 columns on a
 * desktop, 2 on a tablet, 1 on a phone; never a horizontal scroll. No
 * script: clicks are tracked by nav.js.
 */

/* Copper silk (Sellva 2.0, Guilherme, 21 Oct 2026), cropped below the
   wordmark the source carries, and shown 25% transparent over the page's
   light ground (Guilherme: "a little bit more transparent"). A deeper band
   fades out over the top 320px, so the white heading and subtitle stay at
   4.7:1 or better on the brightest streaks at every width. The solid colour
   is that blend, for while the image loads. The cards stay white. */
.hn-section {
  background: #9A5233 center top / cover no-repeat;
  background-image:
    linear-gradient(to bottom, rgba(40, 12, 2, 0.45) 0, rgba(40, 12, 2, 0) 320px),
    linear-gradient(rgba(246, 248, 246, 0.25), rgba(246, 248, 246, 0.25)),
    url('/assets/silk/silk-copper-2400x1095.jpg');
  background-image:
    linear-gradient(to bottom, rgba(40, 12, 2, 0.45) 0, rgba(40, 12, 2, 0) 320px),
    linear-gradient(rgba(246, 248, 246, 0.25), rgba(246, 248, 246, 0.25)),
    image-set(url('/assets/silk/silk-copper-2400x1095.webp') type('image/webp'), url('/assets/silk/silk-copper-2400x1095.jpg') type('image/jpeg'));
  padding: 80px 2rem 88px;
}

.hn-header { text-align: center; max-width: 760px; margin: 0 auto 36px; }
.hn-headline {
  font: 800 clamp(24px, 3.2vw, 36px)/1.18 Poppins, Inter, sans-serif;
  color: #FFFFFF;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
  text-wrap: balance;
}
.hn-sub {
  font: 400 16px/1.6 Inter, sans-serif;
  color: #FFFFFF;
  margin: 0;
}

.hn-cards {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1180px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.hn-cards > li { display: flex; min-width: 0; }

/* The whole card is one link. */
.hn-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 22px 22px 20px;
  background: #FFFFFF;
  border: 1px solid #E3E8E3;
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.hn-card:hover {
  border-color: #79AE7C;
  box-shadow: 0 10px 28px rgba(16, 40, 24, 0.08);
  transform: translateY(-2px);
}
.hn-card:focus-visible { outline: 2px solid #33683F; outline-offset: 3px; }

.hn-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 24px;
  font: 500 12.5px/1.3 Inter, sans-serif;
  color: var(--sns-grey-600, #475569);
}
.hn-logo { display: block; width: auto; }
.hn-retailer {
  font: 700 11.5px/1 Inter, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #183826;
  background: #E8F1E8;
  border-radius: 999px;
  padding: 5px 9px;
}
.hn-title {
  font: 700 17px/1.35 Poppins, Inter, sans-serif;
  color: var(--sns-ink-800, #111827);
  letter-spacing: -0.01em;
  margin: 0;
}
.hn-card:hover .hn-title { color: #183826; }
.hn-text {
  font: 400 14.5px/1.55 Inter, sans-serif;
  color: var(--sns-grey-600, #475569);
  margin: 0;
}
.hn-source {
  margin-top: auto;
  padding-top: 6px;
  font: 500 12px/1.4 Inter, sans-serif;
  color: #6B7280;
}

.hn-all { text-align: center; margin: 32px 0 0; }
.hn-all-link {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  /* Solid white: the lighter copper behind it varies too much for an
     outline button to stay readable everywhere. */
  border: 1.5px solid #FFFFFF;
  background: #FFFFFF;
  border-radius: 999px;
  font: 600 15px/1.2 Inter, sans-serif;
  color: #5E230C;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.hn-all-link:hover { background: #5E230C; border-color: #5E230C; color: #FFFFFF; }
.hn-all-link:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

@media (max-width: 1024px) {
  .hn-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hn-section { padding: 56px 20px 64px; }
  .hn-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .hn-card { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hn-card, .hn-all-link { transition: none; }
  .hn-card:hover { transform: none; }
}