/*
 * CSS-undantag: news-highlight-count-layout
 * Syfte: Anpassa Loop Grid och dess kort till antalet synliga nyheter, inklusive en ensam presentation.
 * Omfattning: Endast På gång-sektionernas Pro Loop Grid och sjs-highlight-card.
 * Begränsning i Elementor: Pro Loop Grid 4.2.2 saknar kolumn- och kortlayoutkontroller som villkoras av resultatantalet.
 * Kan tas bort när: Loop Grid erbjuder resultatstyrda kolumner och varianter av samma redigerbara kortmall.
 */
[data-sjs-highlight-count] .elementor-loop-container {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;align-items:stretch}
[data-sjs-highlight-count="1"] .elementor-loop-container {grid-template-columns:minmax(0,1fr)}
[data-sjs-highlight-count="2"] .elementor-loop-container,
[data-sjs-highlight-count="4"] .elementor-loop-container {grid-template-columns:repeat(2,minmax(0,1fr))}
.sjs-highlights-grid[data-sjs-highlight-count="1"] .sjs-highlight-card {display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center}
@media(max-width:1180px){[data-sjs-highlight-count] .elementor-loop-container{grid-template-columns:repeat(2,minmax(0,1fr))}[data-sjs-highlight-count="1"] .elementor-loop-container{grid-template-columns:1fr}}
@media(max-width:860px){.sjs-highlights-grid[data-sjs-highlight-count="1"] .sjs-highlight-card{display:flex;flex-direction:column}}
@media(max-width:580px){[data-sjs-highlight-count] .elementor-loop-container{grid-template-columns:1fr}}

/*
 * CSS-undantag: news-home-presence-layout
 * Syfte: Ge nyheter hela ytan utan höjdpunkter och ge höjdpunkten hela ytan utan nyheter.
 * Omfattning: Endast startsidans sjs-highlight-journal-layout och dess nyhetslistning.
 * Begränsning i Elementor: Atomic/Pro Loop Grid saknar layoutvillkor för om en annan dynamisk listning har resultat.
 * Kan tas bort när: Native layoutkontroller kan villkoras av de två listningarnas publicerade resultat.
 */
.elementor .sjs-highlight-journal-layout:not(:has(.sjs-journal-lead-grid .e-loop-item)),
.elementor .sjs-highlight-journal-layout:not(:has(.sjs-journal-news-grid .e-loop-item)){grid-template-columns:minmax(0,1fr)}
.sjs-highlight-journal-layout:not(:has(.sjs-journal-lead-grid .e-loop-item)) .sjs-journal-news-grid .elementor-loop-container{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
@media(max-width:860px){.sjs-highlight-journal-layout:not(:has(.sjs-journal-lead-grid .e-loop-item)) .sjs-journal-news-grid .elementor-loop-container{grid-template-columns:minmax(0,1fr);gap:0}}

/*
 * CSS-undantag: news-managed-article-action
 * Syfte: Ge nyhetens boknings- eller kontaktknapp grön bakgrund, ljus text och tydliga hover- och fokustillstånd.
 * Omfattning: Endast pluginets tillagda åtgärd i .sjs-news-article-action, på svenska och engelska nyhetsartiklar.
 * Begränsning i Elementor: Åtgärden skapas från nyhetens adminfält i the_content och har inget eget widget-ID. Theme Post Content saknar separata knappkontroller för denna tillagda länk.
 * Kan tas bort när: Den hanterade artikelåtgärden har native widgetkontroller för samma länk-, text- och avslutslogik.
 */
.sjs-news-article-action{margin-block:2rem}
.sjs-news-article-action .wp-block-button{max-width:100%}
.sjs-news-article-action .wp-element-button{display:inline-flex;align-items:center;justify-content:center;max-width:100%;padding:16px 26px;border:1px solid transparent;border-radius:0;background:var(--e-global-color-primary,#2f4638);color:var(--e-global-color-warm-white,#fcfaf6);font-family:inherit;font-size:14px;font-weight:600;line-height:1.4;text-align:center;text-decoration:none;white-space:normal}
.sjs-news-article-action .wp-element-button:hover{background:#000;color:var(--e-global-color-warm-white,#fcfaf6);text-decoration:none}
.sjs-news-article-action .wp-element-button:focus-visible{outline:2px solid var(--e-global-color-primary,#2f4638);outline-offset:4px}