/**
 * CCTRL CHILD THEME – CSS LAYER: CONTENT PATTERNS
 * Handle suggestion in WordPress: 'cctrl-patterns'
 *
 * PURPOSE
 * - Opinionated content layouts built from components:
 *     * Article layout
 *     * Figures (incl. lightbox-ready)
 *     * Tables
 *     * Podcast cards, blog cards, video cards
 *
 * LAYERING (LOAD ORDER)
 * - Depends on:
 *     cctrl-core.css
 *     cctrl-layout.css
 *     cctrl-components.css
 * - Load BEFORE:
 *     cctrl-interactions.css
 *
 * RULES FOR FUTURE WORK (for humans + AI)
 * - This layer may combine multiple components for specific use-cases.
 * - New patterns should:
 *     * Use .cctrl-* prefixes (e.g. .cctrl-article__header).
 *     * Avoid redefining global tokens or low-level behaviors.
 */
/* ===================================================================
   6. CONTENT PATTERNS (ARTICLE, FIGURES, TABLE, CARDS)
   ================================================================== */

/* 6.1 Article layout */

.cctrl-article__inner {
  max-width: 700px;
  margin-inline: auto;
}

.cctrl-article__header {
  margin-bottom: var(--space-3);
}

.cctrl-article__meta {
  color: var(--muted);
  font-size: 0.9rem;
}

.cctrl-article__content > * + * {
  margin-top: var(--space-2);
}


/* ===================================================================
   6.1.1 BLOG POST STYLING - Modern card-based design
   
   USAGE: Wrap blog post in .cctrl-blog-card
   Creates a floating white card with rounded corners.
   
   Structure:
   <div class="cctrl-blog-page">
     <nav class="cctrl-breadcrumb">...</nav>
     <article class="cctrl-blog-card">
       <img class="cctrl-blog-card__image" />
       <div class="cctrl-blog-card__content">
         <span class="cctrl-blog-card__category">KATEGORI</span>
         <h1 class="cctrl-blog-card__title">Titel</h1>
         <div class="cctrl-blog-card__author">
           <img class="cctrl-blog-card__avatar" />
           <span>Namn</span>
           <span>·</span>
           <span>Datum</span>
         </div>
         <hr class="cctrl-blog-card__divider" />
         <div class="cctrl-blog-card__body">...</div>
       </div>
     </article>
   </div>
   =================================================================== */

/* ─────────────────────────────────────────────────────────────────
   BLOG PAGE – Lavender bakgrund på main, 700px innehåll via cctrl-blog-page
   
   STRUKTUR: Blog page (Section) > Blog card + Relaterade artiklar
   Lägg cctrl-blog-page på Section som omsluter BLOGG KORT + RELATERADE ARTIKLAR.
   ───────────────────────────────────────────────────────────────── */

