/* ==========================================================================
   iService Sekten Medien — Core Module Stylesheet
   100% Sandboxed under .ism-module-wrapper (Zero font duplicates —
   automatically inherits Urbanist & Lato from the live WordPress/Divi system)
   Author: Oliver Ottner / iService (https://iservice.at/)
   ========================================================================== */

.ism-module-wrapper,
.ism-module-wrapper *,
.ism-module-wrapper *::before,
.ism-module-wrapper *::after {
  box-sizing: border-box;
}

.ism-module-wrapper {
  --ism-deep-blue: #41628c;
  --ism-pale-blue: #d1dfe7;
  --ism-beige-bg: #f8f6ed;
  --ism-orange-cta: #ca8c32;
  --ism-orange-text: #9f6517;
  --ism-off-black: #1d1d1b;
  --ism-font-heading: 'Urbanist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ism-font-body: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  width: 100%;
  position: relative;
  font-family: var(--ism-font-body);
  color: var(--ism-off-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Accessibility Screen Reader Only */
.ism-module-wrapper .ism-sr-only {
  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-width: 0 !important;
}

/* WCAG 2.4.7 Focus Visible Indicators inside module */
.ism-module-wrapper :focus:not(:focus-visible) {
  outline: none !important;
}

.ism-module-wrapper :focus-visible {
  outline: 3px solid #41628c !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
  box-shadow: 0 0 0 5px rgba(155, 196, 222, 0.4) !important;
}

/* --------------------------------------------------------------------------
   1. Filter Pills Bar (Themen-Filter)
   -------------------------------------------------------------------------- */
.ism-module-wrapper .ism-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem; /* 8px (gap-2) */
  margin-bottom: 2rem; /* 32px (mb-8) */
}

.ism-module-wrapper .ism-filter-pill {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0.5rem 0.875rem; /* py-2 px-3.5 (8px 14px) */
  border-radius: 0.75rem; /* rounded-xl (12px) */
  font-family: var(--ism-font-heading);
  font-size: 0.875rem; /* text-sm (14px) */
  line-height: 1.25rem; /* 20px */
  font-weight: 600; /* font-semibold */
  color: var(--ism-deep-blue);
  background-color: rgba(209, 223, 231, 0.2); /* bg-paleBlue/20 */
  border: 1px solid rgba(209, 223, 231, 0.4); /* border-paleBlue/40 */
  cursor: pointer;
  outline: none;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.ism-module-wrapper .ism-filter-pill:hover {
  background-color: rgba(209, 223, 231, 0.4); /* hover:bg-paleBlue/40 */
}

.ism-module-wrapper .ism-filter-pill.is-active {
  background-color: var(--ism-deep-blue);
  color: #ffffff;
  border-color: var(--ism-deep-blue);
}

.ism-module-wrapper .ism-filter-pill .ism-filter-count {
  font-weight: 400; /* font-normal */
  opacity: 0.75; /* opacity-75 */
}

/* --------------------------------------------------------------------------
   2. Media List Container (.ism-list-card)
   -------------------------------------------------------------------------- */
.ism-module-wrapper .ism-list-card {
  background-color: #ffffff;
  border-radius: 1rem; /* rounded-2xl (16px) */
  border: 1px solid #e5e7eb; /* border-gray-200 */
  padding: 1.5rem; /* p-6 (24px) */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
}

@media (min-width: 768px) {
  .ism-module-wrapper .ism-list-card {
    padding: 2rem; /* md:p-8 (32px) */
  }
}

/* --------------------------------------------------------------------------
   3. Medienbeitrag Row (.ism-medien-row)
   -------------------------------------------------------------------------- */
.ism-module-wrapper .ism-medien-row {
  position: relative;
  padding-top: 1rem; /* py-4 (16px) */
  padding-bottom: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem; /* gap-2 (8px) */
  border-top: 1px solid #f3f4f6; /* divide-y divide-gray-100 */
}

.ism-module-wrapper .ism-medien-row[data-url]:not([data-url=""]) {
  cursor: pointer;
}

.ism-module-wrapper .ism-medien-row.is-first-visible,
.ism-module-wrapper .ism-medien-row:first-child {
  border-top: none;
}

.ism-module-wrapper .ism-medien-row.is-hidden {
  display: none !important;
}

@media (min-width: 640px) {
  .ism-module-wrapper .ism-medien-row {
    padding-top: 1.25rem; /* sm:py-5 (20px) */
    padding-bottom: 1.25rem;
  }
}

@media (min-width: 768px) {
  .ism-module-wrapper .ism-medien-row {
    flex-direction: row;
    align-items: baseline;
    gap: 1.5rem; /* md:gap-6 (24px) */
  }
}

.ism-module-wrapper .ism-row-main {
  flex: 1 1 0%;
  min-width: 0;
}

/* Meta Line: Date • Outlet */
.ism-module-wrapper .ism-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem; /* gap-2 (8px) */
  margin-bottom: 0.375rem; /* mb-1.5 (6px) */
  font-family: var(--ism-font-heading);
  font-size: 0.75rem; /* text-xs (12px) */
  line-height: 1rem;
}

.ism-module-wrapper .ism-row-date {
  font-weight: 800; /* font-extrabold */
  color: var(--ism-orange-cta); /* #ca8c32 */
  letter-spacing: 0.025em; /* tracking-wide */
}

.ism-module-wrapper .ism-row-dot {
  color: #d1d5db; /* text-gray-300 */
}

.ism-module-wrapper .ism-row-outlet {
  text-transform: uppercase;
  font-weight: 700; /* font-bold */
  color: #4b5563; /* text-gray-600 */
  letter-spacing: 0.05em; /* tracking-wider */
}

/* Headline H3 & Stretched Row Link */
.ism-module-wrapper .ism-row-title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--ism-font-heading);
  font-weight: 600;
  font-size: 1rem; /* text-base (16px) */
  line-height: 1.375; /* leading-snug */
  color: var(--ism-deep-blue);
}

