/**
 * CCTRL FLUENT UI COMPONENTS
 * 
 * Fluent UI-komponenter: Toggle, Checkbox, Radio, Avatar
 * Baserat på Microsoft Fluent Design System
 */

/* ===================================================================
   TOGGLE SWITCH
   ================================================================== */

.fluent-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--fluent-spacing-s);
  cursor: pointer;
  user-select: none;
  width: 100%;
  padding: var(--fluent-spacing-xs) 0;
}

.fluent-toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.fluent-toggle__track {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--fluent-color-neutral-stroke-1);
  border-radius: var(--fluent-radius-circular);
  transition: background var(--fluent-duration-normal) var(--fluent-curve-easy-ease);
}

.fluent-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: var(--fluent-radius-circular);
  box-shadow: var(--fluent-shadow-2);
  transition: transform var(--fluent-duration-normal) var(--fluent-curve-easy-ease);
}

.fluent-toggle__input:checked + .fluent-toggle__track {
  background: var(--fluent-color-brand-background);
}

.fluent-toggle__input:checked + .fluent-toggle__track .fluent-toggle__thumb {
  transform: translateX(20px);
}

.fluent-toggle__input:focus-visible + .fluent-toggle__track {
  outline: 2px solid var(--fluent-color-brand-stroke-1);
  outline-offset: 2px;
}

.fluent-toggle__input:disabled + .fluent-toggle__track {
  opacity: 0.4;
  cursor: not-allowed;
}

.fluent-toggle__label {
  font-size: var(--fluent-font-size-300);
  line-height: var(--fluent-line-height-300);
  color: var(--fluent-color-neutral-foreground-1);
}

/* Dark mode */
html[data-theme="dark"] .fluent-toggle__track {
  background: var(--fluent-color-neutral-stroke-2);
}

html[data-theme="dark"] .fluent-toggle__thumb {
  background: var(--fluent-color-neutral-background-1);
}

/* ===================================================================
   CHECKBOX
   ================================================================== */

.fluent-checkbox {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--fluent-spacing-s);
  cursor: pointer;
  user-select: none;
  width: 100%;
  padding: var(--fluent-spacing-xs) 0;
}

.fluent-checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.fluent-checkbox__box {
  position: relative;
  width: 20px;
  height: 20px;
  border: 2px solid var(--fluent-color-neutral-stroke-1);
  border-radius: var(--fluent-radius-small);
  background: var(--fluent-color-neutral-background-1);
  transition: all var(--fluent-duration-normal) var(--fluent-curve-easy-ease);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fluent-checkbox__checkmark {
  width: 12px;
  height: 12px;
  opacity: 0;
  transform: scale(0);
  transition: all var(--fluent-duration-fast) var(--fluent-curve-easy-ease);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fluent-checkbox__checkmark::after {
  content: '';
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -2px;
}

.fluent-checkbox__input:checked + .fluent-checkbox__box {
  background: var(--fluent-color-brand-background);
  border-color: var(--fluent-color-brand-background);
}

.fluent-checkbox__input:checked + .fluent-checkbox__box .fluent-checkbox__checkmark {
  opacity: 1;
  transform: scale(1);
}

.fluent-checkbox__input:focus-visible + .fluent-checkbox__box {
  outline: 2px solid var(--fluent-color-brand-stroke-1);
  outline-offset: 2px;
}

.fluent-checkbox__input:disabled + .fluent-checkbox__box {
  opacity: 0.4;
  cursor: not-allowed;
}

.fluent-checkbox__label {
  font-size: var(--fluent-font-size-300);
  line-height: var(--fluent-line-height-300);
  color: var(--fluent-color-neutral-foreground-1);
}

/* Checkmark kan också vara en SVG om du vill */
.fluent-checkbox__checkmark svg {
  width: 100%;
  height: 100%;
  fill: #ffffff;
}

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

/* ===================================================================
   RADIO BUTTON
   ================================================================== */

.fluent-radio {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--fluent-spacing-s);
  cursor: pointer;
  user-select: none;
  width: 100%;
  padding: var(--fluent-spacing-xs) 0;
}

.fluent-radio__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.fluent-radio__circle {
  position: relative;
  width: 20px;
  height: 20px;
  border: 2px solid var(--fluent-color-neutral-stroke-1);
  border-radius: var(--fluent-radius-circular);
  background: var(--fluent-color-neutral-background-1);
  transition: all var(--fluent-duration-normal) var(--fluent-curve-easy-ease);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fluent-radio__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--fluent-radius-circular);
  background: var(--fluent-color-brand-background);
  opacity: 0;
  transform: scale(0);
  transition: all var(--fluent-duration-fast) var(--fluent-curve-easy-ease);
}

