/* Aktuellt.
   List: one wide card per row (picture left, date, title and short text right), six per page.
   Article (layout B): title, short text and buttons beside the picture or video, facts as chips,
   the text, "Mer från ChopChop", and Föregående / Nästa cards with picture and title. */
.news-card { display:flex; flex-direction:column; padding:12px 12px 18px; background:#fff; border:1px solid var(--line,#d7dee8); border-radius:18px; box-shadow:0 14px 34px -30px #0b245440; color:#20344d; transition:transform .2s, box-shadow .2s; }
.news-card:hover { transform:translateY(-2px); box-shadow:0 18px 40px -28px #0b245466; }
.news-card:focus-visible { outline:2px solid var(--blue,#1c4e9d); outline-offset:3px; }
.news-card .news-image { margin:0; aspect-ratio:1.45; border-radius:12px; }
.news-card-body { display:flex; flex-direction:column; padding:14px 6px 0; }
.news-card-body .micro { font-size:12px; font-weight:500; letter-spacing:.055em; color:var(--blue,#1c4e9d); }
.news-card h3 { margin:6px 0 0; max-width:none; font-size:20px; font-weight:600; line-height:1.25; letter-spacing:-.02em; color:#1d1d1f; }

/* The list: wide cards, one per row. */
.all-news { display:grid; grid-template-columns:1fr; gap:28px; max-width:1100px; }
.all-news .news-card { flex-direction:row; align-items:center; gap:36px; padding:14px; }
.all-news .news-image { flex:0 0 46%; }
.all-news .news-card-body { flex:1; padding:12px 24px 12px 0; }
.all-news .news-card h3 { margin:10px 0 14px; font-size:28px; line-height:1.2; letter-spacing:-.03em; }
.all-news .news-card p { margin:0; font-size:17px; line-height:1.75; color:#6e6e73; }

.news-pager { display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:560px; margin:52px auto 0; }
.news-pager ol { display:flex; gap:6px; margin:0; padding:0; list-style:none; }
.news-pager ol a, .news-pager ol span { display:grid; place-items:center; min-width:44px; min-height:44px; border:1px solid transparent; border-radius:999px; font-size:15px; color:var(--blue,#1c4e9d); }
.news-pager ol a:hover { border-color:var(--blue,#1c4e9d); }
.news-pager ol [aria-current] { background:var(--blue,#1c4e9d); color:#fff; font-weight:600; }
/* Föregående / Nästa use the site's outline button; the arrow points back on Föregående. */
.news-pager-step { flex:0 0 auto; }
.news-pager-step.prev svg, .article-pager-link.prev svg { transform:rotate(180deg); }
.news-pager-step.is-hidden { visibility:hidden; width:136px; }

/* Article top: like the restaurant page — text and buttons on the left, picture or video on the right. */
.article-top { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:48px; align-items:center; margin:8px 0 32px; }
.article .article-top-copy.page-heading { margin:0; }
.article .article-top-copy .eyebrow { margin-bottom:14px; }
.article .article-top-copy h1 { margin:0 0 18px; font-size:58px; line-height:1.04; letter-spacing:-.035em; }
.article .article-lead { margin:0 0 6px; max-width:none; font-size:20px; font-weight:400; line-height:1.6; color:#6e6e73; }
.article .article-buttons { margin:22px 0 0; }
/* The main button solid blue, like the dish page's "Hitta restaurang & beställ". */
.article .article-buttons .button.primary { background:var(--blue,#1c4e9d); border-color:var(--blue,#1c4e9d); color:#fff; }
.article .article-buttons .button.primary:hover { background:#245fae; border-color:#245fae; }
/* Same frame on every article (the Aktuellt picture format, 2000 × 1410): pictures in that format show whole,
   portrait or very wide ones are cropped from the centre instead of making the top tall. */
.article .article-top-media .article-hero { display:block; width:100%; height:auto; aspect-ratio:2000 / 1410; max-height:none; object-fit:cover; object-position:center; margin:0; }
.article .article-top-media .article-video { margin:0; }

/* Snabbfakta: chips like the restaurant page's "Drive Thru" / "Laddstolpe". */
.article-facts { display:flex; flex-wrap:wrap; gap:8px; max-width:1060px; margin:0 0 44px; padding:0; list-style:none; }
.article-facts li { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px; background:#e5edf6; color:#1e2f77; font-size:14px; line-height:1.3; }
.article-facts svg { width:17px; height:17px; }

.article .prose { font-size:17px; line-height:1.75; }
.article-more { max-width:1060px; margin:70px auto 0; padding-top:44px; border-top:1px solid var(--line,#d7dee8); }
.article-more h2 { margin:0 0 26px; font-size:33px; font-weight:600; letter-spacing:-.04em; color:#1f3044; }
.more-news { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }

/* Föregående / Nästa: the site's outline buttons, nothing else. */
.article-pager { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:1060px; margin:40px auto 0; }
.article-pager-link { display:flex; justify-content:flex-start; }
.article-pager-link.next { justify-content:flex-end; grid-column:2; }

@media(max-width:1000px) {
  .all-news .news-card { gap:24px; }
  .all-news .news-card h3 { font-size:24px; }
  .all-news .news-card p { font-size:16px; }
  .article .article-top-copy h1 { font-size:42px; }
  .article-top { gap:32px; }
  .more-news { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* Like the restaurant page on small screens: picture or video first, then title and buttons. */
@media(max-width:860px) {
  .article-top { grid-template-columns:minmax(0,1fr); gap:22px; }
  .article-top-media { order:-1; }
}
@media(max-width:700px) {
  .all-news { gap:20px; }
  .all-news .news-card { flex-direction:column; align-items:stretch; gap:0; padding:12px 12px 20px; }
  .all-news .news-image { flex:none; }
  .all-news .news-card-body { padding:16px 6px 0; }
  .news-card-body .micro { font-size:10px; }
  .all-news .news-card h3 { margin:8px 0 10px; font-size:21px; }
  .all-news .news-card p { font-size:16px; line-height:1.7; }
  .news-pager { margin-top:36px; gap:6px; }
  /* On phones Föregående / Nästa become round arrow buttons so everything fits on one line. */
  .news-pager-step.button { width:44px; padding:0; gap:0; }
  .news-pager-label { display:none; }
  .news-pager-step.is-hidden { width:44px; }
  .news-pager ol a, .news-pager ol span { min-width:38px; min-height:38px; font-size:14px; }
  .article .article-top-copy h1 { font-size:36px; margin-bottom:14px; }
  .article .article-lead { font-size:17px; }
  .article-facts { margin-bottom:32px; }
  .article-facts li { font-size:13px; padding:6px 12px; }
  .article .prose { font-size:16px; }
  .article-more { margin-top:50px; padding-top:32px; }
  .article-more h2 { font-size:28px; }
  .more-news { grid-template-columns:1fr; gap:18px; }
  .article-pager { gap:12px; }
}
@media(prefers-reduced-motion:reduce) { .news-card { transition:none; } .news-card:hover { transform:none; } }