@media (min-width: 640px) {
  .ism-module-wrapper .ism-row-title {
    font-size: 1.125rem; /* sm:text-lg (18px) */
  }
}

.ism-module-wrapper .ism-row-link {
  color: var(--ism-deep-blue) !important;
  font-family: var(--ism-font-heading);
  font-weight: 600;
  font-size: inherit;
  line-height: 1.375;
  text-decoration: underline !important;
  text-decoration-color: rgba(202, 140, 50, 0.4) !important; /* decoration-orangeCta/40 */
  text-decoration-thickness: 1px !important; /* decoration-1 */
  text-underline-offset: 4px !important; /* underline-offset-4 */
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

/* Stretched overlay so the entire Medienbeitrag row acts as a single clickable link */
.ism-module-wrapper .ism-row-link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.ism-module-wrapper .ism-medien-row:hover .ism-row-link,
.ism-module-wrapper .ism-row-link:hover,
.ism-module-wrapper .ism-row-link:focus-visible {
  color: var(--ism-orange-cta) !important;
  text-decoration-color: var(--ism-deep-blue) !important;
}

.ism-module-wrapper .ism-row-link:active {
  color: var(--ism-orange-cta) !important;
}

.ism-module-wrapper .ism-row-title-plain {
  color: var(--ism-deep-blue);
  font-family: var(--ism-font-heading);
  font-weight: 600;
  font-size: inherit;
  line-height: 1.375;
}

/* Right Action / Domain Badge */
.ism-module-wrapper .ism-row-side {
  flex-shrink: 0;
  padding-top: 0.25rem; /* pt-1 */
}

@media (min-width: 768px) {
  .ism-module-wrapper .ism-row-side {
    padding-top: 0;
  }
}

.ism-module-wrapper .ism-domain-btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem; /* gap-1.5 (6px) */
  font-family: var(--ism-font-heading);
  font-size: 0.75rem; /* text-xs (12px) */
  line-height: 1rem;
  font-weight: 700; /* font-bold */
  color: var(--ism-deep-blue) !important;
  background-color: rgba(209, 223, 231, 0.2); /* bg-paleBlue/20 */
  padding: 0.375rem 0.75rem; /* py-1.5 px-3 (6px 12px) */
  border-radius: 0.5rem; /* rounded-lg (8px) */
  border: 1px solid rgba(209, 223, 231, 0.4); /* border-paleBlue/40 */
  text-decoration: none !important;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Hovering anywhere on the row inverts the right pill to white text on original gold (#ca8c32) */
.ism-module-wrapper .ism-medien-row:hover .ism-domain-btn,
.ism-module-wrapper .ism-medien-row:focus-within .ism-domain-btn,
.ism-module-wrapper .ism-domain-btn:hover,
.ism-module-wrapper .ism-domain-btn:active {
  background-color: var(--ism-orange-cta) !important;
  border-color: var(--ism-orange-cta) !important;
  color: #ffffff !important;
}

.ism-module-wrapper .ism-domain-btn svg {
  width: 0.875rem; /* w-3.5 (14px) */
  height: 0.875rem; /* h-3.5 (14px) */
  flex-shrink: 0;
  display: block;
}

.ism-module-wrapper .ism-print-badge {
  display: inline-block;
  font-family: var(--ism-font-heading);
  font-size: 0.75rem; /* text-xs (12px) */
  line-height: 1rem;
  font-weight: 500; /* font-medium */
  font-style: italic;
  color: #6b7280; /* text-gray-500 */
  padding: 0.25rem 0.625rem; /* py-1 px-2.5 (4px 10px) */
  background-color: #f9fafb; /* bg-gray-50 */
  border-radius: 0.25rem; /* rounded (4px) */
  border: 1px solid #e5e7eb; /* border-gray-200 */
}

/* Empty State when a filter has 0 items */
.ism-module-wrapper .ism-empty-state {
  padding: 2rem 1rem;
  text-align: center;
  font-family: var(--ism-font-heading);
  font-size: 0.95rem;
  color: #6b7280;
}

/* --------------------------------------------------------------------------
   4. Pagination Bar (.ism-pagination)
   -------------------------------------------------------------------------- */
.ism-module-wrapper .ism-pagination {
  margin-top: 2rem; /* mt-8 (32px) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem; /* gap-4 (16px) */
  padding: 1rem; /* p-4 (16px) */
  background-color: #ffffff;
  border-radius: 0.75rem; /* rounded-xl (12px) */
  border: 1px solid #e5e7eb; /* border-gray-200 */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
}

@media (min-width: 640px) {
  .ism-module-wrapper .ism-pagination {
    flex-direction: row;
  }
}

.ism-module-wrapper .ism-pagination-info {
  font-family: var(--ism-font-heading);
  font-size: 0.875rem; /* text-sm (14px) */
  line-height: 1.25rem;
  font-weight: 500; /* font-medium */
  color: #4b5563; /* text-gray-600 */
}

.ism-module-wrapper .ism-pagination-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem; /* gap-1.5 (6px) */
}

.ism-module-wrapper .ism-page-step-btn,
.ism-module-wrapper .ism-page-num-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font-family: var(--ism-font-heading);
  font-size: 0.75rem; /* text-xs (12px) */
  line-height: 1rem;
  font-weight: 700; /* font-bold */
  border-radius: 0.5rem; /* rounded-lg (8px) */
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.ism-module-wrapper .ism-page-step-btn {
  padding: 0.5rem 0.875rem; /* py-2 px-3.5 */
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--ism-deep-blue);
  background-color: #ffffff;
  border: 1px solid #d1d5db; /* border-gray-300 */
  cursor: pointer;
}