.fluent-radio__input:checked + .fluent-radio__circle {
  border-color: var(--fluent-color-brand-background);
}

.fluent-radio__input:checked + .fluent-radio__circle .fluent-radio__dot {
  opacity: 1;
  transform: scale(1);
}

.fluent-radio__input:focus-visible + .fluent-radio__circle {
  outline: 2px solid var(--fluent-color-brand-stroke-1);
  outline-offset: 2px;
}

.fluent-radio__input:disabled + .fluent-radio__circle {
  opacity: 0.4;
  cursor: not-allowed;
}

.fluent-radio__label {
  font-size: var(--fluent-font-size-300);
  line-height: var(--fluent-line-height-300);
  color: var(--fluent-color-neutral-foreground-1);
}

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

/* ===================================================================
   AVATAR
   ================================================================== */

.fluent-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fluent-radius-circular);
  background: var(--fluent-color-brand-background);
  color: #ffffff;
  font-weight: var(--fluent-font-weight-semibold);
  overflow: hidden;
  flex-shrink: 0;
}

.fluent-avatar--size-16 {
  width: 16px;
  height: 16px;
  font-size: var(--fluent-font-size-100);
  line-height: var(--fluent-line-height-100);
}

.fluent-avatar--size-20 {
  width: 20px;
  height: 20px;
  font-size: var(--fluent-font-size-200);
  line-height: var(--fluent-line-height-200);
}

.fluent-avatar--size-24 {
  width: 24px;
  height: 24px;
  font-size: var(--fluent-font-size-200);
  line-height: var(--fluent-line-height-200);
}

.fluent-avatar--size-32 {
  width: 32px;
  height: 32px;
  font-size: var(--fluent-font-size-300);
  line-height: var(--fluent-line-height-300);
}

.fluent-avatar--size-40 {
  width: 40px;
  height: 40px;
  font-size: var(--fluent-font-size-400);
  line-height: var(--fluent-line-height-400);
}

.fluent-avatar--size-48 {
  width: 48px;
  height: 48px;
  font-size: var(--fluent-font-size-500);
  line-height: var(--fluent-line-height-500);
}

.fluent-avatar--size-56 {
  width: 56px;
  height: 56px;
  font-size: var(--fluent-font-size-600);
  line-height: var(--fluent-line-height-600);
}

.fluent-avatar--size-64 {
  width: 64px;
  height: 64px;
  font-size: var(--fluent-font-size-700);
  line-height: var(--fluent-line-height-700);
}

.fluent-avatar--size-72 {
  width: 72px;
  height: 72px;
  font-size: var(--fluent-font-size-800);
  line-height: var(--fluent-line-height-800);
}

.fluent-avatar--size-96 {
  width: 96px;
  height: 96px;
  font-size: var(--fluent-font-size-900);
  line-height: var(--fluent-line-height-900);
}

.fluent-avatar--size-120 {
  width: 120px;
  height: 120px;
  font-size: var(--fluent-font-size-1000);
  line-height: var(--fluent-line-height-1000);
}

.fluent-avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fluent-avatar__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Avatar color variants */
.fluent-avatar--color-brand {
  background: var(--fluent-color-brand-background);
}

