/*
 * public/site-renderer/news-design.css — nyheternas design version 2 (preset.design).
 *
 * Hör ihop med news-design.js och kopieras oförändrad till adaptern
 * (adapter/client/news-renderer.css). Varje regel gäller bara när listan har data-design="2"
 * och respektive variabel är satt (data-sn), så en sajt utan design ritas exakt med sin egen
 * CSS som förut. Sajtens egen CSS står för grundutseendet; här ligger bara det designen styr.
 */

.news-grid[data-design="2"][data-sn~="bg"] { background: var(--sn-bg); padding: var(--sn-gap, 24px); }
.news-grid[data-design="2"][data-sn~="gap"] { gap: var(--sn-gap); }
.news-grid[data-design="2"][data-sn~="columns"] { grid-template-columns: repeat(var(--sn-columns), minmax(0, 1fr)); }

/* Kort */
.news-grid[data-design="2"][data-sn~="card-bg"] .news-card { background: var(--sn-card-bg); }
.news-grid[data-design="2"][data-sn~="pad"] .news-info { padding: var(--sn-pad); }
.news-grid[data-design="2"][data-sn~="radius"] .news-card { border-radius: var(--sn-radius); overflow: hidden; }
.news-grid[data-design="2"][data-sn~="border-width"] .news-card { border-width: var(--sn-border-width); border-style: solid; }
.news-grid[data-design="2"][data-sn~="text"] .news-card { border-color: color-mix(in srgb, var(--sn-text) 14%, transparent); }
.news-grid[data-design="2"][data-shadow="none"] .news-card { box-shadow: none; }
.news-grid[data-design="2"][data-shadow="soft"] .news-card { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.06); }

/* Text */
.news-grid[data-design="2"][data-sn~="text"] .news-card,
.news-grid[data-design="2"][data-sn~="text"] .news-title { color: var(--sn-text); }
.news-grid[data-design="2"][data-sn~="muted"] .news-date,
.news-grid[data-design="2"][data-sn~="muted"] .news-excerpt { color: var(--sn-muted); }
.news-grid[data-design="2"][data-sn~="accent"] .news-cta { color: var(--sn-accent); border-color: var(--sn-accent); }
.news-grid[data-design="2"][data-sn~="font-heading"] .news-title { font-family: var(--sn-font-heading); }
.news-grid[data-design="2"][data-sn~="font-body"] .news-card { font-family: var(--sn-font-body); }
.news-grid[data-design="2"][data-sn~="title-size"] .news-title { font-size: var(--sn-title-size); }
.news-grid[data-design="2"][data-sn~="body-size"] .news-excerpt { font-size: var(--sn-body-size); }
.news-grid[data-design="2"][data-sn~="title-weight"] .news-title { font-weight: var(--sn-title-weight); }
.news-grid[data-design="2"][data-title-case="uppercase"] .news-title { text-transform: uppercase; letter-spacing: 0.04em; }
.news-grid[data-design="2"][data-title-case="none"] .news-title { text-transform: none; letter-spacing: normal; }

/* Bild */
.news-grid[data-design="2"][data-sn~="image-aspect"] .news-image-wrapper,
.news-grid[data-design="2"][data-sn~="image-aspect"] .news-image-wrapper img,
.news-grid[data-design="2"][data-sn~="image-aspect"] .news-image-placeholder { aspect-ratio: var(--sn-image-aspect); height: auto; }
.news-grid[data-design="2"][data-sn~="image-aspect"] .news-image-wrapper img { width: 100%; object-fit: cover; }
.news-grid[data-design="2"][data-image-treatment="natural"] .news-image-wrapper img { filter: none; }
.news-grid[data-design="2"][data-image-treatment="grayscale"] .news-image-wrapper img { filter: grayscale(1); }
.news-grid[data-design="2"][data-image-treatment="tinted"] .news-image-wrapper img { filter: saturate(0.6) sepia(0.15); }

/* Dekal */
.news-grid[data-design="2"] .news-discount { position: absolute; top: 0.75rem; left: 0.75rem; right: auto; }
.news-grid[data-design="2"][data-badge-position="top-right"] .news-discount { left: auto; right: 0.75rem; }
.news-grid[data-design="2"][data-badge-position="inline"] .news-discount { position: static; display: inline-block; align-self: flex-start; }
.news-grid[data-design="2"][data-sn~="badge-bg"] .news-discount { background: var(--sn-badge-bg); color: var(--sn-badge-text); }
.news-grid[data-design="2"][data-badge-shape="pill"] .news-discount { border-radius: 999px; }
.news-grid[data-design="2"][data-badge-shape="square"] .news-discount { border-radius: 2px; }

/* Kompositioner */
.news-grid[data-design="2"][data-composition="list"] { grid-template-columns: 1fr; }
/* feature: den första nyheten över hela bredden, med bild och text sida vid sida. */
.news-grid[data-design="2"][data-composition="feature"] > .news-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; }
.news-grid[data-design="2"][data-composition="feature"] > .news-card:first-child .news-image-wrapper { margin: 0; height: 100%; }
.news-grid[data-design="2"][data-composition="magazine"] > .news-card:first-child { grid-column: span 2; grid-row: span 2; }
.news-grid[data-design="2"][data-image-position="left"] .news-card { flex-direction: row; display: flex; }
.news-grid[data-design="2"][data-image-position="left"] .news-image-wrapper { flex: 0 0 40%; }

/* spotlight: den framhävda nyheten med bilden som bakgrund och texten ovanpå ett solitt,
   halvtransparent lager (--sn-spot-overlay, ingen gradient). Övriga nyheter står under i en
   smalare centrerad lista. Med data-spot-size="full" får kortet fönstrets bredd (ritaren mäter
   den utan rullningslist: --sn-bleed-left/--sn-bleed-width) och minst fönstrets höjd. */