/* Main – full bredd, lavender bakgrund */
body.cctrl-blog-layout .cctrl-main,
body.cctrl-blog-layout main {
  background: var(--lav-50, #f8f9ff) !important;
  min-height: 100vh;
  padding-top: 120px; /* Clear fixed navigation */
  padding-bottom: var(--space-8, 64px);
  padding-inline: clamp(24px, 5vw, 48px) !important;
  box-sizing: border-box;
}

/* Single post: ingen padding topp – bilden går hela vägen upp */
body.cctrl-blog-layout.single-post .cctrl-main,
body.cctrl-blog-layout.single-post main {
  padding-top: 0;
}

/* cctrl-blog-page: full bredd. Kortet 700px, luft runt. */
.cctrl-blog-page {
  width: 100%;
  max-width: none;
}



/* Knappar inuti cctrl-blog-page – naturlig bredd, centrerad, 16px radie (inte pill) */
.cctrl-blog-page .elementor-widget-button .elementor-button-wrapper {
  display: flex;
  justify-content: center;
}
.cctrl-blog-page .elementor-widget-button .elementor-button {
  width: auto !important;
  min-width: auto;
  border-radius: var(--radius-md, 16px) !important;
}

/* Fallback: om cctrl-blog-page inte används, body.cctrl-blog-layout för knappar */
body.cctrl-blog-layout .elementor-widget-button .elementor-button-wrapper {
  display: flex;
  justify-content: center;
}
body.cctrl-blog-layout .elementor-widget-button .elementor-button {
  width: auto !important;
  min-width: auto;
  border-radius: var(--radius-md, 16px) !important;
}

/* Single post: cctrl-content-wide ska ALDRIG användas – bloggen ska vara 700px */
body.single-post .cctrl-content-wide,
body.cctrl-blog-layout.single-post .cctrl-content-wide {
  max-width: 700px !important;
  padding-inline: clamp(24px, 5vw, 48px) !important;
}

/* Sidfot på blogg: full bredd som resten av sidan (ingen 700px-begränsning) */
body.cctrl-blog-layout .cctrl-footer .cctrl-container {
  max-width: var(--container-max, 1200px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-inline: var(--gutter, clamp(24px, 5vw, 48px)) !important;
  text-align: center;
}
body.cctrl-blog-layout .cctrl-footer__connect-links {
  justify-content: center;
}
body.cctrl-blog-layout .cctrl-footer__bottom {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: var(--space-2) !important;
}
body.cctrl-blog-layout .cctrl-footer--simple .cctrl-footer__copyright,
body.cctrl-blog-layout .cctrl-footer--simple .cctrl-footer__legal {
  grid-column: unset !important;
  justify-self: unset !important;
}

/* Sidfot-länkar mörklila (inte terracotta) på blogg och public */
body.cctrl-blog-layout .cctrl-footer__legal a,
body.cctrl-blog-layout .cctrl-footer__connect-link,
.is-public .cctrl-footer__legal a,
.is-public .cctrl-footer__connect-link {
  color: var(--lav-700, #515289) !important;
}
body.cctrl-blog-layout .cctrl-footer__legal a:hover,
body.cctrl-blog-layout .cctrl-footer__connect-link:hover,
.is-public .cctrl-footer__legal a:hover,
.is-public .cctrl-footer__connect-link:hover {
  color: var(--lav-600, #55578f) !important;
}

/* Sidfot i dark mode: lav-700 mot mörk bakgrund → oläsbar; måste vinna över reglerna ovan */
html[data-theme="dark"] body.is-public .cctrl-footer__connect-link,
html[data-theme="dark"] body.cctrl-blog-layout .cctrl-footer__connect-link {
  color: rgba(255, 255, 255, 0.92) !important;
}

html[data-theme="dark"] body.is-public .cctrl-footer__connect-link:hover,
html[data-theme="dark"] body.is-public .cctrl-footer__connect-link:focus-visible,
html[data-theme="dark"] body.cctrl-blog-layout .cctrl-footer__connect-link:hover,
html[data-theme="dark"] body.cctrl-blog-layout .cctrl-footer__connect-link:focus-visible {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.14) !important;
}

html[data-theme="dark"] body.is-public .cctrl-footer__legal a,
html[data-theme="dark"] body.cctrl-blog-layout .cctrl-footer__legal a,
html[data-theme="dark"] .cctrl-footer--simple .cctrl-footer__legal a {
  color: rgba(255, 255, 255, 0.92) !important;
}

html[data-theme="dark"] body.is-public .cctrl-footer__legal a:hover,
html[data-theme="dark"] body.is-public .cctrl-footer__legal a:focus-visible,
html[data-theme="dark"] body.cctrl-blog-layout .cctrl-footer__legal a:hover,
html[data-theme="dark"] body.cctrl-blog-layout .cctrl-footer__legal a:focus-visible,
html[data-theme="dark"] .cctrl-footer--simple .cctrl-footer__legal a:hover,
html[data-theme="dark"] .cctrl-footer--simple .cctrl-footer__legal a:focus-visible {
  color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────────
   BREADCRUMB NAVIGATION
   ───────────────────────────────────────────────────────────────── */
.cctrl-breadcrumb {
  max-width: 700px;
  margin: 0 auto;
  padding: var(--space-4, 32px) var(--space-4, 32px) var(--space-3, 24px);
  font-size: 0.875rem;
  color: var(--muted, #667085);
}

.cctrl-breadcrumb a {
  color: var(--muted, #667085);
  text-decoration: none;
  transition: color 0.15s ease;
}

.cctrl-breadcrumb a:hover {
  color: var(--lav-600, #55578f);
  text-decoration: none;
}

.cctrl-breadcrumb__separator {
  margin: 0 8px;
  color: var(--outline, #d5d7e3);
}

.cctrl-breadcrumb__current {
  color: var(--lav-700, #4a4b80);
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────
   BLOG CARD - White card with rounded corners
   ───────────────────────────────────────────────────────────────── */
body.cctrl-blog-layout .cctrl-blog-card,
body.cctrl-blog-layout .elementor-section.cctrl-blog-card,
.cctrl-blog-card {
  --card-max-width: 700px;
  --card-radius: 16px;
  --card-padding: clamp(24px, 5vw, 48px);
  
  max-width: 700px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 40px;
  margin-bottom: var(--space-6, 48px);
  box-sizing: border-box;
  background: #ffffff;
  border-radius: var(--card-radius);
  box-shadow: 0 4px 24px rgba(61, 62, 102, 0.08), 0 1px 4px rgba(61, 62, 102, 0.04);
  overflow: hidden;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text, #2a2f36);
  
  /* Reset Elementor container padding - all padding goes in __content */
  --padding-top: 0 !important;
  --padding-bottom: 0 !important;
  --padding-left: 0 !important;
  --padding-right: 0 !important;
  --padding-inline-start: 0 !important;
  --padding-inline-end: 0 !important;
  --padding-block-start: 0 !important;
  --padding-block-end: 0 !important;
  padding: 0 !important;
}

/* Featured image - fills top of card edge-to-edge
   Bilder 2000×1600 (5:4): max-height 560px = naturlig höjd vid 700px bredd */
.cctrl-blog-card__image,
.cctrl-blog-card > img:first-child,
.cctrl-blog-card .wp-post-image,
.cctrl-blog-card .elementor-widget-image:first-child img,
.cctrl-blog-card .elementor-widget-theme-post-featured-image img,
.cctrl-blog-card [data-widget_type*="featured-image"] img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 420px !important;
  max-height: 560px !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Remove any padding/margin from image widget containers */
.cctrl-blog-card > .elementor-widget-image:first-child,
.cctrl-blog-card > .elementor-widget-theme-post-featured-image:first-child,
.cctrl-blog-card > .elementor-element:first-child,
.cctrl-blog-card .elementor-widget-image:first-child {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.cctrl-blog-card .elementor-widget-image:first-child .elementor-widget-container,
.cctrl-blog-card .elementor-widget-theme-post-featured-image .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}

/* Single post: featured image i Theme Builder – högre, center top */
body.single-post .elementor-widget-theme-post-featured-image img,
body.single-post [data-widget_type*="theme-post-featured-image"] img {
  object-position: center top !important;
  min-height: 420px !important;
  max-height: 560px !important;
}

/* Content area with padding */
.cctrl-blog-card__content,
.cctrl-blog-card .cctrl-blog-card__content,
.cctrl-blog-card__content.e-con,
.cctrl-blog-card .e-con.cctrl-blog-card__content {
  /* Override Elementor padding with explicit values */
  --padding-top: clamp(24px, 5vw, 48px) !important;
  --padding-bottom: clamp(24px, 5vw, 48px) !important;
  --padding-left: clamp(24px, 5vw, 48px) !important;
  --padding-right: clamp(24px, 5vw, 48px) !important;
  --padding-inline-start: clamp(24px, 5vw, 48px) !important;
  --padding-inline-end: clamp(24px, 5vw, 48px) !important;
  --padding-block-start: clamp(24px, 5vw, 48px) !important;
  --padding-block-end: clamp(24px, 5vw, 48px) !important;
  padding: clamp(24px, 5vw, 48px) clamp(28px, 6vw, 56px) !important;
}

/* Category pill - lavender purple, endast .cat-links och .cctrl-blog-card__category */
.cctrl-blog-card__category,
.cctrl-blog-card .cat-links a {
  display: inline-block;
  padding: 8px 18px;
  background: var(--lav-500, #6264a7);
  color: #ffffff !important;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  text-decoration: none !important;
  transition: background 0.15s ease, transform 0.15s ease;
}

.cctrl-blog-card__category:hover,
.cctrl-blog-card .cat-links a:hover {
  background: var(--lav-600, #55578f);
  text-decoration: none !important;
  transform: translateY(-1px);
}

/* Kategori-pill endast för faktiska kategori-länkar (cat-links) på public – inte rubriker eller andra länkar */
.is-public .cat-links a {
  display: inline-block;
  padding: 8px 18px;
  background: var(--lav-500, #6264a7);
  color: #ffffff !important;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  text-decoration: none !important;
  transition: background 0.15s ease, transform 0.15s ease;
}
.is-public .cat-links a:hover {
  background: var(--lav-600, #55578f);
  text-decoration: none !important;
  transform: translateY(-1px);
}

/* Title */
.cctrl-blog-card__title,
.cctrl-blog-card h1,
.cctrl-blog-card .entry-title {
  font-family: var(--font-heading, "Cooper Hewitt", system-ui, sans-serif) !important;
  font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: var(--lav-900, #3d3e66) !important;
  margin: 0 0 16px !important;
}

/* Author row */
/* Categories wrapper (for multiple pills) */
.cctrl-blog-card__categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px; /* Space from image above */
  margin-bottom: 24px; /* Space to title below */
}

/* Single category pill (when not in wrapper) */
.cctrl-blog-card__category {
  margin-top: 8px;
  margin-bottom: 24px;
}

/* Remove margin from pills when inside categories wrapper */
.cctrl-blog-card__categories .cctrl-blog-card__category {
  margin-top: 0;
  margin-bottom: 0;
}

.cctrl-blog-card__header {
  margin-bottom: 32px;
  text-align: center;
}

/* Titel centrerad (shortcode + Elementor) */
.cctrl-blog-card__title,
.cctrl-blog-card h1,
body.single-post .cctrl-blog .elementor-heading-title {
  text-align: center !important;
}

/* Post Info (author/date) centrerad – Elementor widget */
body.single-post .cctrl-blog .elementor-widget-theme-post-info .elementor-post-info,
body.single-post .cctrl-blog-card .elementor-widget-theme-post-info .elementor-post-info {
  justify-content: center;
  text-align: center;
}

.cctrl-blog-card__author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--muted, #667085);
  margin-bottom: 24px;
}

.cctrl-blog-card__avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0;
  border: 2px solid var(--lav-100, #f3f4fb);
}

.cctrl-blog-card__author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cctrl-blog-card__author-name {
  font-weight: 600;
  color: var(--text, #2a2f36);
  font-size: 0.95rem;
}

.cctrl-blog-card__date {
  color: var(--muted, #667085);
  font-size: 0.85rem;
}

.cctrl-blog-card__author-separator {
  color: var(--outline, #d5d7e3);
}

.cctrl-blog-card__author-date {
  color: var(--muted, #667085);
}

/* Divider line */
.cctrl-blog-card__divider {
  border: none;
  border-top: 1px solid var(--outline, #d5d7e3);
  margin: 0 0 32px;
}

/* ─────────────────────────────────────────────────────────────────
   BLOG CARD TAGS
   ───────────────────────────────────────────────────────────────── */

.cctrl-blog-card__tags {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
  padding-top: 24px;
}

.cctrl-blog-card__tags::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(28px, 6vw, 56px);
  right: clamp(28px, 6vw, 56px);
  height: 1px;
  background: var(--outline, #d5d7e3);
}

.cctrl-blog-card__tags-label {
  font-size: 0.85rem;
  color: var(--muted, #667085);
  font-weight: 500;
}

.cctrl-blog-card__tag {
  display: inline-block;
  padding: 6px 14px;
  background: var(--lav-100, #f3f4fb);
  color: var(--lav-700, #515289);
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 999px;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}

.cctrl-blog-card__tag:hover {
  background: var(--lav-200, #e5e7f5);
  color: var(--lav-800, #464770);
  text-decoration: none !important;
}

/* Tag-pill endast för faktiska tagg-länkar (.tag-links) på public – inte andra länkar */
.is-public .tag-links a {
  display: inline-block;
  padding: 6px 14px;
  background: var(--lav-100, #f3f4fb);
  color: var(--lav-700, #515289);
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 999px;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}
.is-public .tag-links a:hover {
  background: var(--lav-200, #e5e7f5);
  color: var(--lav-800, #464770);
  text-decoration: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   BLOG CARD SHARE - Elegant inline design
   ───────────────────────────────────────────────────────────────── */

.cctrl-blog-card__share {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 48px;
  padding-top: 32px;
  padding-bottom: 32px;
}

.cctrl-blog-card__share::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(28px, 6vw, 56px);
  right: clamp(28px, 6vw, 56px);
  height: 1px;
  background: var(--outline, #d5d7e3);
}

/* Divider under Dela artikeln (innan author box) */
.cctrl-blog-card__share::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: clamp(28px, 6vw, 56px);
  right: clamp(28px, 6vw, 56px);
  height: 1px;
  background: var(--outline, #d5d7e3);
}

.cctrl-blog-card__share-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted, #667085);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cctrl-blog-card__share-buttons {
  display: flex;
  gap: 6px;
}

.cctrl-blog-card__share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--muted, #667085);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
}

.cctrl-blog-card__share-btn svg {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}

.cctrl-blog-card__share-btn:hover {
  background: var(--lav-100, #f3f4fb);
  color: var(--lav-600, #55578f);
  text-decoration: none;
  transform: translateY(-2px);
}

.cctrl-blog-card__share-btn--copy {
  background: rgba(98, 100, 167, 0.08) !important; /* Synligare */
  color: var(--lav-600, #55578f) !important;
}

.cctrl-blog-card__share-btn--copy svg {
  color: currentColor;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.cctrl-blog-card__share-btn--copy.copied {
  background: rgba(34, 197, 94, 0.1) !important;
  color: #22c55e;
}

.cctrl-blog-card__share-btn--copy.copied svg {
  color: #22c55e;
  stroke: #22c55e;
}

/* ─────────────────────────────────────────────────────────────────
   BLOG CARD AUTHOR BIO - Clean editorial style
   ───────────────────────────────────────────────────────────────── */

.cctrl-blog-card__author-bio {
  position: relative;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: 32px;
  padding: 32px clamp(28px, 6vw, 56px) 0;
  /* Samma sidpadding som bloggtexten (cctrl-blog-card__content) */
  padding-inline: clamp(28px, 6vw, 56px) !important;
}
.cctrl-blog-card__author-bio::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(28px, 6vw, 56px);
  right: clamp(28px, 6vw, 56px);
  height: 1px;
  background: var(--outline, #d5d7e3);
}

.cctrl-blog-card__author-bio-avatar {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0;
  border: 2px solid var(--lav-100, #f3f4fb);
}

.cctrl-blog-card__author-bio-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
  padding-inline: 0;
}

.cctrl-blog-card__author-bio-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--lav-900, #3d3e66);
  margin: 0;
}

.cctrl-blog-card__author-bio-text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted, #667085);
  margin: 0;
}

.cctrl-blog-card__author-bio-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--lav-500, #6264a7);
  text-decoration: none;
  transition: color 0.15s ease;
  margin-top: 4px;
}

.cctrl-blog-card__author-bio-link:hover {
  color: var(--lav-600, #55578f);
  text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────────
   RELATED POSTS SECTION - Clean list design
   ───────────────────────────────────────────────────────────────── */

.cctrl-related-posts {
  max-width: 700px;
  margin: 0 auto var(--space-8, 64px);
  padding: 0 clamp(16px, 4vw, 48px);
}

.cctrl-related-posts__title {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted, #667085);
  margin-bottom: 12px;
}

/* Grid använder .cctrl-cards-grid – samma styling som arkiv. */
.cctrl-related-posts__grid.cctrl-cards-grid {
  margin-bottom: var(--space-6, 48px);
}

.cctrl-related-posts__actions {
  margin: 0;
  text-align: center;
}

.cctrl-related-posts .card__media {
  display: block;
  text-decoration: none;
  color: inherit;
}

.cctrl-related-posts .card__media img {
  vertical-align: top;
}

.cctrl-related-posts__card {
  display: flex;
  align-items: center; /* Vertically center image with text */
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--outline, #d5d7e3);
  background: transparent;
  transition: background 0.15s ease;
}

.cctrl-related-posts__card:hover {
  background: var(--lav-50, #f8f9ff);
  margin: 0 -16px;
  padding: 16px 16px;
  border-radius: 8px;
}

.cctrl-related-posts__card:last-child {
  border-bottom: none;
}

.cctrl-related-posts__card-image {
  display: block;
  width: 100px;
  height: 68px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 8px;
}

.cctrl-related-posts__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.cctrl-related-posts__card:hover .cctrl-related-posts__img {
  transform: scale(1.05);
}

.cctrl-related-posts__card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

/* Category as pill - matching blog header style */
.cctrl-related-posts__category {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 12px;
  background: var(--lav-500, #6264a7);
  color: #ffffff !important;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.cctrl-related-posts__category:hover {
  background: var(--lav-600, #55578f);
  color: #ffffff !important;
  text-decoration: none;
}

.cctrl-related-posts__card-title {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.cctrl-related-posts__card-title a {
  color: var(--lav-900, #3d3e66);
  text-decoration: none;
  transition: color 0.15s ease;
}

.cctrl-related-posts__card-title a:hover {
  color: var(--lav-500, #6264a7);
}

.cctrl-related-posts__excerpt {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--muted, #667085);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cctrl-related-posts__date {
  font-size: 0.75rem;
  color: var(--muted, #667085);
}

/* Related posts responsive */
@media (max-width: 600px) {
  .cctrl-related-posts__card {
    gap: 12px;
  }
  
  .cctrl-related-posts__card-image {
    width: 80px;
    height: 54px;
  }
  
  .cctrl-related-posts__card-title {
    font-size: 0.85rem;
  }
  
  .cctrl-related-posts__category {
    padding: 3px 10px;
    font-size: 0.6rem;
  }
  
  .cctrl-blog-card__share {
    flex-wrap: wrap;
  }
  
  .cctrl-blog-card__author-bio {
    gap: 16px;
  }
}

/* ─────────────────────────────────────────────────────────────────
   BLOG CARD BODY - Content auto-styling
   ───────────────────────────────────────────────────────────────── */
.cctrl-blog-card__body,
.cctrl-blog-card .entry-content,
.cctrl-blog-card .elementor-widget-theme-post-content,
.cctrl-blog-card .elementor-widget-text-editor {
  font-size: 1.0625rem !important;
  line-height: 1.75 !important;
  color: var(--text) !important;
}

/* Headings in content */
.cctrl-blog-card__body h2,
.cctrl-blog-card h2 {
  font-family: var(--font-heading, "Cooper Hewitt", system-ui, sans-serif) !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--lav-900) !important;
  margin: 40px 0 16px !important;
}

.cctrl-blog-card__body h3,
.cctrl-blog-card h3 {
  font-family: var(--font-heading, "Cooper Hewitt", system-ui, sans-serif) !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--lav-900) !important;
  margin: 32px 0 12px !important;
}

.cctrl-blog-card__body h4,
.cctrl-blog-card h4 {
  font-family: var(--font-heading, "Cooper Hewitt", system-ui, sans-serif) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--lav-900) !important;
  margin: 24px 0 8px !important;
}

/* First heading - no top margin */
.cctrl-blog-card__body > h2:first-child {
  margin-top: 0 !important;
}

/* Paragraphs */
.cctrl-blog-card__body p,
.cctrl-blog-card p {
  margin: 0 0 1.4em !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Lead paragraph */
.cctrl-blog-card__body > p:first-of-type {
  font-size: 1.1em !important;
  line-height: 1.65 !important;
}

/* Lists */
.cctrl-blog-card__body ul,
.cctrl-blog-card__body ol,
.cctrl-blog-card ul,
.cctrl-blog-card ol {
  margin: 0 0 1.5em !important;
  padding-left: 1.5em !important;
}

.cctrl-blog-card__body li,
.cctrl-blog-card li {
  margin-bottom: 0.6em !important;
  line-height: 1.65 !important;
}

/* Links */
.cctrl-blog-card__body a,
.cctrl-blog-card a:not(.cctrl-blog-card__category) {
  color: var(--lav-700, #4a4b80);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  text-decoration-color: color-mix(in srgb, var(--lav-500), transparent 50%);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.cctrl-blog-card__body a:hover {
  color: var(--lav-500);
  text-decoration-color: var(--lav-500);
}

/* Images in content */
.cctrl-blog-card__body img,
.cctrl-blog-card__body figure {
  max-width: 100%;
  height: auto;
  margin: 32px 0;
  border-radius: var(--radius-md, 8px);
}

.cctrl-blog-card__body figure {
  margin: 40px 0;
}

.cctrl-blog-card__body figure img {
  margin: 0;
  display: block;
}

.cctrl-blog-card__body figcaption {
  font-size: 0.875rem;
  color: var(--muted);
  text-align: center;
  margin-top: 12px;
  font-style: italic;
}

/* Blockquotes */
.cctrl-blog-card__body blockquote {
  margin: 32px 0;
  padding: 0 0 0 24px;
  border-left: 3px solid var(--lav-300);
  font-size: 1.05em;
  font-style: italic;
  color: var(--muted);
}

/* Code */
.cctrl-blog-card__body code {
  font-family: var(--font-mono, "SF Mono", Consolas, monospace);
  font-size: 0.9em;
  background: var(--lav-50, #f8f9ff);
  padding: 2px 6px;
  border-radius: 4px;
}

.cctrl-blog-card__body pre {
  margin: 32px 0;
  padding: 20px 24px;
  background: var(--lav-900);
  color: #f8f9ff;
  border-radius: var(--radius-md, 8px);
  overflow-x: auto;
  font-size: 0.9rem;
  line-height: 1.5;
}

.cctrl-blog-card__body pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}

/* Horizontal rules */
.cctrl-blog-card__body hr {
  border: none;
  border-top: 1px solid var(--outline);
  margin: 48px 0;
}

/* Tables */
.cctrl-blog-card__body table {
  width: 100%;
  margin: 32px 0;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.cctrl-blog-card__body th,
.cctrl-blog-card__body td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--outline);
}

.cctrl-blog-card__body th {
  font-weight: 600;
  color: var(--lav-900);
  background: var(--lav-50);
}

/* ─────────────────────────────────────────────────────────────────
   ELEMENTOR INTEGRATION
   ───────────────────────────────────────────────────────────────── */

/* Reset Elementor containers – max-width, inget globalt padding-reset */
.cctrl-blog-card .elementor-container,
.cctrl-blog-card .elementor-row,
.cctrl-blog-card .elementor-column,
.cctrl-blog-card .elementor-column-wrap,
.cctrl-blog-card .elementor-widget-wrap,
.cctrl-blog-card .e-con-inner {
  max-width: 100% !important;
  width: 100% !important;
}

/* Bildområde – ingen padding (featured image edge-to-edge) */
.cctrl-blog-card .e-con:has(.elementor-widget-theme-post-featured-image):not(:has(.elementor-widget-theme-post-content)),
.cctrl-blog-card > .elementor .elementor-section:first-child .e-con,
.cctrl-blog-card > .elementor .elementor-section:first-child .elementor-container {
  padding: 0 !important;
  margin: 0 !important;
}

/* Innehållsområde – padding för Post Content, Loop Grid, Button.
   Spec: clamp(24px, 5vw, 48px) vertikalt, clamp(28px, 6vw, 56px) horisontellt (BLOG_SLIM_SPEC).
   Flera selektorer så att padding gäller oavsett Elementor-struktur. */
body.cctrl-blog-layout .cctrl-blog-card .e-con.cctrl-blog-card__content,
body.cctrl-blog-layout .cctrl-blog-card .e-con:has(.elementor-widget-theme-post-content),
body.cctrl-blog-layout .cctrl-blog-card .e-con:has(> .elementor-widget-theme-post-content),
body.cctrl-blog-layout .cctrl-blog-card .e-con:has(.elementor-widget-loop-grid),
body.cctrl-blog-layout .cctrl-blog-card .e-con:has(.elementor-widget-button),
.cctrl-blog-card .e-con.cctrl-blog-card__content,
.cctrl-blog-card .e-con:has(.elementor-widget-theme-post-content),
.cctrl-blog-card .e-con:has(> .elementor-widget-theme-post-content),
.cctrl-blog-card .e-con:has(.elementor-widget-loop-grid),
.cctrl-blog-card .e-con:has(.elementor-widget-button) {
  padding: clamp(24px, 5vw, 48px) clamp(28px, 6vw, 56px) !important;
}


/* ─────────────────────────────────────────────────────────────────
   DARK MODE
   ───────────────────────────────────────────────────────────────── */

html[data-theme="dark"] .cctrl-blog-page,
html[data-theme="dark"] body.cctrl-blog-layout .cctrl-main,
html[data-theme="dark"] body.cctrl-blog-layout.single-post .cctrl-main {
  background: var(--bg, #151726) !important;
}

html[data-theme="dark"] .cctrl-blog-card {
  background: var(--bg-elev, #1e2132);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .cctrl-breadcrumb a,
html[data-theme="dark"] .cctrl-breadcrumb {
  color: var(--muted);
}

html[data-theme="dark"] .cctrl-breadcrumb a:hover {
  color: var(--lav-400);
}

html[data-theme="dark"] .cctrl-blog-card__title,
html[data-theme="dark"] .cctrl-blog-card h1,
html[data-theme="dark"] .cctrl-blog-card__body h2,
html[data-theme="dark"] .cctrl-blog-card__body h3,
html[data-theme="dark"] .cctrl-blog-card__body h4 {
  color: #ffffff !important;
}

html[data-theme="dark"] .cctrl-blog-card__body,
html[data-theme="dark"] .cctrl-blog-card p {
  color: var(--text) !important;
}

html[data-theme="dark"] .cctrl-blog-card__author-name {
  color: var(--text);
}

html[data-theme="dark"] .cctrl-blog-card__date {
  color: var(--muted);
}

html[data-theme="dark"] .cctrl-blog-card__avatar {
  border-color: var(--lav-700);
}

html[data-theme="dark"] .cctrl-blog-card__divider {
  border-top-color: var(--outline);
}

html[data-theme="dark"] .cctrl-blog-card__body a {
  color: var(--lav-400);
  text-decoration-color: color-mix(in srgb, var(--lav-400), transparent 50%);
}

/* Dark mode: Tags */
html[data-theme="dark"] .cctrl-blog-card__tags {
  border-top-color: var(--outline);
}

html[data-theme="dark"] .cctrl-blog-card__tag {
  background: var(--lav-800);
  color: var(--lav-200);
}

html[data-theme="dark"] .cctrl-blog-card__tag:hover {
  background: var(--lav-700);
  color: #ffffff;
}

/* Dark mode: Share */
html[data-theme="dark"] .cctrl-blog-card__share {
  border-top-color: var(--outline);
}

html[data-theme="dark"] .cctrl-blog-card__share-btn {
  color: var(--muted);
}

html[data-theme="dark"] .cctrl-blog-card__share-btn:hover {
  background: var(--lav-800);
  color: var(--lav-300);
}

html[data-theme="dark"] .cctrl-blog-card__share-btn--copy {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--lav-300) !important;
}

html[data-theme="dark"] .cctrl-blog-card__share-btn--copy svg {
  color: currentColor;
  stroke: currentColor;
}

/* Dark mode: Author bio */
html[data-theme="dark"] .cctrl-blog-card__author-bio {
  border-top-color: var(--outline);
}

html[data-theme="dark"] .cctrl-blog-card__author-bio-avatar {
  border-color: var(--lav-700);
}

html[data-theme="dark"] .cctrl-blog-card__author-bio-name {
  color: #ffffff;
}

html[data-theme="dark"] .cctrl-blog-card__author-bio-text {
  color: var(--muted);
}

html[data-theme="dark"] .cctrl-blog-card__author-bio-link {
  color: var(--lav-400);
}

html[data-theme="dark"] .cctrl-blog-card__author-bio-link:hover {
  color: var(--lav-300);
}

/* Dark mode: Related posts */
html[data-theme="dark"] .cctrl-related-posts__title {
  color: var(--muted);
}

html[data-theme="dark"] .cctrl-related-posts__card {
  border-bottom-color: var(--outline);
}

html[data-theme="dark"] .cctrl-related-posts__card:hover {
  background: var(--bg-elev, #1e2132);
}

html[data-theme="dark"] .cctrl-related-posts__category {
  background: var(--lav-600);
  color: #ffffff !important;
}

html[data-theme="dark"] .cctrl-related-posts__category:hover {
  background: var(--lav-500);
}

html[data-theme="dark"] .cctrl-related-posts__card-title a {
  color: #ffffff;
}

html[data-theme="dark"] .cctrl-related-posts__card-title a:hover {
  color: var(--lav-400);
}

html[data-theme="dark"] .cctrl-related-posts__date {
  color: var(--muted);
}

html[data-theme="dark"] .cctrl-blog-card__body a:hover {
  color: var(--lav-300);
  text-decoration-color: var(--lav-300);
}

html[data-theme="dark"] .cctrl-blog-card__body blockquote {
  border-left-color: var(--lav-600);
  color: rgba(255, 255, 255, 0.75);
}

html[data-theme="dark"] .cctrl-blog-card__body code {
  background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .cctrl-blog-card__body th {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 840px) {
  .cctrl-blog-card {
    margin-left: var(--space-3, 24px);
    margin-right: var(--space-3, 24px);
    border-radius: 12px;
  }
  
  .cctrl-breadcrumb {
    padding-left: var(--space-3, 24px);
    padding-right: var(--space-3, 24px);
  }
}

@media (max-width: 600px) {
  .cctrl-blog-card {
    --card-padding: 20px;
    margin-left: var(--space-2, 16px);
    margin-right: var(--space-2, 16px);
  }
  
  .cctrl-blog-card__content,
  .cctrl-blog-card .cctrl-blog-card__content {
    --padding-top: 20px !important;
    --padding-bottom: 20px !important;
    --padding-left: 20px !important;
    --padding-right: 20px !important;
    --padding-inline-start: 20px !important;
    --padding-inline-end: 20px !important;
    padding: 20px !important;
  }
  
  .cctrl-blog-card__image,
  .cctrl-blog-card > img:first-child {
    max-height: 280px !important;
  }
  
  .cctrl-blog-card__title,
  .cctrl-blog-card h1 {
    font-size: clamp(1.5rem, 5vw, 1.875rem) !important;
  }
  
  .cctrl-blog-card__author {
    flex-wrap: wrap;
  }
  
  .cctrl-breadcrumb {
    padding-left: var(--space-2, 16px);
    padding-right: var(--space-2, 16px);
    font-size: 0.8125rem;
  }
}

/* ─────────────────────────────────────────────────────────────────
   LEGACY - .cctrl-blog (använd .cctrl-blog-card för Single Post)
   ───────────────────────────────────────────────────────────────── */

/* VIKTIGT: För Single Post, använd .cctrl-blog-card (inte cctrl-blog). cctrl-blog-card
   ger vit kart, 700px, padding och featured image. cctrl-blog är enklare layout utan kort. */

/* Blog wrapper – 700px, använd endast när du INTE använder cctrl-blog-card. */
.cctrl-blog,
.cctrl-blog.elementor-section,
.elementor-section.cctrl-blog,
section.cctrl-blog {
  --blog-width: 700px;
  --blog-width-wide: 700px;
  --blog-spacing: clamp(24px, 5vw, 48px);
  
  max-width: var(--blog-width) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: var(--blog-spacing) !important;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  box-sizing: border-box;
}

/* Override Elementor containers inside .cctrl-blog (ej när cctrl-blog-card finns – då vinner card-reglerna) */
.cctrl-blog:not(:has(.cctrl-blog-card)) .elementor-container,
.cctrl-blog:not(:has(.cctrl-blog-card)) .elementor-row,
.cctrl-blog:not(:has(.cctrl-blog-card)) .elementor-column,
.cctrl-blog:not(:has(.cctrl-blog-card)) .elementor-column-wrap,
.cctrl-blog:not(:has(.cctrl-blog-card)) .elementor-widget-wrap,
.cctrl-blog:not(:has(.cctrl-blog-card)) .e-con,
.cctrl-blog:not(:has(.cctrl-blog-card)) .e-con-inner,
.cctrl-blog:not(:has(.cctrl-blog-card)) > .elementor-container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.cctrl-blog .cctrl-section {
  width: 100%;
  max-width: 100%;
}
.cctrl-blog .cctrl-container {
  max-width: var(--content-max-blog, 700px);
  margin-inline: auto;
  padding-inline: var(--section-pad-x);
  padding-block: clamp(var(--space-4), 4vw, var(--space-6));
}

/* ─────────────────────────────────────────────────────────────────
   BLOG HEADER (featured image, category, title, meta)
   ───────────────────────────────────────────────────────────────── */

.cctrl-blog__header {
  margin-bottom: 48px;
  text-align: left;
}

/* Featured image - constrained, not overwhelming */
.cctrl-blog__header img,
.cctrl-blog > img:first-child,
.cctrl-blog__featured-image,
.cctrl-blog .wp-post-image,
.cctrl-blog .elementor-widget-image img,
.cctrl-blog .elementor-image img,
.cctrl-blog [class*="featured"] img {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 350px !important;
  object-fit: cover !important;
  border-radius: var(--radius-md, 8px) !important;
  margin: 0 auto 32px !important;
  display: block !important;
}

/* Category / Term - subtle metadata */
.cctrl-blog__term,
.cctrl-blog .cat-links,
.cctrl-blog .entry-category,
.cctrl-blog .elementor-widget-theme-post-info,
.cctrl-blog .elementor-post-info,
.cctrl-blog [class*="post-terms"],
.cctrl-blog [class*="category"] {
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--muted) !important;
  opacity: 0.65 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.cctrl-blog .elementor-post-info__terms-list,
.cctrl-blog .elementor-post-info__item {
  font-size: inherit !important;
  color: inherit !important;
}

.cctrl-blog__term a,
.cctrl-blog .cat-links a,
.cctrl-blog .elementor-post-info a {
  color: inherit !important;
  text-decoration: none !important;
}

.cctrl-blog__term a:hover,
.cctrl-blog .cat-links a:hover,
.cctrl-blog .elementor-post-info a:hover {
  color: var(--lav-600) !important;
  opacity: 1 !important;
}

/* Blog title (H1) - editorial, not hero */
.cctrl-blog h1,
.cctrl-blog__title,
.cctrl-blog .entry-title,
.cctrl-blog .elementor-heading-title,
.cctrl-blog .elementor-widget-heading h1,
.cctrl-blog .elementor-widget-theme-post-title h1,
.cctrl-blog .elementor-widget-theme-post-title .elementor-heading-title {
  font-family: var(--font-heading, "Cooper Hewitt", system-ui, sans-serif) !important;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  color: var(--lav-900) !important;
  margin: 0 0 16px !important;
  text-align: left !important;
}


/* Post meta (date, author) - quiet */
.cctrl-blog__meta,
.cctrl-blog .entry-meta,
.cctrl-blog .post-meta {
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 32px;
}

.cctrl-blog__meta a,
.cctrl-blog .entry-meta a {
  color: inherit;
  text-decoration: none;
}

.cctrl-blog__meta a:hover,
.cctrl-blog .entry-meta a:hover {
  color: var(--lav-600);
}

/* ─────────────────────────────────────────────────────────────────
   BLOG CONTENT - Auto-styled elements
   Redaktör skriver bara text, allt stylas automatiskt
   ───────────────────────────────────────────────────────────────── */

.cctrl-blog__content,
.cctrl-blog .entry-content,
.cctrl-blog article,
.cctrl-blog .elementor-widget-theme-post-content,
.cctrl-blog .elementor-widget-theme-post-content .elementor-widget-container,
.cctrl-blog .elementor-widget-text-editor,
.cctrl-blog .elementor-widget-text-editor .elementor-widget-container {
  font-size: 1.0625rem !important;
  line-height: 1.75 !important;
  color: var(--text) !important;
}

/* Headings - calm, guiding, not shouting */
.cctrl-blog h2,
.cctrl-blog .elementor-widget-text-editor h2 {
  font-family: var(--font-heading, "Cooper Hewitt", system-ui, sans-serif) !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--lav-900) !important;
  margin: 48px 0 16px !important;
}

.cctrl-blog h3,
.cctrl-blog .elementor-widget-text-editor h3 {
  font-family: var(--font-heading, "Cooper Hewitt", system-ui, sans-serif) !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--lav-900) !important;
  margin: 36px 0 12px !important;
}

.cctrl-blog h4,
.cctrl-blog .elementor-widget-text-editor h4 {
  font-family: var(--font-heading, "Cooper Hewitt", system-ui, sans-serif) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--lav-900) !important;
  margin: 28px 0 8px !important;
}

/* First heading after content start - less top margin */
.cctrl-blog__content > h2:first-child,
.cctrl-blog .entry-content > h2:first-child {
  margin-top: 0;
}

/* Paragraphs - comfortable rhythm */
.cctrl-blog p,
.cctrl-blog .elementor-widget-text-editor p,
.cctrl-blog .elementor-widget-theme-post-content p {
  margin: 0 0 1.4em !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Lead paragraph (first p, or .lead class) */
.cctrl-blog__content > p:first-of-type,
.cctrl-blog .entry-content > p:first-of-type,
.cctrl-blog .elementor-widget-theme-post-content > .elementor-widget-container > p:first-of-type,
.cctrl-blog p.lead {
  font-size: 1.1em !important;
  line-height: 1.65 !important;
  color: var(--text) !important;
}

/* Lists - editorial, not aggressive */
.cctrl-blog ul,
.cctrl-blog ol,
.cctrl-blog .elementor-widget-text-editor ul,
.cctrl-blog .elementor-widget-text-editor ol,
.cctrl-blog .elementor-widget-theme-post-content ul,
.cctrl-blog .elementor-widget-theme-post-content ol {
  margin: 0 0 1.5em !important;
  padding-left: 1.5em !important;
}

.cctrl-blog li,
.cctrl-blog .elementor-widget-text-editor li,
.cctrl-blog .elementor-widget-theme-post-content li {
  margin-bottom: 0.6em !important;
  line-height: 1.65 !important;
}

.cctrl-blog li:last-child {
  margin-bottom: 0 !important;
}

/* Nested lists */
.cctrl-blog ul ul,
.cctrl-blog ol ol,
.cctrl-blog ul ol,
.cctrl-blog ol ul {
  margin-top: 0.5em !important;
  margin-bottom: 0.5em !important;
}

/* Links - subtle, not shouty */
.cctrl-blog a {
  color: var(--lav-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  text-decoration-color: color-mix(in srgb, var(--lav-500), transparent 50%);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.cctrl-blog a:hover {
  color: var(--lav-500);
  text-decoration-color: var(--lav-500);
}

/* Images in content - centered, constrained */
.cctrl-blog img,
.cctrl-blog figure {
  max-width: 100%;
  height: auto;
  margin: 32px 0;
  border-radius: var(--radius-md, 8px);
}

.cctrl-blog figure {
  margin: 40px 0;
}

.cctrl-blog figure img {
  margin: 0;
  display: block;
}

.cctrl-blog figcaption {
  font-size: 0.875rem;
  color: var(--muted);
  text-align: center;
  margin-top: 12px;
  font-style: italic;
}

/* Blockquotes - subtle emphasis */
.cctrl-blog blockquote {
  margin: 32px 0;
  padding: 0 0 0 24px;
  border-left: 3px solid var(--lav-300);
  font-size: 1.05em;
  font-style: italic;
  color: var(--muted);
}

.cctrl-blog blockquote p {
  margin-bottom: 0.75em;
}

.cctrl-blog blockquote p:last-child {
  margin-bottom: 0;
}

.cctrl-blog blockquote cite {
  display: block;
  margin-top: 12px;
  font-size: 0.875rem;
  font-style: normal;
  color: var(--muted);
}

/* Code - inline and blocks */
.cctrl-blog code {
  font-family: var(--font-mono, "SF Mono", Consolas, monospace);
  font-size: 0.9em;
  background: var(--bg-elev, #f5f5f7);
  padding: 2px 6px;
  border-radius: 4px;
}

.cctrl-blog pre {
  margin: 32px 0;
  padding: 20px 24px;
  background: var(--lav-900);
  color: #f8f9ff;
  border-radius: var(--radius-md, 8px);
  overflow-x: auto;
  font-size: 0.9rem;
  line-height: 1.5;
}

.cctrl-blog pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}

/* Horizontal rules */
.cctrl-blog hr {
  border: none;
  border-top: 1px solid var(--outline);
  margin: 48px 0;
}

/* Tables */
.cctrl-blog table {
  width: 100%;
  margin: 32px 0;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.cctrl-blog th,
.cctrl-blog td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--outline);
}

.cctrl-blog th {
  font-weight: 600;
  color: var(--lav-900);
  background: var(--bg-elev);
}

/* ─────────────────────────────────────────────────────────────────
   DARK MODE
   ───────────────────────────────────────────────────────────────── */

html[data-theme="dark"] .cctrl-blog {
  color: var(--fluent-color-neutral-foreground-1, rgba(255, 255, 255, 0.9));
}

html[data-theme="dark"] .cctrl-blog h1,
html[data-theme="dark"] .cctrl-blog h2,
html[data-theme="dark"] .cctrl-blog h3,
html[data-theme="dark"] .cctrl-blog h4,
html[data-theme="dark"] .cctrl-blog__title {
  color: #ffffff;
}

html[data-theme="dark"] .cctrl-blog a {
  color: var(--lav-400);
  text-decoration-color: color-mix(in srgb, var(--lav-400), transparent 50%);
}

html[data-theme="dark"] .cctrl-blog a:hover {
  color: var(--lav-300);
  text-decoration-color: var(--lav-300);
}

html[data-theme="dark"] .cctrl-blog blockquote {
  border-left-color: var(--lav-600);
  color: rgba(255, 255, 255, 0.75);
}

html[data-theme="dark"] .cctrl-blog code {
  background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .cctrl-blog th {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .cctrl-blog {
    font-size: 1rem;
    padding: 20px;
  }
  
  .cctrl-blog h1 {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }
  
  .cctrl-blog h2 {
    font-size: 1.35rem;
    margin-top: 40px;
  }
  
  .cctrl-blog h3 {
    font-size: 1.15rem;
    margin-top: 32px;
  }
  
  .cctrl-blog__header img,
  .cctrl-blog .wp-post-image {
    max-height: 280px;
  }
}

/* ─────────────────────────────────────────────────────────────────
   LEGACY CLASS SUPPORT
   Keep for backwards compatibility
   ───────────────────────────────────────────────────────────────── */

/* Post term / category (standalone usage) */
.cctrl-post-term {
  max-width: 680px;
  margin: 48px auto 8px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.55;
}

/* Post title (standalone usage) */
.cctrl-post-title {
  max-width: 680px;
  margin: 0 auto 32px;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.15;
  font-weight: 600;
}

/* Post content (standalone usage) */
.cctrl-post-content {
  max-width: 700px;
  margin: 0 auto 120px;
  font-size: 1rem;
  line-height: 1.65;
}

.cctrl-post-content h2 {
  margin: 72px 0 16px;
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 600;
}

.cctrl-post-content h3 {
  margin: 48px 0 12px;
  font-size: 1.2rem;
  font-weight: 600;
}

.cctrl-post-content p {
  margin: 0 0 1.2em;
}

.cctrl-post-content ul {
  margin: 0 0 1.5em 1.2em;
  padding: 0;
}

.cctrl-post-content li {
  margin-bottom: 0.5em;
}

.cctrl-post-content a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}


/* 6.2 Figures (images with captions, lightbox-ready) */

.cctrl-figure {
  margin: var(--space-4) 0;
}

.cctrl-figure__image {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cctrl-figure__image img {
  width: 100%;
  height: auto;
  display: block;
}

.cctrl-figure__caption {
  margin-top: var(--space-2);
  font-size: 0.875rem;
  color: var(--muted);
  text-align: center;
}


/* 6.3 Tables */

.cctrl-table-wrapper {
  overflow-x: auto;
  margin: var(--space-4) 0;
}

.cctrl-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.cctrl-table th,
.cctrl-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--outline);
}

.cctrl-table th {
  font-weight: 600;
  color: var(--text);
  background: var(--bg-elev);
}

.cctrl-table tr:hover {
  background: var(--bg-elev);
}


/* 6.4 Content Cards Grid - Blogg, Video, Podcast
   Konsekvent styling för alla tre typerna - tre på rad desktop */

/* Grid container för kort */
.cctrl-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(var(--space-4), 4vw, var(--space-6)); /* Mer utrymme mellan kort */
  list-style: none;
  padding: 0;
  position: relative;
  z-index: 0; /* Lägre än kontaktformuläret (z-index: 10) */
  margin: 0;
}

/* Desktop: tre på rad */
@media (min-width: 1024px) {
  .cctrl-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet: två på rad */
@media (min-width: 768px) and (max-width: 1023px) {
  .cctrl-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: en på rad */
@media (max-width: 767px) {
  .cctrl-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* Gemensam kort-styling för blogg, video, podcast, nyhet – enhetlig padding inkl. illustration */
.cctrl-cards-grid .card,
.cctrl-cards-grid .card--blog,
.cctrl-cards-grid .card--video,
.cctrl-cards-grid .card--podcast,
.cctrl-cards-grid .card--news,
.cctrl-cards-grid .wpra-item,
/* Elementor Loop-kort: sätt klass "card" (ev. card--blog) på mallens ROT. EN KÄLLA för padding = nedan. */
.e-loop-item .card,
.e-loop-item .card--blog,
.e-loop-item .card--video,
.e-loop-item .card--podcast,
.e-loop-item .card--news,
.e-loop-item .card--governance {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--outline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

/* EN KÄLLA loop-kort padding (CURSOR_WORK [loop-card-padding]). */
.e-loop-item .card .e-con-inner,
.e-loop-item .card--blog .e-con-inner,
.e-loop-item .card--video .e-con-inner,
.e-loop-item .card--podcast .e-con-inner,
.e-loop-item .card--news .e-con-inner,
.e-loop-item .card--governance .e-con-inner {
  padding: var(--space-2) var(--space-4);
  gap: 0;
}

/*
 * Loop-padding ovan träffar ALLA .e-con-inner under .card (3 klasser slår .card__media .e-con-inner).
 * Nollställ inuti .card__media så bilden blir kant-i-kant med negativ margin nedan.
 */
.e-loop-item .card .card__media .e-con-inner,
.e-loop-item .card--blog .card__media .e-con-inner,
.e-loop-item .card--video .card__media .e-con-inner,
.e-loop-item .card--podcast .card__media .e-con-inner,
.e-loop-item .card--news .card__media .e-con-inner,
.e-loop-item .card--governance .card__media .e-con-inner {
  padding: 0 !important;
  margin: 0 !important;
}

.e-loop-item .card .card__media .elementor-widget-wrap,
.e-loop-item .card--blog .card__media .elementor-widget-wrap,
.e-loop-item .card--video .card__media .elementor-widget-wrap,
.e-loop-item .card--podcast .card__media .elementor-widget-wrap,
.e-loop-item .card--news .card__media .elementor-widget-wrap,
.e-loop-item .card--governance .card__media .elementor-widget-wrap {
  padding: 0 !important;
  margin: 0 !important;
}

/* Elementor container-widget: kit kan sätta padding på själva .card__media-raden */
.e-loop-item .card .card__media.elementor-element,
.e-loop-item .card--blog .card__media.elementor-element,
.e-loop-item .card--video .card__media.elementor-element,
.e-loop-item .card--podcast .card__media.elementor-element,
.e-loop-item .card--news .card__media.elementor-element,
.e-loop-item .card--governance .card__media.elementor-element {
  padding: 0 !important;
}

.e-loop-item .card.elementor-section > .elementor-container,
.e-loop-item .card--blog.elementor-section > .elementor-container,
.e-loop-item .card--video.elementor-section > .elementor-container,
.e-loop-item .card--podcast.elementor-section > .elementor-container,
.e-loop-item .card--news.elementor-section > .elementor-container,
.e-loop-item .card--governance.elementor-section > .elementor-container {
  padding: var(--space-2) var(--space-4);
}
/* Bloggrubrik i loop-kort: samma som videokort – fet, mörk blå-lila (referens 2026-02-04) */
.e-loop-item .card--blog .card__title,
.e-loop-item .card--blog .elementor-heading-title,
.e-loop-item .card--blog h3,
.e-loop-item .card--blog h4 {
  font-family: "Cooper Hewitt", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--lav-900, #3d3e66) !important;
  /* Tätare mot utdrag (var(--space-2)=16px kändes för luftigt) */
  margin: 0 0 var(--fluent-spacing-xs) 0 !important;
}

/* Rubrik ↔ utdrag: Elementor-widgetar kan lägga margin/padding ovanpå rubrikens margin-bottom */
.e-loop-item .card--blog .elementor-widget-theme-post-excerpt,
.e-loop-item .card--blog .elementor-widget-theme-post-excerpt .elementor-widget-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.e-loop-item .card--blog .elementor-widget-theme-post-excerpt p:first-child,
.e-loop-item .card--blog .elementor-widget-theme-post-excerpt p:first-of-type {
  margin-top: 0 !important;
}

.e-loop-item .card--blog .elementor-widget-heading + .elementor-widget-theme-post-excerpt,
.e-loop-item .card--blog .elementor-widget-theme-post-title + .elementor-widget-theme-post-excerpt,
.e-loop-item .card--blog .elementor-widget-heading + .elementor-widget-text-editor,
.e-loop-item .card--blog .elementor-widget-theme-post-title + .elementor-widget-text-editor {
  margin-top: 0 !important;
}

.e-loop-item .card--blog .elementor-widget-heading + .elementor-widget-text-editor p:first-child,
.e-loop-item .card--blog .elementor-widget-theme-post-title + .elementor-widget-text-editor p:first-child {
  margin-top: 0 !important;
}

/*
 * Loop-mallar utan .card--blog (bara .card): Elementors globala heading får margin-bottom: var(--space-3)
 * och widget-element får vertikal margin – ger stort tomrum mellan titel / post info / utdrag.
 */
.e-loop-item .card .card__body > .e-con-inner {
  row-gap: var(--fluent-spacing-xs) !important;
  column-gap: 0 !important;
}

.e-loop-item .card .card__body .elementor-element {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

.e-loop-item .card .card__body .elementor-widget-heading .elementor-heading-title,
.e-loop-item .card .card__body .elementor-widget-theme-post-title .elementor-heading-title,
.e-loop-item .card .card__body .elementor-widget-theme-post-title a {
  margin: 0 !important;
}

.e-loop-item .card .card__body .elementor-widget-theme-post-info .elementor-widget-container {
  margin: 0 !important;
  padding-block: 0 !important;
}

.e-loop-item .card .card__body .elementor-widget-theme-post-excerpt,
.e-loop-item .card .card__body .elementor-widget-theme-post-excerpt .elementor-widget-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.e-loop-item .card .card__body .elementor-widget-theme-post-excerpt p:first-child,
.e-loop-item .card .card__body .elementor-widget-theme-post-excerpt p:first-of-type,
.e-loop-item .card .card__body .elementor-widget-text-editor p:first-child {
  margin-top: 0 !important;
}

/* Bilden kant-i-kant: negativ margin mot rot-inner padding (samma för .card och .card--blog m.fl.) */
.e-loop-item .card .card__media,
.e-loop-item .card--blog .card__media,
.e-loop-item .card--video .card__media,
.e-loop-item .card--podcast .card__media,
.e-loop-item .card--news .card__media,
.e-loop-item .card--governance .card__media {
  margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-4)) 0 calc(-1 * var(--space-4));
  width: calc(100% + 2 * var(--space-4));
  max-width: none;
  /* Samma som .cctrl-cards-grid: fast 16:9-låda + clip – annars “läcker” <img> med height:100% */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  background-color: var(--bg-elev);
}

/* Loop: utvald bild som <img> (inte bara i grid med .cctrl-cards-grid) */
.e-loop-item .card .card__media img,
.e-loop-item .card--blog .card__media img,
.e-loop-item .card--video .card__media img,
.e-loop-item .card--podcast .card__media img,
.e-loop-item .card--news .card__media img,
.e-loop-item .card--governance .card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.85);
  transition: filter var(--transition-fast);
}

.e-loop-item .card:hover .card__media img,
.e-loop-item .card--blog:hover .card__media img,
.e-loop-item .card--video:hover .card__media img,
.e-loop-item .card--podcast:hover .card__media img,
.e-loop-item .card--news:hover .card__media img,
.e-loop-item .card--governance:hover .card__media img {
  filter: brightness(0.9);
}

/* Pill för kort-typ (i huvudet/media-sektionen) - använd .pill klassen */
.cctrl-cards-grid .card__media .pill,
.cctrl-cards-grid .card--blog .card__media .pill,
.cctrl-cards-grid .card--video .card__media .pill,
.cctrl-cards-grid .card--podcast .card__media .pill,
.cctrl-cards-grid .card--news .card__media .pill {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
}

.cctrl-cards-grid .card:hover,
.cctrl-cards-grid .card--blog:hover,
.cctrl-cards-grid .card--video:hover,
.cctrl-cards-grid .card--podcast:hover,
.cctrl-cards-grid .wpra-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: color-mix(in srgb, var(--outline), var(--lav-200) 35%);
}

/* Loop-kort: padding = ovan på body-rader; .card__media .e-con-inner nollas separat (kant-i-kant). */

/* Media-sektion: INGA rundade hörn på bilden – kortet har overflow:hidden och clipar. (BLOG_SLIM_SPEC) */
.cctrl-cards-grid .card__media,
.cctrl-cards-grid .card--blog .card__media,
.cctrl-cards-grid .card--video .card__media,
.cctrl-cards-grid .card--news .card__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  /* background-color endast – shorthand background: skulle nollställa Elementors background-image på containern */
  background-color: var(--bg-elev);
  position: relative;
  border-radius: 0; /* Kortet har rundade hörn, inte bilden */
}

/* Elementor: utvald bild som container-bakgrund ligger på .card__media.e-con – inner har ofta opak kit-bakgrund som täcker bilden */
.cctrl-cards-grid .card__media.e-con > .e-con-inner,
.cctrl-cards-grid .card--blog .card__media.e-con > .e-con-inner,
.cctrl-cards-grid .card--video .card__media.e-con > .e-con-inner,
.cctrl-cards-grid .card--news .card__media.e-con > .e-con-inner,
.e-loop-item .card .card__media.e-con > .e-con-inner {
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.cctrl-cards-grid .card__media img,
.cctrl-cards-grid .card--blog .card__media img,
.cctrl-cards-grid .card--video .card__media img,
.cctrl-cards-grid .card--news .card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.85); /* Tona ner bilderna lite */
  transition: filter var(--transition-fast);
}

.cctrl-cards-grid .card:hover .card__media img,
.cctrl-cards-grid .card--blog:hover .card__media img,
.cctrl-cards-grid .card--video:hover .card__media img,
.cctrl-cards-grid .card--news:hover .card__media img {
  filter: brightness(0.9); /* Ljusare vid hover */
}

/*
 * Video (cctrl_video) i loop: dölj avatar/rubrik/kanal ovanpå tumnagel.
 * Play kommer från Elementors video-widget (YouTube) – ingen temad ::after här.
 */
.e-loop-item:is(.type-cctrl_video, [data-elementor-post-type="cctrl_video"]) .card__media .elementor-widget-image:not(.elementor-widget-theme-post-featured-image),
.e-loop-item:is(.type-cctrl_video, [data-elementor-post-type="cctrl_video"]) .card__media .elementor-widget-heading,
.e-loop-item:is(.type-cctrl_video, [data-elementor-post-type="cctrl_video"]) .card__media .elementor-widget-theme-post-title,
.e-loop-item:is(.type-cctrl_video, [data-elementor-post-type="cctrl_video"]) .card__media .elementor-widget-theme-post-info,
.e-loop-item:is(.type-cctrl_video, [data-elementor-post-type="cctrl_video"]) .card__media .elementor-widget-author-box,
.e-loop-item:is(.type-cctrl_video, [data-elementor-post-type="cctrl_video"]) .card .e-con:not(.card__body) .elementor-element.elementor-widget-image:not(.elementor-widget-theme-post-featured-image),
.e-loop-item:is(.type-cctrl_video, [data-elementor-post-type="cctrl_video"]) .card .e-con:not(.card__body) .elementor-element.elementor-widget-heading,
.e-loop-item:is(.type-cctrl_video, [data-elementor-post-type="cctrl_video"]) .card .e-con:not(.card__body) .elementor-element.elementor-widget-theme-post-title,
.e-loop-item:is(.type-cctrl_video, [data-elementor-post-type="cctrl_video"]) .card .e-con:not(.card__body) .elementor-element.elementor-widget-theme-post-info,
.e-loop-item:is(.type-cctrl_video, [data-elementor-post-type="cctrl_video"]) .card .e-con:not(.card__body) .elementor-element.elementor-widget-author-box,
.e-loop-item:is(.type-cctrl_video, [data-elementor-post-type="cctrl_video"]) .card > .e-con-inner > .elementor-element.elementor-widget-image:not(.elementor-widget-theme-post-featured-image),
.e-loop-item:is(.type-cctrl_video, [data-elementor-post-type="cctrl_video"]) .card > .e-con-inner > .elementor-element.elementor-widget-heading,
.e-loop-item:is(.type-cctrl_video, [data-elementor-post-type="cctrl_video"]) .card > .e-con-inner > .elementor-element.elementor-widget-theme-post-title,
.e-loop-item:is(.type-cctrl_video, [data-elementor-post-type="cctrl_video"]) .card > .e-con-inner > .elementor-element.elementor-widget-theme-post-info,
.e-loop-item:is(.type-cctrl_video, [data-elementor-post-type="cctrl_video"]) .card > .e-con-inner > .elementor-element.elementor-widget-author-box,
.e-loop-item:is(.type-cctrl_video, [data-elementor-post-type="cctrl_video"]) .card > .e-con-inner > .e-con:not(.card__body) .elementor-element.elementor-widget-image:not(.elementor-widget-theme-post-featured-image),
.e-loop-item:is(.type-cctrl_video, [data-elementor-post-type="cctrl_video"]) .card > .e-con-inner > .e-con:not(.card__body) .elementor-element.elementor-widget-heading,
.e-loop-item:is(.type-cctrl_video, [data-elementor-post-type="cctrl_video"]) .card > .e-con-inner > .e-con:not(.card__body) .elementor-element.elementor-widget-theme-post-title,
.e-loop-item:is(.type-cctrl_video, [data-elementor-post-type="cctrl_video"]) .card > .e-con-inner > .e-con:not(.card__body) .elementor-element.elementor-widget-theme-post-info,
.e-loop-item:is(.type-cctrl_video, [data-elementor-post-type="cctrl_video"]) .card > .e-con-inner > .e-con:not(.card__body) .elementor-element.elementor-widget-author-box {
  display: none !important;
}

/* Video play icon overlay – endast tumnagelkort utan Elementors video-widget */
.cctrl-cards-grid .card--video .card__media::after {
  content: "▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.5rem;
  opacity: 0.9;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.cctrl-cards-grid .card--video:hover .card__media::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

/* YouTube/Elementor Video-widget har egen play – slå av temats ::after */
.card__media:has(.elementor-widget-video)::after {
  content: none !important;
  display: none !important;
}

/* Podcast icon (ersätter media-sektion) - Fluent gradient med flera färger */
.cctrl-cards-grid .card--podcast .card__media,
.cctrl-cards-grid .wpra-item .card__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Fluent gradient: radial-gradient med flera färger - mjuk övergång */
  background: radial-gradient(
    circle at 30% 30%,
    var(--wave-song-500) 0%,
    color-mix(in srgb, var(--wave-song-500) 70%, var(--lav-500) 30%) 25%,
    color-mix(in srgb, var(--lav-500) 60%, var(--terracotta-500) 40%) 50%,
    color-mix(in srgb, var(--terracotta-500) 50%, var(--ocean-poetry-500) 50%) 75%,
    var(--ocean-poetry-900) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cctrl-cards-grid .card--podcast .card__media::before,
.cctrl-cards-grid .wpra-item::before {
  content: "🎧";
  font-size: 3rem;
  color: #ffffff;
  z-index: 1;
}

/* Body-sektion (rubrik, beskrivning, metadata) – padding kommer från .card */
.cctrl-cards-grid .card__body,
.cctrl-cards-grid .card--blog .card__body,
.cctrl-cards-grid .card--video .card__body,
.cctrl-cards-grid .card--podcast .card__body,
.cctrl-cards-grid .card--news .card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-3) 0 0;
  gap: var(--space-3);
}

.cctrl-cards-grid .card__title,
.cctrl-cards-grid .card--blog .card__title,
.cctrl-cards-grid .card--video .card__title,
.cctrl-cards-grid .card--podcast .card__title,
.cctrl-cards-grid .card--news .card__title,
.cctrl-cards-grid .wpra-item > a:first-of-type {
  font-family: "Cooper Hewitt", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.25rem; /* Större för snyggare rubrik */
  font-weight: 700; /* Tjockare */
  line-height: 1.3; /* Bättre line-height */
  color: var(--text);
  text-decoration: none;
  margin: 0; /* Reset margin */
  margin-top: 0; /* Body har redan padding, första element behöver ingen extra top */
  padding: 0 0 var(--space-2) 0;
  transition: color var(--transition-fast);
  letter-spacing: -0.01em; /* Tätare spacing för elegance */
  display: block;
  box-sizing: border-box; /* Säkerställ att padding ingår i width */
}

.cctrl-cards-grid .card__title:hover,
.cctrl-cards-grid .card--blog .card__title:hover,
.cctrl-cards-grid .card--video .card__title:hover,
.cctrl-cards-grid .card--podcast .card__title:hover,
.cctrl-cards-grid .wpra-item > a:first-of-type:hover {
  color: var(--lav-600);
}

/* Beskrivning/text */
.cctrl-cards-grid .card__description,
.cctrl-cards-grid .card--blog .card__description,
.cctrl-cards-grid .card--video .card__description,
.cctrl-cards-grid .card--podcast .card__description,
.cctrl-cards-grid .card--news .card__description {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  padding: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Metadata (datum, kategori, etc.) */
.cctrl-cards-grid .card__meta,
.cctrl-cards-grid .card--blog .card__meta,
.cctrl-cards-grid .card--video .card__meta,
.cctrl-cards-grid .card--podcast .card__meta,
.cctrl-cards-grid .card--news .card__meta,
.cctrl-cards-grid .wpra-item .wprss-feed-meta {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: auto;
  padding: var(--space-2) 0 0;
}

.cctrl-cards-grid .card__meta span,
.cctrl-cards-grid .wpra-item .wprss-feed-meta span {
  display: inline;
}

.cctrl-cards-grid .card__meta span:not(:last-child)::after,
.cctrl-cards-grid .wpra-item .wprss-feed-meta span:not(:last-child)::after {
  content: " · ";
  margin: 0 0.25rem;
}

/* Footer-sektion (knappar, länkar, audio player) */
.cctrl-cards-grid .card__footer,
.cctrl-cards-grid .card--blog .card__footer,
.cctrl-cards-grid .card--video .card__footer,
.cctrl-cards-grid .card--podcast .card__footer,
.cctrl-cards-grid .card--news .card__footer {
  padding: var(--space-2) 0 0; /* Body har redan padding, footer följer samma inre kant */
  margin-top: auto;
  border-top: none; /* Ingen rand i kortets fot */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* Blogg footer - "Läs mer" och "Dela" */
.cctrl-cards-grid .card--blog .card__footer {
  justify-content: space-between;
}

.cctrl-cards-grid .card--blog .card__footer .card__footer-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.cctrl-cards-grid .card--blog .card__footer .btn--link {
  font-size: 0.875rem;
  color: var(--lav-600);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.cctrl-cards-grid .card--blog .card__footer .btn--link:hover {
  background: var(--lav-100);
  color: var(--lav-700);
}

/* Audio player (för podcast) - i footer, tightare till botten */
.cctrl-cards-grid .card--podcast .card__footer,
.cctrl-cards-grid .wpra-item .card__footer {
  flex-direction: column;
  align-items: stretch;
  padding-top: var(--space-2); /* Tightare padding */
  padding-bottom: var(--space-3); /* Tightare till botten */
}

.cctrl-cards-grid .card--podcast .card__footer audio,
.cctrl-cards-grid .wpra-item .wpra-feed-audio audio,
.cctrl-cards-grid .wpra-item .card__footer audio {
  width: 100%;
  border-radius: var(--radius-sm);
  margin: 0;
}

/* Dark mode: poddkort – mörk bakgrund, ljus text så rubriker går att läsa */
html[data-theme="dark"] .card--podcast,
html[data-theme="dark"] .e-loop-item .card--podcast,
html[data-theme="dark"] .cctrl-cards-grid .card--podcast {
  background: var(--bg-elev, #1e2132) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .card--podcast .card__body,
html[data-theme="dark"] .e-loop-item .card--podcast .card__body,
html[data-theme="dark"] .e-loop-item .card--podcast .e-con-inner {
  background: transparent !important;
}

html[data-theme="dark"] .card--podcast .card__title,
html[data-theme="dark"] .card--podcast .elementor-heading-title,
html[data-theme="dark"] .e-loop-item .card--podcast .card__title,
html[data-theme="dark"] .e-loop-item .card--podcast .elementor-heading-title,
html[data-theme="dark"] .cctrl-cards-grid .card--podcast .card__title {
  color: #ffffff !important;
}

html[data-theme="dark"] .card--podcast .card__title:hover,
html[data-theme="dark"] .e-loop-item .card--podcast .card__title:hover,
html[data-theme="dark"] .cctrl-cards-grid .card--podcast .card__title:hover {
  color: var(--lav-300, #b8b9d9) !important;
}

html[data-theme="dark"] .card--podcast .card__description,
html[data-theme="dark"] .e-loop-item .card--podcast .card__description,
html[data-theme="dark"] .cctrl-cards-grid .card--podcast .card__description {
  color: rgba(255, 255, 255, 0.8) !important;
}

html[data-theme="dark"] .card--podcast .card__meta,
html[data-theme="dark"] .e-loop-item .card--podcast .card__meta,
html[data-theme="dark"] .cctrl-cards-grid .card--podcast .card__meta {
  color: rgba(255, 255, 255, 0.65) !important;
}

html[data-theme="dark"] .card--podcast .card__meta time {
  color: inherit;
}

/* ===================================================================
   RSS AGGREGATOR STYLING - SIMPLE & CLEAN
   ===================================================================
   
   Enkel, kompakt styling för RSS Aggregator feeds.
   Layout: 3 kolumner desktop, 2 tablet, 1 mobil
   Uppdaterad: 2026-01-18
   
   ================================================================== */

/* Feed list - responsiv grid */
.wpra-item-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Tablet: 2 kolumner */
@media (min-width: 640px) {
  .wpra-item-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
}

/* Desktop: 3 kolumner */
@media (min-width: 1024px) {
  .wpra-item-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Feed item - enkelt kort */
.wpra-item-list .wpra-item {
  display: block;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elev);
  border: 1px solid var(--outline);
  border-radius: var(--radius-md);
  transition: 
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.wpra-item-list .wpra-item:hover {
  border-color: var(--lav-300);
  box-shadow: 0 2px 8px rgba(61, 62, 102, 0.08);
}

/* Titel - länk */
.wpra-item-list .wpra-item > a:first-of-type {
  display: block;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  text-decoration: none;
  margin-bottom: var(--space-2);
}

.wpra-item-list .wpra-item > a:first-of-type:hover {
  color: var(--lav-600);
}

/* Metadata - källa och datum */
.wpra-item-list .wpra-item .wprss-feed-meta {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.4;
}

.wpra-item-list .wpra-item .wprss-feed-meta span:not(:last-child)::after {
  content: " · ";
  margin: 0 0.2rem;
}

/* Audio player (om finns) */
.wpra-item-list .wpra-item .wpra-feed-audio {
  margin-top: var(--space-2);
}

.wpra-item-list .wpra-item .wpra-feed-audio audio {
  width: 100%;
  height: 32px;
  border-radius: var(--radius-sm);
}

/* ===================================================================
   PODCAST CARD LAYOUT FIX
   - Dölj poddnamn (source name)
   - Visa endast datum (utan länk)
   ================================================================== */

/* Dölj source name i podcast-kort (behåll datum) */
.cctrl-cards-grid .card--podcast .card__meta a,
.cctrl-cards-grid .wpra-item .wprss-feed-meta a,
.wpra-item-list .wpra-item .wprss-feed-meta a,
.e-loop-item .elementor-post__meta a[href*="source"],
.e-loop-item .podcast-source,
.e-loop-item .podcast-source-name,
.card--podcast .podcast-source-name {
  display: none !important;
}

/* Elementor loop items: dölj source name widget */
.e-loop-item[data-post_type="wprss_feed_item"] .elementor-widget-theme-post-custom-field:has([data-setting*="source"]),
.e-loop-item .elementor-element:has(.podcast-source) {
  display: none !important;
}

/* Ta bort separator när source name är dold */
.cctrl-cards-grid .card--podcast .card__meta span:first-child::after,
.cctrl-cards-grid .wpra-item .wprss-feed-meta span:first-child::after,
.wpra-item-list .wpra-item .wprss-feed-meta span:first-child::after {
  display: none;
}

/* Datum utan länk - stil för muted text */
.cctrl-cards-grid .card--podcast .card__meta span:last-child,
.cctrl-cards-grid .wpra-item .wprss-feed-meta span:last-child,
.wpra-item-list .wpra-item .wprss-feed-meta span:last-child {
  color: var(--muted);
  text-decoration: none;
}

/* Elementor Loop Item: Podcast-kort med card--podcast klass */
.e-loop-item .card--podcast .card__footer > a,
.e-loop-item .card--podcast .podcast-meta a:first-child,
.e-loop-item .card--podcast .elementor-widget-wrap > .elementor-element:last-child a:first-child {
  display: none !important;
}

/* Om meta är i en flex-container, ta bort gap för hidden element */
.e-loop-item .card--podcast .card__footer,
.e-loop-item .card--podcast .podcast-meta {
  gap: 0;
}

/* Säkerställ att datum visas korrekt */
.e-loop-item .card--podcast .card__footer > span,
.e-loop-item .card--podcast .podcast-meta span:not(:has(a)),
.e-loop-item .card--podcast time {
  color: var(--terracotta-500);
  font-size: 0.875rem;
  font-weight: 500;
}

/* ===================================================================
   BYGGSTENAR LOOP ITEMS – konsekvent bildvisning, inte för höga/smala
   Container = samma bredd som sektioner ovan (cctrl-elementor.css).
   Kort: bredare bildproportion (3/2), begränsad beskrivningshöjd, samma padding som övriga kort.
   ================================================================== */

/* Byggsten-loop: bild 3/2 (bredare, mindre hög än 4/3) så att kort inte känns för höga. */
.e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-widget-image,
.e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-widget-theme-post-featured-image,
.e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-widget-image .elementor-widget-container,
.e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-widget-theme-post-featured-image .elementor-widget-container {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  display: block;
}

.e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-widget-image img,
.e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-widget-theme-post-featured-image img,
.e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-widget-image .elementor-image img,
.e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-widget-theme-post-featured-image .elementor-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Byggstenar-kort: padding styrs nu av temat för alla kort (.card__body i cctrl-elementor.css), inte här. */
.e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .card__description,
.e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-widget-text-editor,
.e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-widget-theme-post-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}
.e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .card__title,
.e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-heading-title {
  font-size: 1.125rem;
  line-height: 1.3;
  margin-bottom: var(--space-1);
}

/* Dark mode: byggstenar-sektion – rubrik "Våra byggstenar" ljus, kort mörka */
html[data-theme="dark"] .cctrl-section:has(.e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"])) .elementor-heading-title,
html[data-theme="dark"] .cctrl-section:has(.e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"])) h2 {
  color: #ffffff !important;
}

html[data-theme="dark"] .cctrl-section:has(.e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"])) .elementor-widget-text-editor,
html[data-theme="dark"] .cctrl-section:has(.e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"])) .elementor-widget-text-editor p {
  color: var(--muted, rgba(255, 255, 255, 0.75)) !important;
}

html[data-theme="dark"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) {
  background: var(--bg-elev, #1e2132) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .e-con {
  background: transparent !important;
}

html[data-theme="dark"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .card__title,
html[data-theme="dark"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-heading-title {
  color: #ffffff !important;
}

html[data-theme="dark"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .card__description,
html[data-theme="dark"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-widget-text-editor,
html[data-theme="dark"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-widget-theme-post-excerpt {
  color: var(--muted, rgba(255, 255, 255, 0.75)) !important;
}

html[data-theme="dark"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-widget-image,
html[data-theme="dark"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-widget-theme-post-featured-image {
  border-radius: var(--radius-md, 12px) var(--radius-md, 12px) 0 0;
  overflow: hidden;
}

/* Rot-elementet (.elementor.e-loop-item) får ytan – undvik vit bakgrund från Kit */
html[data-theme="dark"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]).elementor {
  background: var(--bg-elev, #1e2132) !important;
}

html[data-theme="dark"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-widget-wrap,
html[data-theme="dark"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-widget-container {
  background: transparent !important;
}

/* Loop Carousel (swiper): vit slide runt kort */
html[data-theme="dark"] .swiper-slide:has(.e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"])) {
  background: transparent !important;
}

/* Rubriker i samma sektion som byggsten-loop (även utan .cctrl-section) */
html[data-theme="dark"] body.is-public .elementor-section:has(.e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"])) .elementor-heading-title,
html[data-theme="dark"] body.is-public .elementor-section:has(.e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"])) h2 {
  color: #ffffff !important;
}

/* Fallback: alla loop-kort med featured image i toppen (t.ex. byggstenar utan type-klass i äldre markup) */
.e-loop-item .elementor-widget-image:first-child .elementor-widget-container,
.e-loop-item .elementor-widget-theme-post-featured-image:first-child .elementor-widget-container {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.e-loop-item .elementor-widget-image:first-child img,
.e-loop-item .elementor-widget-theme-post-featured-image:first-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* ===================================================================
   PAGINATION - Modern och ren
   ================================================================== */

.wpra-nav-links,
.wpra-default-nav-links,
.nav-links {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: var(--space-6) !important;
  padding-top: var(--space-5) !important;
  flex-wrap: wrap !important;
}

/* Reset för alla nav-links children */
.wpra-nav-links > *,
.wpra-default-nav-links > *,
.nav-links > * {
  flex: 0 0 auto !important;
}

/* Bas-styling för LÄNKAR (klickbara sidor) */
.wpra-nav-links a,
.wpra-default-nav-links a,
.nav-links a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  font-family: var(--font-body) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: var(--lav-700) !important;
  text-decoration: none !important;
  background: #ffffff !important;
  border: 1px solid var(--lav-300) !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* Hover för länkar */
.wpra-nav-links a:hover,
.wpra-default-nav-links a:hover,
.nav-links a:hover {
  background: var(--lav-100) !important;
  border-color: var(--lav-500) !important;
  color: var(--lav-800) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(98, 100, 167, 0.2) !important;
}

/* AKTIV SIDA - span utan länk (WP RSS Aggregator) */
.wpra-nav-links > span:not(.screen-reader-text),
.wpra-nav-links.numbered > span,
.nav-links span.current,
.nav-links span.page-numbers.current {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  font-family: var(--font-body) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  /* AKTIV STYLING - lila bakgrund */
  background: var(--lav-500) !important;
  border: 1px solid var(--lav-500) !important;
  color: #ffffff !important;
  cursor: default !important;
  box-shadow: 0 2px 4px rgba(98, 100, 167, 0.3) !important;
}

/* Prev/Next-knappar - bredare */
.wpra-nav-links a:first-of-type,
.wpra-nav-links a:last-of-type,
.nav-links a.prev,
.nav-links a.next {
  padding: 0 16px !important;
  min-width: auto !important;
}

/* Dots (...) */
.nav-links span.dots,
.wpra-nav-links .dots {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  cursor: default !important;
  min-width: 24px !important;
  padding: 0 4px !important;
}

/* Dölj screen-reader text */
.wpra-nav-links .screen-reader-text,
.nav-links .screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Dark mode */
html[data-theme="dark"] .wpra-item-list .wpra-item {
  background: var(--fluent-color-neutral-background-1);
  border-color: var(--fluent-color-neutral-stroke-1);
}

html[data-theme="dark"] .wpra-item-list .wpra-item > a:first-of-type {
  color: var(--fluent-color-neutral-foreground-1);
}

html[data-theme="dark"] .wpra-item-list .wpra-item > a:first-of-type:hover {
  color: var(--lav-400);
}

html[data-theme="dark"] .wpra-item-list .wpra-item .wprss-feed-meta {
  color: var(--fluent-color-neutral-foreground-2);
}

/* Dark mode - pagination länkar */
html[data-theme="dark"] .wpra-nav-links a,
html[data-theme="dark"] .nav-links a {
  background: var(--fluent-color-neutral-background-1) !important;
  border-color: var(--fluent-color-neutral-stroke-1) !important;
  color: var(--lav-300) !important;
}

html[data-theme="dark"] .wpra-nav-links a:hover,
html[data-theme="dark"] .nav-links a:hover {
  background: var(--lav-900) !important;
  border-color: var(--lav-500) !important;
  color: #ffffff !important;
}

/* Dark mode - aktiv sida (span) behåller lila */
html[data-theme="dark"] .wpra-nav-links > span:not(.screen-reader-text),
html[data-theme="dark"] .nav-links span.current {
  background: var(--lav-500) !important;
  border-color: var(--lav-500) !important;
  color: #ffffff !important;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .cctrl-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================
   6.4.1 GOVERNANCE SERIE – Bredare grid, excerpt på hover, hela kortet = länk
   Användning: Loop Grid med klass cctrl-governance-grid på containern;
   Loop Item med card card--governance; titel med cctrl-stretch-link + Post URL;
   excerpt i element med klass card__excerpt-hover.
   ================================================================== */

/* Bredare kort: 2 kolumner desktop – överstyr Elementors 3-kolumn */
.cctrl-governance-grid .elementor-widget-loop-grid .elementor-grid,
.cctrl-governance-grid .elementor-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(var(--space-4), 4vw, var(--space-6));
}

@media (max-width: 1023px) {
  .cctrl-governance-grid .elementor-widget-loop-grid .elementor-grid,
  .cctrl-governance-grid .elementor-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Styling för excerpt-text i governance-kort */
.e-loop-item .card--governance .card__excerpt-hover,
.e-loop-item .card--governance .card__description.card__excerpt-hover,
.e-loop-item .card--governance .elementor-widget-theme-post-excerpt.card__excerpt-hover {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Governance-kort: samma body/titel/media-styling som blogg (gäller utan .cctrl-cards-grid) */
.e-loop-item .card--governance .card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-3) 0 0;
  gap: var(--space-3);
}

/* .card__media för governance styrs av samlade loop-regler ovan (margin/width/aspect + img). */

/* Titeln – både Heading-widget och Elementors Post Title-widget */
.e-loop-item .card--governance .card__title,
.e-loop-item .card--governance .elementor-heading-title,
.e-loop-item .card--governance h3,
.e-loop-item .card--governance h4,
.e-loop-item .card--governance .elementor-widget-theme-post-title .elementor-heading-title,
.e-loop-item .card--governance .elementor-widget-theme-post-title a,
.e-loop-item .card--governance .elementor-widget-theme-post-title {
  font-family: "Cooper Hewitt", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--lav-900, #3d3e66) !important;
  margin: 0 0 var(--space-2) 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

.e-loop-item .card--governance .card__title:hover,
.e-loop-item .card--governance .elementor-heading-title:hover,
.e-loop-item .card--governance .elementor-widget-theme-post-title a:hover {
  color: var(--lav-600) !important;
}

/* Excerpt-widget: dölj som standard om den har card__excerpt-hover */
.e-loop-item .card--governance .card__excerpt-hover,
.e-loop-item .card--governance .card__description.card__excerpt-hover,
.e-loop-item .card--governance .elementor-widget-theme-post-excerpt.card__excerpt-hover {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.2s ease;
  margin-top: 0;
}

.e-loop-item .card--governance:hover .card__excerpt-hover,
.e-loop-item .card--governance:hover .card__description.card__excerpt-hover,
.e-loop-item .card--governance:hover .elementor-widget-theme-post-excerpt.card__excerpt-hover {
  max-height: 6em;
  opacity: 1;
  margin-top: var(--space-2);
}

.e-loop-item .card--governance:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: color-mix(in srgb, var(--outline), var(--lav-200) 35%);
}

/* ===================================================================
   7. HERO SECTION (Block-editor hero: .wp-block-group.cctrl-hero)
   ================================================================== */
/* VIKTIGT: Endast .wp-block-group.cctrl-hero här. Elementor-hero (.e-con.cctrl-hero)
   på blog/public stylas av cctrl-layout.css (HERO RUBRIKER, gradient, padding).
   Om du lägger till .cctrl-hero utan .wp-block-group här blir blogg-header förstörd. */

/* Hero-sektion - mörk bakgrund (endast Block Editor Group) */
.wp-block-group.cctrl-hero {
  background: var(--lav-900); /* Mörk bakgrund - samma färg som rubriker */
  color: #ffffff;
  padding-top: clamp(140px, 18vw, 200px); /* Extra padding för navigeringen */
  padding-bottom: clamp(80px, 12vw, 160px);
  margin-top: -120px; /* Pull up under the floating nav */
  margin-bottom: var(--space-6);
  position: relative;
  overflow: hidden;
}

/* Fluent gradient overlay - snygg gradient som matchar poddkortet */
.wp-block-group.cctrl-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at 30% 30%,
    var(--wave-song-500) 0%,
    color-mix(in srgb, var(--wave-song-500) 80%, var(--lav-900) 20%) 40%,
    color-mix(in srgb, var(--wave-song-500) 40%, var(--lav-900) 60%) 70%,
    var(--lav-900) 100%
  );
  pointer-events: none;
  z-index: 0;
  opacity: 1 !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.wp-block-group.cctrl-hero > *,
.wp-block-group.cctrl-hero .wp-block-group__inner-container {
  position: relative;
  z-index: 1;
}

/* Hero container - centrerad, max-width (för Group block) */
.wp-block-group.cctrl-hero > .wp-block-group__inner-container,
.wp-block-group.cctrl-hero .wp-block-group__inner-container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--section-pad-x);
  text-align: center;
}

/* Hero title - stor, fet, ljus (Block Editor) */
.wp-block-group.cctrl-hero h1,
.wp-block-group.cctrl-hero .wp-block-heading {
  font-family: "Cooper Hewitt", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: clamp(2.5rem, 2.5rem + 2vw, 4.5rem) !important;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #ffffff !important;
  margin: 0 0 var(--space-4);
}

/* Hero text/ingress (Block Editor) */
.wp-block-group.cctrl-hero p,
.wp-block-group.cctrl-hero .wp-block-paragraph {
  font-size: clamp(1.125rem, 1.125rem + 0.5vw, 1.5rem) !important;
  line-height: 1.6;
  color: color-mix(in srgb, #ffffff, transparent 10%) !important;
  margin: 0 auto var(--space-3);
  max-width: 60ch;
}

/* Hero bilder (Block Editor) */
.wp-block-group.cctrl-hero .wp-block-image,
.wp-block-group.cctrl-hero img {
  margin-top: var(--space-6);
  border-radius: var(--radius-lg);
}

.wp-block-group.cctrl-hero .wp-block-image img {
  max-width: 100%;
  height: auto;
}

/* Hero med vänsterjusterat innehåll (default) */
.wp-block-group.cctrl-hero--left .wp-block-group__inner-container {
  text-align: left;
}

/* Hero med centrerat innehåll */
.wp-block-group.cctrl-hero--center .wp-block-group__inner-container {
  text-align: center;
}

.wp-block-group.cctrl-hero--center .wp-block-heading,
.wp-block-group.cctrl-hero--center .wp-block-paragraph {
  margin-inline: auto;
}

/* Responsive adjustments (Block Editor hero) */
@media (max-width: 768px) {
  .wp-block-group.cctrl-hero {
    padding-block: clamp(60px, 10vw, 120px);
  }

  .wp-block-group.cctrl-hero h1,
  .wp-block-group.cctrl-hero .wp-block-heading {
    font-size: clamp(2rem, 2rem + 1.5vw, 3rem) !important;
  }

  .wp-block-group.cctrl-hero p,
  .wp-block-group.cctrl-hero .wp-block-paragraph {
    font-size: clamp(1rem, 1rem + 0.4vw, 1.25rem) !important;
  }
}

/* ===================================================================
   PMPro: begränsat innehåll – trevligt meddelande (single) + kort teaser (loop)
   =================================================================== */
.cctrl-pmpro-no-access {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--lav-50, #f3f4fb);
  border-radius: var(--radius-md);
  border: 1px solid var(--lav-200, #e6e8f6);
}
.cctrl-pmpro-no-access__title {
  margin: 0 0 var(--space-2);
  font-size: 1.25rem;
  color: var(--lav-800);
}
.cctrl-pmpro-no-access__body p {
  margin: 0 0 var(--space-2);
  color: var(--text);
}
.cctrl-pmpro-no-access__body p:last-child {
  margin-bottom: 0;
}
.cctrl-pmpro-no-access__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.cctrl-pmpro-no-access__actions .btn {
  margin: 0;
}
/* Ghost-knappar (samma som Till bloggen/Logga in i headern) – tydlig text och kant */
.cctrl-pmpro-no-access__actions .btn.btn--ghost {
  background: transparent;
  color: var(--lav-600, #55578f);
  border: 1px solid var(--lav-400, #7d82d4);
}
.cctrl-pmpro-no-access__actions .btn.btn--ghost:hover {
  background: var(--lav-100, #e8e9f6);
  color: var(--lav-700, #444672);
  border-color: var(--lav-500, #6264a7);
}
.cctrl-restricted-teaser {
  margin-top: var(--space-2);
  font-size: 0.9rem;
  color: var(--muted);
}

html[data-theme="dark"] .cctrl-pmpro-no-access {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .cctrl-pmpro-no-access__title {
  color: var(--lav-200);
}
html[data-theme="dark"] .cctrl-pmpro-no-access__body p {
  color: rgba(255, 255, 255, 0.85);
}
html[data-theme="dark"] .cctrl-pmpro-no-access__actions .btn.btn--ghost {
  color: var(--lav-200, #c5c7e8);
  border-color: var(--lav-400, #7d82d4);
}
html[data-theme="dark"] .cctrl-pmpro-no-access__actions .btn.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: var(--lav-300, #8b90ec);
}

/* ===================================================================
   8. LINK CARDS (Länkkort för resurssidor)
   Sätt bara .cctrl-link-card på containern - resten stylas automatiskt
   =================================================================== */

/* Länkkort - wrapper */
.cctrl-link-card {
  background: var(--bg-elev, #ffffff);
  border-radius: var(--radius-3, 12px);
  padding: var(--space-6, 24px);
  border: 1px solid var(--outline, #d5d7e3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.cctrl-link-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--lav-300, #b8b9d9);
}

/* Rubrik - alla h2, h3, h4 i kortet */
.cctrl-link-card h2,
.cctrl-link-card h3,
.cctrl-link-card h4 {
  font-family: var(--font-heading, 'Cooper Hewitt', sans-serif);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--lav-900, #2d2e5e);
  margin: 0 0 var(--space-4, 16px) 0;
  line-height: 1.3;
}

/* Lista */
.cctrl-link-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

/* Länkar */
.cctrl-link-card a {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 8px);
  color: var(--cruise-500, #e07b54);
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.4;
  transition: color 0.15s ease;
}

.cctrl-link-card a:hover {
  color: var(--lav-600, #4a4c8a);
  text-decoration: underline;
}

/* Ikoner (svg i länkar) */
.cctrl-link-card a svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: currentColor;
}

/* Dark mode */
html[data-theme="dark"] .cctrl-link-card {
  background: var(--bg-elev, #1e1e2e);
  border-color: var(--outline, #3d3e66);
}

html[data-theme="dark"] .cctrl-link-card h2,
html[data-theme="dark"] .cctrl-link-card h3,
html[data-theme="dark"] .cctrl-link-card h4 {
  color: #ffffff;
}

html[data-theme="dark"] .cctrl-link-card a {
  color: var(--cruise-400, #f0a080);
}

html[data-theme="dark"] .cctrl-link-card a:hover {
  color: var(--lav-400, #9091c7);
}

/* --- Modifiers --- */

/* Auth-required kort (gult/amber) */
.cctrl-link-card--auth {
  background: linear-gradient(135deg, var(--yellow-50, #fffbeb) 0%, var(--yellow-100, #fef3c7) 100%);
  border-color: var(--yellow-300, #fcd34d);
}

.cctrl-link-card--auth:hover {
  border-color: var(--yellow-400, #fbbf24);
}

.cctrl-link-card--auth h2,
.cctrl-link-card--auth h3,
.cctrl-link-card--auth h4 {
  color: var(--yellow-900, #78350f);
}

/* Success/highlight kort (grönt) */
.cctrl-link-card--success {
  background: linear-gradient(135deg, var(--green-50, #f0fdf4) 0%, var(--green-100, #dcfce7) 100%);
  border-color: var(--green-300, #86efac);
}

.cctrl-link-card--success:hover {
  border-color: var(--green-400, #4ade80);
}

.cctrl-link-card--success h2,
.cctrl-link-card--success h3,
.cctrl-link-card--success h4 {
  color: var(--green-900, #14532d);
}

/* Featured kort (lila highlight) */
.cctrl-link-card--featured {
  background: linear-gradient(135deg, var(--lav-50, #f3f4fb) 0%, var(--lav-100, #e8e9f5) 100%);
  border-color: var(--lav-300, #b8b9d9);
}

.cctrl-link-card--featured:hover {
  border-color: var(--lav-500, #6264a7);
}

/* Dark mode modifiers */
html[data-theme="dark"] .cctrl-link-card--auth {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(251, 191, 36, 0.15) 100%);
  border-color: var(--yellow-600, #d97706);
}

html[data-theme="dark"] .cctrl-link-card--auth h2,
html[data-theme="dark"] .cctrl-link-card--auth h3,
html[data-theme="dark"] .cctrl-link-card--auth h4 {
  color: var(--yellow-300, #fcd34d);
}

html[data-theme="dark"] .cctrl-link-card--success {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.15) 100%);
  border-color: var(--green-600, #16a34a);
}

html[data-theme="dark"] .cctrl-link-card--success h2,
html[data-theme="dark"] .cctrl-link-card--success h3,
html[data-theme="dark"] .cctrl-link-card--success h4 {
  color: var(--green-300, #86efac);
}

/* --- Tooltip --- */
.cctrl-link-card[data-tooltip] {
  position: relative;
}

.cctrl-link-card[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background: var(--lav-900, #2d2e5e);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 10;
  pointer-events: none;
}

.cctrl-link-card[data-tooltip]::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--lav-900, #2d2e5e);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 10;
  pointer-events: none;
}

.cctrl-link-card[data-tooltip]:hover::before,
.cctrl-link-card[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Auth-badge i rubriken */
.cctrl-link-card__auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--yellow-700, #a16207);
  background: var(--yellow-200, #fde68a);
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

.cctrl-link-card__auth-badge svg {
  width: 12px;
  height: 12px;
}

/* ==========================================================================
   WordPress lösenordsformulär (.post-password-form)
   Visas under sticky nav med ordentlig luft och genomtänkt styling.
   ========================================================================== */

.post-password-form {
  padding-top: clamp(5rem, 12vw, 9rem); /* täcker sticky nav + ger luft */
  padding-bottom: var(--space-10, 4rem);
  padding-inline: var(--space-5, 1.5rem);
  max-width: 420px;
  margin-inline: auto;
  min-height: 60vh;
}

.post-password-form > p:first-child {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted, #666);
  margin-bottom: var(--space-5, 1.5rem);
}

.post-password-form label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink, #1a1a2e);
  margin-bottom: 6px;
}

.post-password-form input[type="password"] {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 var(--space-4, 1rem);
  font-size: 1rem;
  color: var(--ink, #1a1a2e);
  background: var(--bg-elev, #fff);
  border: 1.5px solid var(--outline, rgba(0, 0, 0, 0.15));
  border-radius: 10px;
  box-sizing: border-box;
  margin-bottom: var(--space-4, 1rem);
  transition: border-color 0.18s, box-shadow 0.18s;
  -webkit-appearance: none;
}

.post-password-form input[type="password"]:focus {
  outline: none;
  border-color: var(--lav-500, #6264a7);
  box-shadow: 0 0 0 3px rgba(98, 100, 167, 0.15);
}

.post-password-form input[type="submit"] {
  display: block;
  width: 100%;
  height: 52px;
  background: var(--lav-700, #4f52a0);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s;
  letter-spacing: 0.01em;
}

.post-password-form input[type="submit"]:hover {
  background: var(--lav-900, #3d3e66);
}

html[data-theme="dark"] .post-password-form input[type="password"] {
  background: var(--bg-elev);
  border-color: var(--outline);
  color: var(--ink);
}

html[data-theme="dark"] .post-password-form input[type="password"]:focus {
  border-color: var(--lav-400, #8b8fd4);
  box-shadow: 0 0 0 3px rgba(139, 143, 212, 0.2);
}

/* ===================================================================
   AGENT LAB TEASER – Sticky i nedre vänstra hörnet, dismissbar
   Shortcode: [agent_lab_teaser]
   =================================================================== */
.cctrl-agent-lab-teaser {
  --al-teaser-lav: #6264a7;
  --al-teaser-lav-dark: #4d4f8a;
  --al-teaser-glow: rgba(98, 100, 167, 0.4);
  position: fixed;
  bottom: 100px;
  left: 24px;
  /* Över mobilmeny (10050), modaler ~10200, cookie banners m.m. */
  z-index: 10300;
  isolation: isolate;
  max-width: 360px;
  padding: 20px 20px 20px 20px;
  background: linear-gradient(135deg, var(--al-teaser-lav) 0%, var(--al-teaser-lav-dark) 50%, #3d3e66 100%);
  border-radius: 16px;
  box-shadow: 0 8px 32px var(--al-teaser-glow), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  overflow: visible;
  transform: translateX(calc(-100% - 48px));
  opacity: 0;
  visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease, visibility 0.4s;
}

.cctrl-agent-lab-teaser--visible {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.cctrl-agent-lab-teaser--dismissed {
  transform: translateX(calc(-100% - 48px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cctrl-agent-lab-teaser::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 0% 50%, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.cctrl-agent-lab-teaser:hover {
  box-shadow: 0 12px 40px var(--al-teaser-glow), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.cctrl-agent-lab-teaser__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s ease;
}

.cctrl-agent-lab-teaser__close-x {
  font-size: 1.65rem;
  line-height: 1;
  font-weight: 600;
  pointer-events: none;
}

.cctrl-agent-lab-teaser__close:hover,
.cctrl-agent-lab-teaser__close:focus-visible {
  background: rgba(255, 255, 255, 0.35);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  transform: scale(1.03);
}

.cctrl-agent-lab-teaser__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.cctrl-agent-lab-teaser__inner {
  position: relative;
  z-index: 1;
  /* Utrymme så rubrik/brödtext aldrig ligger ovanpå stäng-knappens träffyta */
  padding: 40px 48px 0 0;
  text-align: left;
}

.cctrl-agent-lab-teaser__dismiss-text {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 8px;
  font-family: var(--font-body, inherit);
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color 0.2s ease, background 0.2s ease;
}

.cctrl-agent-lab-teaser__dismiss-text:hover,
.cctrl-agent-lab-teaser__dismiss-text:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.cctrl-agent-lab-teaser__dismiss-text:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

.cctrl-agent-lab-teaser__badge {
  display: inline-block;
  padding: 3px 10px;
  margin-bottom: 10px;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--al-teaser-lav);
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.cctrl-agent-lab-teaser__title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3.5vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.cctrl-agent-lab-teaser__subline {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 16px;
}

.cctrl-agent-lab-teaser__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--al-teaser-lav) !important;
  background: #fff !important;
  border: none !important;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cctrl-agent-lab-teaser__cta:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  color: var(--al-teaser-lav-dark) !important;
}

.cctrl-agent-lab-teaser__cta-arrow {
  font-size: 1.1em;
  transition: transform 0.2s ease;
}

.cctrl-agent-lab-teaser__cta:hover .cctrl-agent-lab-teaser__cta-arrow {
  transform: translateX(3px);
}

/* Dark mode */
html[data-theme="dark"] .cctrl-agent-lab-teaser {
  --al-teaser-lav: #7b7dc4;
  --al-teaser-lav-dark: #696aab;
  --al-teaser-glow: rgba(123, 125, 196, 0.35);
  box-shadow: 0 8px 32px var(--al-teaser-glow), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

html[data-theme="dark"] .cctrl-agent-lab-teaser__badge {
  color: var(--al-teaser-lav-dark);
  background: rgba(255, 255, 255, 0.95);
}

/* ==========================================================================
   404-sida (.cctrl-404)
   ========================================================================== */

/* --- Bas (app-shell, inloggad) --- */
.cctrl-404 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: clamp(48px, 8vw, 96px) 24px;
}

/* --- Public (utloggad): hero-stil med lav-gradient, kompenserar för fixed nav --- */
body.is-public .cctrl-404 {
  min-height: 100vh;
  padding-top: calc(120px + clamp(56px, 10vw, 100px));
  padding-bottom: clamp(64px, 10vw, 120px);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(98, 100, 167, 0.10) 0%, transparent 70%),
    var(--bg, #f5f5fb);
  align-items: flex-start;
  justify-content: center;
}

.admin-bar body.is-public .cctrl-404 {
  padding-top: calc(152px + clamp(56px, 10vw, 100px));
}

/* --- Inner wrapper --- */
.cctrl-404__inner {
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* --- Ikon --- */
.cctrl-404__icon {
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1;
  margin-bottom: 20px;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(98, 100, 167, 0.2));
}

/* --- Rubrik --- */
.cctrl-404__title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  font-weight: 800;
  color: var(--text);
  margin: 0 0 14px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* --- Beskrivning --- */
.cctrl-404__desc {
  font-size: 1rem;
  color: var(--muted, #6b7280);
  margin: 0 auto 36px;
  line-height: 1.7;
  max-width: 420px;
  text-align: center;
}

/* --- Snabblänkskort --- */
.cctrl-404__quicklinks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}

@media (max-width: 480px) {
  .cctrl-404__quicklinks {
    grid-template-columns: 1fr;
  }
}

.cctrl-404__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 20px;
  background: var(--bg-elev, #fff);
  border: 1px solid var(--lav-200, #e6e8f6);
  border-radius: 18px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(98, 100, 167, 0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.cctrl-404__card:hover {
  border-color: var(--lav-400, #aeb3da);
  box-shadow: 0 6px 20px rgba(98, 100, 167, 0.14);
  transform: translateY(-3px);
  text-decoration: none;
}

.cctrl-404__card-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 4px;
}

.cctrl-404__card-label {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--lav-900, #3d3e66);
}

.cctrl-404__card-sub {
  font-size: 0.8rem;
  color: var(--muted, #6b7280);
  text-align: center;
  line-height: 1.4;
}

.cctrl-404__actions {
  margin: 0;
}

.cctrl-404__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* --- Dark mode --- */
html[data-theme="dark"] body.is-public .cctrl-404 {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(98, 100, 167, 0.18) 0%, transparent 70%),
    var(--bg, #151726);
}

html[data-theme="dark"] .cctrl-404__card {
  background: var(--bg-elev, #1e2132);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .cctrl-404__card:hover {
  border-color: var(--lav-500, #6264a7);
  box-shadow: 0 6px 20px rgba(98, 100, 167, 0.25);
}

html[data-theme="dark"] .cctrl-404__card-label {
  color: var(--text, #f7f7ff);
}

html[data-theme="dark"] .cctrl-404__card-sub {
  color: rgba(247, 247, 255, 0.55);
}