.fluent-avatar--color-dark-red {
  background: #750b1c;
}

.fluent-avatar--color-cranberry {
  background: #c50f1f;
}

.fluent-avatar--color-red {
  background: #d13438;
}

.fluent-avatar--color-pumpkin {
  background: #ca5010;
}

.fluent-avatar--color-peach {
  background: #ff8c00;
}

.fluent-avatar--color-gold {
  background: #c19c00;
}

.fluent-avatar--color-brass {
  background: #986f0b;
}

.fluent-avatar--color-brown {
  background: #8e562e;
}

.fluent-avatar--color-forest {
  background: #498205;
}

.fluent-avatar--color-seafoam {
  background: #00cc6a;
}

.fluent-avatar--color-dark-green {
  background: #0b6a0b;
}

.fluent-avatar--color-light-teal {
  background: #00b7c3;
}

.fluent-avatar--color-teal {
  background: #038387;
}

.fluent-avatar--color-steel {
  background: #005b70;
}

.fluent-avatar--color-blue {
  background: #0078d4;
}

.fluent-avatar--color-royal-blue {
  background: #004e8c;
}

.fluent-avatar--color-cornflower {
  background: #4f6bed;
}

.fluent-avatar--color-navy {
  background: #0027b4;
}

.fluent-avatar--color-lavender {
  background: var(--cctrl365-80);
}

.fluent-avatar--color-purple {
  background: #5c2e91;
}

.fluent-avatar--color-grape {
  background: #881798;
}

.fluent-avatar--color-lilac {
  background: #b146c2;
}

.fluent-avatar--color-pink {
  background: #e43ba6;
}

.fluent-avatar--color-magenta {
  background: #bf0077;
}

.fluent-avatar--color-plum {
  background: #77004d;
}

/* Dark mode */
html[data-theme="dark"] .fluent-avatar {
  background: var(--fluent-color-brand-background);
}

/* ===================================================================
   SLIDER
   ================================================================== */

.fluent-slider {
  position: relative;
  width: 100%;
  max-width: 300px;
}

.fluent-slider__track {
  position: relative;
  width: 100%;
  height: 4px;
  background: var(--fluent-color-neutral-stroke-1);
  border-radius: var(--fluent-radius-circular);
  cursor: pointer;
}

.fluent-slider__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--fluent-color-brand-background);
  border-radius: var(--fluent-radius-circular);
  transition: width var(--fluent-duration-normal) var(--fluent-curve-easy-ease);
}

.fluent-slider__thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: var(--fluent-color-brand-background);
  border: 2px solid #ffffff;
  border-radius: var(--fluent-radius-circular);
  box-shadow: var(--fluent-shadow-2);
  cursor: grab;
  transition: transform var(--fluent-duration-fast) var(--fluent-curve-easy-ease);
}

.fluent-slider__thumb:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.1);
}

.fluent-slider__input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.fluent-slider__input:focus-visible + .fluent-slider__track {
  outline: 2px solid var(--fluent-color-brand-stroke-1);
  outline-offset: 4px;
}

.fluent-slider__input:disabled + .fluent-slider__track {
  opacity: 0.4;
  cursor: not-allowed;
}

.fluent-slider__label {
  display: block;
  font-size: var(--fluent-font-size-300);
  line-height: var(--fluent-line-height-300);
  color: var(--fluent-color-neutral-foreground-1);
  margin-bottom: var(--fluent-spacing-s);
}

/* Dark mode */
html[data-theme="dark"] .fluent-slider__track {
  background: var(--fluent-color-neutral-stroke-2);
}

/* ===================================================================
   DROPDOWN / SELECT
   ================================================================== */

.fluent-dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 300px;
}