/* Sajtens egna regler för kolumner, tegel eller karusell (version 1) får inte påverka
   spotlighten: listan är alltid ett grid och varje kort spänner över alla kolumner. */
.news-grid[data-design="2"][data-composition="spotlight"] {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; columns: auto; overflow: visible;
}
.news-grid[data-design="2"][data-composition="spotlight"] > .news-card { grid-column: 1 / -1; width: min(100%, 40rem); margin-bottom: 0; }
.news-grid[data-design="2"][data-composition="spotlight"] > .news-card:first-child {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; justify-self: stretch;
  width: 100%; min-height: clamp(22rem, 70vh, 44rem); margin: 0; padding: 0; overflow: hidden;
  background: transparent; border: 0; box-shadow: none; transform: none;
}
.news-grid[data-design="2"][data-composition="spotlight"][data-spot-size="full"] > .news-card:first-child {
  justify-self: start; width: var(--sn-bleed-width, 100%); margin-left: var(--sn-bleed-left, 0);
  min-height: 100vh; min-height: 100svh; border-radius: 0; justify-content: center;
}
.news-grid[data-design="2"][data-composition="spotlight"] > .news-card:first-child .news-image-wrapper {
  position: absolute; inset: 0; width: auto; height: auto; margin: 0; padding: 0; border-radius: 0; aspect-ratio: auto;
}
.news-grid[data-design="2"][data-composition="spotlight"] > .news-card:first-child .news-image-wrapper img,
.news-grid[data-design="2"][data-composition="spotlight"] > .news-card:first-child .news-image-placeholder {
  display: block; width: 100%; height: 100%; max-width: none; margin: 0; aspect-ratio: auto; object-fit: cover; object-position: center; border-radius: 0;
}
.news-grid[data-design="2"][data-composition="spotlight"] > .news-card:first-child .news-image-wrapper::after {
  content: ''; position: absolute; inset: 0; background: var(--sn-spot-overlay, rgba(0, 0, 0, 0.55)); opacity: 1; pointer-events: none;
}
/* Dekalen på bilden: spotlightens textfärg som bakgrund och lagrets färg som text, så att den
   alltid går att läsa; har designen egna dekalfärger gäller de (servern har kontrollerat paret). */
.news-grid[data-design="2"][data-composition="spotlight"] > .news-card:first-child .news-discount {
  z-index: 2; background: var(--sn-spot-text, #ffffff); color: var(--sn-spot-solid, #000000);
}
.news-grid[data-design="2"][data-composition="spotlight"][data-sn~="badge-bg"] > .news-card:first-child .news-discount {
  background: var(--sn-badge-bg); color: var(--sn-badge-text);
}
.news-grid[data-design="2"][data-composition="spotlight"] > .news-card:first-child .news-info {
  position: relative; z-index: 1; box-sizing: border-box; width: 100%; max-width: 52rem; margin: 0;
  padding: clamp(1.5rem, 6vw, 4.5rem); gap: 0.75rem; background: transparent;
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  color: var(--sn-spot-text, #ffffff); overflow-wrap: anywhere;
}
.news-grid[data-design="2"][data-composition="spotlight"][data-spot-align="center"] > .news-card:first-child .news-info { margin-inline: auto; text-align: center; align-items: center; }
.news-grid[data-design="2"][data-composition="spotlight"] > .news-card:first-child .news-title,
.news-grid[data-design="2"][data-composition="spotlight"] > .news-card:first-child .news-date,
.news-grid[data-design="2"][data-composition="spotlight"] > .news-card:first-child .news-excerpt { color: var(--sn-spot-text, #ffffff); margin: 0; }
.news-grid[data-design="2"][data-composition="spotlight"] > .news-card:first-child .news-title { font-size: clamp(1.75rem, 1.1rem + 3.2vw, 3.75rem); line-height: 1.1; }
.news-grid[data-design="2"][data-composition="spotlight"] > .news-card:first-child .news-excerpt { font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem); max-width: 40rem; }
.news-grid[data-design="2"][data-composition="spotlight"] > .news-card:first-child .news-cta {
  align-self: flex-start; display: inline-block; margin-top: 0.5rem; padding: 0.7rem 1.4rem; border: 2px solid var(--sn-spot-text, #ffffff);
  border-radius: 999px; color: var(--sn-spot-text, #ffffff); background: transparent; text-decoration: none; font-weight: 600;
}
.news-grid[data-design="2"][data-composition="spotlight"][data-spot-align="center"] > .news-card:first-child .news-cta { align-self: center; }

@media (max-width: 640px) {
  .news-grid[data-design="2"][data-sn~="columns"],
  .news-grid[data-design="2"][data-composition] { grid-template-columns: 1fr; }
  .news-grid[data-design="2"][data-composition="magazine"] > .news-card:first-child { grid-column: auto; grid-row: auto; }
  .news-grid[data-design="2"][data-composition="feature"] > .news-card:first-child { display: flex; flex-direction: column; align-items: stretch; }
  .news-grid[data-design="2"][data-composition="feature"] > .news-card:first-child .news-image-wrapper { height: auto; }
  .news-grid[data-design="2"][data-image-position="left"] .news-card { flex-direction: column; }
  .news-grid[data-design="2"][data-composition="spotlight"] { grid-template-columns: minmax(0, 1fr); }
  .news-grid[data-design="2"][data-composition="spotlight"] > .news-card { width: 100%; }
  .news-grid[data-design="2"][data-composition="spotlight"][data-spot-size="full"] > .news-card:first-child { width: var(--sn-bleed-width, 100%); }
}