.ism-module-wrapper .ism-page-step-btn:hover:not(:disabled) {
  background-color: rgba(209, 223, 231, 0.2); /* hover:bg-paleBlue/20 */
}

.ism-module-wrapper .ism-page-step-btn:active:not(:disabled) {
  background-color: var(--ism-deep-blue);
  color: #ffffff;
}

.ism-module-wrapper .ism-page-step-btn:disabled {
  color: #9ca3af; /* text-gray-400 */
  border-color: #e5e7eb; /* border-gray-200 */
  cursor: not-allowed;
  opacity: 0.5;
}

.ism-module-wrapper .ism-page-num-btn {
  width: 2.25rem; /* w-9 (36px) */
  height: 2.25rem; /* h-9 (36px) */
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #ffffff;
  color: var(--ism-deep-blue);
  border: 1px solid #e5e7eb; /* border-gray-200 */
}

.ism-module-wrapper .ism-page-num-btn:hover:not(.is-active) {
  background-color: rgba(209, 223, 231, 0.2);
}

.ism-module-wrapper .ism-page-num-btn.is-active {
  background-color: var(--ism-deep-blue);
  color: #ffffff;
  border-color: var(--ism-deep-blue);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .ism-module-wrapper *,
  .ism-module-wrapper *::before,
  .ism-module-wrapper *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}