.fluent-dropdown__select {
  width: 100%;
  padding: var(--fluent-spacing-s) var(--fluent-spacing-l);
  padding-right: calc(var(--fluent-spacing-l) + 24px);
  font-size: var(--fluent-font-size-300);
  line-height: var(--fluent-line-height-300);
  color: var(--fluent-color-neutral-foreground-1);
  background: var(--fluent-color-neutral-background-1);
  border: 1px solid var(--fluent-color-neutral-stroke-1);
  border-radius: var(--fluent-radius-medium);
  appearance: none;
  cursor: pointer;
  transition: all var(--fluent-duration-normal) var(--fluent-curve-easy-ease);
}

.fluent-dropdown__select:hover {
  border-color: var(--fluent-color-neutral-stroke-accessible);
}

.fluent-dropdown__select:focus {
  outline: 2px solid var(--fluent-color-brand-stroke-1);
  outline-offset: 2px;
  border-color: var(--fluent-color-brand-stroke-1);
}

.fluent-dropdown__select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.fluent-dropdown__icon {
  position: absolute;
  right: var(--fluent-spacing-s);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none;
  color: var(--fluent-color-neutral-foreground-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
}

.fluent-dropdown__label {
  display: block;
  font-size: var(--fluent-font-size-300);
  line-height: var(--fluent-line-height-300);
  color: var(--fluent-color-neutral-foreground-1);
  margin-bottom: var(--fluent-spacing-s);
}

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

/* ===================================================================
   SEARCH INPUT
   ================================================================== */

.fluent-search {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 300px;
}

.fluent-search__input {
  width: 100%;
  padding: var(--fluent-spacing-s) var(--fluent-spacing-l);
  padding-left: calc(var(--fluent-spacing-l) + 24px);
  font-size: var(--fluent-font-size-300);
  line-height: var(--fluent-line-height-300);
  color: var(--fluent-color-neutral-foreground-1);
  background: var(--fluent-color-neutral-background-1);
  border: 1px solid var(--fluent-color-neutral-stroke-1);
  border-radius: var(--fluent-radius-medium);
  transition: all var(--fluent-duration-normal) var(--fluent-curve-easy-ease);
}

.fluent-search__input:hover {
  border-color: var(--fluent-color-neutral-stroke-accessible);
}

.fluent-search__input:focus {
  outline: 2px solid var(--fluent-color-brand-stroke-1);
  outline-offset: 2px;
  border-color: var(--fluent-color-brand-stroke-1);
}

.fluent-search__input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.fluent-search__icon {
  position: absolute;
  left: var(--fluent-spacing-s);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none;
  color: var(--fluent-color-neutral-foreground-3);
}

.fluent-search__label {
  display: block;
  font-size: var(--fluent-font-size-300);
  line-height: var(--fluent-line-height-300);
  color: var(--fluent-color-neutral-foreground-1);
  margin-bottom: var(--fluent-spacing-s);
}

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

/* ===================================================================
   CONTACT CTA (shortcode [contact-us] – rubrik + två knappar, ingen bakgrund)
   ================================================================== */

/* Sektionen ska inte ha egen bakgrund – smälter in i sidan, mindre storlek */
.cctrl-section--contact-cta,
body.is-public .cctrl-section--contact-cta {
  background: transparent !important;
  padding-block: var(--space-4);
}

.cctrl-contact-cta-card {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  text-align: center;
}

.cctrl-contact-cta-card h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 var(--space-3);
}

.cctrl-contact-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.cctrl-contact-cta .btn {
  white-space: nowrap;
}

/* ===================================================================
   CONTACT FORM
   ================================================================== */

/* Contact Form Container - En kolumn med tre rader */
/* Använder befintliga komponenter: .btn, .input, .field */
.cctrl-contact-form {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 900px; /* Bredare för bredare input-fält */
  margin: 0 auto var(--space-8);
  padding: var(--space-6);
  background: var(--bg-elev);
  border: 1px solid var(--outline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Rad 1: Bild och "Boka möte" knapp på samma rad - centrerat */
.cctrl-contact-form__top-row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  justify-content: center; /* Centrerat */
  margin-bottom: var(--space-2);
}

/* Avatar/Bild - rund */
.cctrl-contact-form__avatar {
  flex-shrink: 0;
}

.cctrl-contact-form__avatar img {
  width: 150px;
  height: 150px;
  border-radius: 50%; /* Rund bild */
  object-fit: cover;
  box-shadow: var(--shadow-soft);
  border: 3px solid var(--lav-200);
}

/* CTA Button container - större knapp */
.cctrl-contact-form__cta {
  flex-shrink: 0;
}

.cctrl-contact-form__cta .btn {
  padding: 16px 32px; /* Större padding */
  font-size: 1.125rem; /* Större text */
  min-height: 52px; /* Större höjd */
}

/* Rad 2: "Eller skicka meddelande" text - centrerat */
.cctrl-contact-form__intro-row {
  margin-top: var(--space-2);
  text-align: center;
}

/* Contact Form Header - inte längre används */
.cctrl-contact-form__header {
  display: none;
}

/* Contact Form Body - bredare fält */
.cctrl-contact-form__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
}

/* Bredare input-fält */
.cctrl-contact-form .field {
  width: 100%;
}

.cctrl-contact-form .input {
  width: 100%;
  max-width: 100%;
}

/* CTA Button - använder .btn.btn--accent från styleguide */

/* Contact Form Intro Text */
.cctrl-contact-form__intro {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Hide labels - use placeholder text only */
.cctrl-contact-form .field label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Larger textarea for message field - mer utrymme */
.cctrl-contact-form textarea.input,
.cctrl-contact-form textarea {
  min-height: 250px; /* Mer utrymme - från 200px */
  resize: vertical;
  padding: var(--space-3) var(--space-4); /* Mer padding för bekväm skrivning */
}

/* Submit button - mindre, i nedre högra hörnet, matchar våra knappar */
.cctrl-contact-form button[type="submit"],
.cctrl-contact-form input[type="submit"],
.cctrl-contact-form .btn[type="submit"],
.cctrl-contact-form__body button,
.cctrl-contact-form__body .btn {
  align-self: flex-end; /* I högra hörnet */
  margin-top: var(--space-4);
  padding: 12px 20px; /* Samma som våra knappar */
  border-radius: var(--radius-md); /* Samma radius */
  background: var(--lav-500);
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem; /* Samma storlek */
  line-height: 1.4;
  min-height: 44px; /* Samma min-height */
  box-shadow: 0 2px 8px rgba(61, 62, 102, 0.1);
  border: 0;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.cctrl-contact-form button[type="submit"]:hover,
.cctrl-contact-form input[type="submit"]:hover,
.cctrl-contact-form .btn[type="submit"]:hover,
.cctrl-contact-form__body button:hover,
.cctrl-contact-form__body .btn:hover {
  background: var(--lav-600);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(61, 62, 102, 0.15);
}

/* Honeypot field - hidden from users but visible to bots */
.cctrl-contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
  .cctrl-contact-form {
    padding: var(--space-4);
    gap: var(--space-4);
  }

  /* Rad 1: Stack bild och knapp vertikalt på mobil */
  .cctrl-contact-form__top-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
  }

  .cctrl-contact-form__avatar img {
    width: 120px;
    height: 120px;
  }

  .cctrl-contact-form__cta {
    width: 100%;
    text-align: center;
  }

  .cctrl-contact-form__intro-row {
    text-align: center;
  }
}

/* Dark Mode */
html[data-theme="dark"] .cctrl-contact-form {
  background: var(--fluent-color-neutral-background-1);
  border-color: var(--fluent-color-neutral-stroke-2);
  box-shadow: var(--fluent-shadow-8);
}

html[data-theme="dark"] .cctrl-contact-form:hover {
  box-shadow: var(--fluent-shadow-16);
}

html[data-theme="dark"] .cctrl-contact-form__intro {
  color: var(--fluent-color-neutral-foreground-3);
}

html[data-theme="dark"] .cctrl-contact-form .input {
  background: var(--fluent-color-neutral-background-2);
  border-color: var(--fluent-color-neutral-stroke-1);
  color: var(--fluent-color-neutral-foreground-1);
}

html[data-theme="dark"] .cctrl-contact-form .input::placeholder {
  color: var(--fluent-color-neutral-foreground-4);
}

html[data-theme="dark"] .cctrl-contact-form .input:focus {
  border-color: var(--fluent-color-brand-stroke-1);
  background: var(--fluent-color-neutral-background-1);
}

/* ========================================================================
   Team cards shortcode [cctrl_team_cards] (Kontakta oss)
   - BAKGRUND: sektion + container + kort = transparent (ingen ful bakgrund).
   - ETT KORT per teammedlem: endast subtil kant så kortet syns.
   - Länkraden: full bredd under bild+body (längs hela kortet).
   - Knappar: ren styleguide .btn .btn--ghost, ikon vertikalt centrerad.
   - Minimal padding ovanför och under shortcode.
   ======================================================================== */

.cctrl-section--team-cards,
.cctrl-section--team-cards .cctrl-container.cctrl-team-cards-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.cctrl-section--team-cards-transparent,
.cctrl-section--team-cards-transparent .cctrl-container.cctrl-team-cards-container {
  background: transparent !important;
}

.cctrl-team-cards--wide {
  display: grid;
  grid-auto-rows: auto;
  align-items: start;
  gap: var(--space-4);
}

/* Kort: vit bakgrund (som Oves kort), ingen kort-hover */
.cctrl-section--team-cards .card.cctrl-team-card-wide,
.cctrl-section--team-cards-transparent .card.cctrl-team-card-wide {
  background: #fff !important;
}

.card.cctrl-team-card-wide:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(61, 62, 102, 0.1);
  border-color: rgba(0, 0, 0, 0.1);
}

.cctrl-section--team-cards .card.cctrl-team-card-wide:hover,
.cctrl-section--team-cards-transparent .card.cctrl-team-card-wide:hover {
  box-shadow: 0 4px 16px rgba(61, 62, 102, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Layout: kolumn – första raden bild+body, andra raden länkrad full bredd */
.cctrl-team-card-wide {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: var(--space-4);
  min-height: 0;
  height: auto;
  border-radius: var(--radius-md);
}

.cctrl-team-card-wide__row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
}

/* Styleguide .card__media – överstyr för rund profilbild */
.cctrl-team-card-wide .card__media {
  aspect-ratio: unset;
  background: transparent;
  flex-shrink: 0;
}

.cctrl-team-card-wide__image-wrap {
  position: relative;
  flex-shrink: 0;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cctrl-team-card-wide__image-wrap:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 28px rgba(61, 62, 102, 0.18);
}

.cctrl-team-card-wide__image-wrap:hover .cctrl-team-card-wide__img {
  filter: brightness(1.05);
}

@media (min-width: 640px) {
  .cctrl-team-card-wide__image-wrap {
    width: 200px;
    height: 200px;
  }
}

.cctrl-team-card-wide__image-wrap .cctrl-team-card-wide__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.3s ease;
}

.cctrl-team-card-wide__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--brand-twilight), transparent 88%);
  border-radius: 50%;
}

.cctrl-team-card-wide__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: transparent !important;
}

/* Biotext (inte utdrag) ska inte ha egen bakgrund – följer kortet */
.card.cctrl-team-card-wide .card__body.cctrl-team-card-wide__body,
.cctrl-team-card-wide__bio-wrap,
.cctrl-team-card-wide__bio,
.cctrl-team-card-wide__bio p,
.cctrl-team-card-wide__bio * {
  background: transparent !important;
  background-color: transparent !important;
}

.cctrl-team-card-wide__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.cctrl-team-card-wide__pill {
  display: inline-block;
  padding: 0.25em 0.65em;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--brand-twilight);
  background: color-mix(in srgb, var(--brand-lilac, #f3f4fb), transparent 50%);
  border: 1px solid color-mix(in srgb, var(--brand-twilight), transparent 80%);
  border-radius: 999px;
  line-height: 1.3;
}

.cctrl-team-card-wide__name {
  margin: 0 0 var(--space-1);
  font-size: var(--h3-size, 1.25rem);
  font-weight: 600;
  color: var(--brand-twilight);
  line-height: 1.25;
}

.cctrl-team-card-wide__title {
  margin: 0 0 var(--space-2);
  font-size: 0.9375rem;
  font-weight: 700 !important;
  color: var(--text-secondary, #5c5c5c);
  line-height: 1.4;
}

.cctrl-team-card-wide__bio-wrap {
  margin: 0 0 var(--space-2);
  flex: 0 1 auto;
  min-height: 0;
}

.cctrl-team-card-wide__bio-wrap[data-truncate] .cctrl-team-card-wide__bio {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cctrl-team-card-wide__bio-wrap.is-expanded .cctrl-team-card-wide__bio {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
}

.cctrl-team-card-wide__bio-wrap .cctrl-team-card-wide__read-more {
  display: none;
}

/* Visa mer/Visa mindre – alltid synlig när det finns bio (data-truncate sätts alltid) */
.cctrl-team-card-wide__bio-wrap[data-truncate] .cctrl-team-card-wide__read-more,
.cctrl-team-card-wide__bio-wrap.is-expanded .cctrl-team-card-wide__read-more {
  display: inline-block;
  margin-top: 0.35em;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--brand-twilight);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  line-height: 1.3;
  box-shadow: none !important;
  text-shadow: none !important;
}

.cctrl-team-card-wide__bio {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-secondary, #5c5c5c);
  line-height: 1.5;
}

.cctrl-team-card-wide__bio p {
  margin: 0 0 0.5em;
}

.cctrl-team-card-wide__bio p:last-child {
  margin-bottom: 0;
}

/* Länkrad: full bredd längs hela kortet (även under bilden), högerställda knappar */
.cctrl-team-card-wide__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
  align-items: center;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--outline, rgba(0, 0, 0, 0.08));
  width: 100%;
  box-sizing: border-box;
}

/* Knappar (shortcode använder .cctrl-btn – ingen Elementor, bara vår CSS) */
.cctrl-team-card-wide__links .cctrl-btn.cctrl-btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  background: transparent;
  color: var(--lav-500, #6264A7);
  border: 1px solid var(--lav-300);
  box-shadow: none;
  padding: 0.5em 1em;
  border-radius: var(--radius-md, 16px);
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.cctrl-team-card-wide__links .cctrl-btn.cctrl-btn--ghost:hover,
.cctrl-team-card-wide__links .cctrl-btn.cctrl-btn--ghost:focus-visible {
  background: var(--lav-100);
  color: var(--lav-600);
  border-color: var(--lav-400);
  box-shadow: 0 2px 8px rgba(61, 62, 102, 0.1);
}

.cctrl-team-card-wide__links .cctrl-btn .cctrl-team-card-wide__link-icon {
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
}

.cctrl-team-card-wide__links .cctrl-btn .cctrl-team-card-wide__link-icon svg {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
  vertical-align: middle;
}

@media (max-width: 639px) {
  .cctrl-team-card-wide__row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .cctrl-team-card-wide__image-wrap {
    margin: 0 auto;
  }
  .cctrl-team-card-wide__pills {
    justify-content: center;
  }
  .cctrl-team-card-wide__links {
    justify-content: center;
  }
}

/* Dark mode: team-kort – ingen kort-hover */
html[data-theme="dark"] .card.cctrl-team-card-wide:hover {
  transform: none;
  box-shadow: none;
}

/* Dark mode: team-kort – vit/ljus kortbakgrund */
html[data-theme="dark"] .cctrl-team-card-wide,
html[data-theme="dark"] .cctrl-section--team-cards .card.cctrl-team-card-wide,
html[data-theme="dark"] .cctrl-section--team-cards-transparent .card.cctrl-team-card-wide {
  background: var(--bg-elev, #1e2132) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

html[data-theme="dark"] .cctrl-team-card-wide__image-wrap {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .cctrl-team-card-wide__placeholder {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .cctrl-team-card-wide__pill {
  color: var(--lav-200, #d3d4ea);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .cctrl-team-card-wide__name {
  color: #ffffff;
}

html[data-theme="dark"] .cctrl-team-card-wide__title {
  color: rgba(255, 255, 255, 0.75);
}

html[data-theme="dark"] .card.cctrl-team-card-wide .card__body.cctrl-team-card-wide__body,
html[data-theme="dark"] .cctrl-team-card-wide__bio-wrap,
html[data-theme="dark"] .cctrl-team-card-wide__bio,
html[data-theme="dark"] .cctrl-team-card-wide__bio p {
  background: transparent !important;
  background-color: transparent !important;
}

html[data-theme="dark"] .cctrl-team-card-wide__bio {
  color: rgba(255, 255, 255, 0.8);
}

html[data-theme="dark"] .cctrl-team-card-wide__bio-wrap[data-truncate] .cctrl-team-card-wide__read-more {
  color: var(--lav-300, #b8b9d9);
}

html[data-theme="dark"] .cctrl-team-card-wide__bio-wrap[data-truncate] .cctrl-team-card-wide__read-more:hover {
  color: var(--lav-200, #d3d4ea);
}

/* Linjen ovanför knapparna – samma mjuka färg används för knappkanten i dark mode */
html[data-theme="dark"] .cctrl-team-card-wide__links {
  border-top-color: rgba(255, 255, 255, 0.12);
}

/* Dark mode: ljust på mörkt för team-kort knappar (.cctrl-btn) */
html[data-theme="dark"] .cctrl-team-card-wide__links .cctrl-btn.cctrl-btn--ghost {
  background: transparent;
  color: var(--lav-400, #aeb3da);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .cctrl-team-card-wide__links .cctrl-btn.cctrl-btn--ghost:hover,
html[data-theme="dark"] .cctrl-team-card-wide__links .cctrl-btn.cctrl-btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ============================================================
   Registrerings-hints (App / Område obligatoriska fält)
   ============================================================ */
.cctrl-reg-hint {
  font-size: 0.8125rem;
  color: var(--lav-600, #4a4d8a);
  margin: 4px 0 0 0;
  line-height: 1.4;
}

/* ============================================================
   PMPro teaser-CTA – global komponent för begränsat innehåll
   Används överallt: Tips, Nyheter, Roadmaps, BetterDocs, kurser.
   ============================================================ */
.cctrl-teaser-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 1rem;
  padding: 14px 16px;
  border-radius: var(--radius-sm, 8px);
  background: var(--lav-50, #f0f0fa);
  border: 1px solid var(--lav-200, #c8caec);
}

.cctrl-teaser-cta__text {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary, #5a5f7a);
  line-height: 1.5;
}

.cctrl-teaser-cta__link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lav-600, #4a4d8a);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cctrl-teaser-cta__link:hover {
  color: var(--lav-700, #3a3d6e);
  text-decoration: underline;
}

html[data-theme="dark"] .cctrl-teaser-cta {
  background: rgba(98, 100, 167, 0.12);
  border-color: rgba(98, 100, 167, 0.3);
}

html[data-theme="dark"] .cctrl-teaser-cta__text {
  color: var(--text-secondary-dark, rgba(255, 255, 255, 0.65));
}

html[data-theme="dark"] .cctrl-teaser-cta__link {
  color: var(--lav-300, #b0b3e0);
}

html[data-theme="dark"] .cctrl-teaser-cta__link:hover {
  color: #ffffff;
}