/**
 * Trulos Advertising — Phase D visual design system
 * Namespaced under .trulos-ad* so host pages are not affected.
 */

.trulos-ad-slot,
.trulos-ad-frame {
  container-type: inline-size;
  container-name: trulos-ad;
  width: 100%;
  max-width: 100%;
}

/* Collapse host slot when delivery returns nothing (no large blank gap). */
.trulos-ad-slot:empty {
  display: none;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.trulos-ad {
  --trulos-ad-radius: 10px;
  --trulos-ad-radius-sm: 6px;
  --trulos-ad-border: #d5dce3;
  --trulos-ad-surface: #ffffff;
  --trulos-ad-surface-muted: #f3f6f8;
  --trulos-ad-surface-elevated: #ffffff;
  --trulos-ad-text: #1a2332;
  --trulos-ad-text-muted: #5b6b7c;
  --trulos-ad-accent: #0b6e7a;
  --trulos-ad-accent-hover: #095a64;
  --trulos-ad-accent-contrast: #ffffff;
  --trulos-ad-shadow: 0 1px 2px rgba(26, 35, 50, 0.06), 0 8px 20px rgba(26, 35, 50, 0.06);
  --trulos-ad-gap: 0.75rem;
  --trulos-ad-pad: 0.875rem;
  --trulos-ad-font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --trulos-ad-headline-size: 1rem;
  --trulos-ad-headline-weight: 650;
  --trulos-ad-body-size: 0.875rem;
  --trulos-ad-sponsor-size: 0.6875rem;
  --trulos-ad-cta-size: 0.8125rem;
  --trulos-ad-focus: 0 0 0 3px rgba(11, 110, 122, 0.35);
  --trulos-ad-aspect: auto;
  --trulos-ad-media-fit: cover;

  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: 100%;
  font-family: var(--trulos-ad-font);
  color: var(--trulos-ad-text);
  background: var(--trulos-ad-surface);
  border: 1px solid var(--trulos-ad-border);
  border-radius: var(--trulos-ad-radius);
  box-shadow: var(--trulos-ad-shadow);
  overflow: hidden;
  line-height: 1.35;
}

.trulos-ad *,
.trulos-ad *::before,
.trulos-ad *::after {
  box-sizing: border-box;
}

.trulos-ad--dark,
[data-bs-theme="dark"] .trulos-ad,
.trulos-ad-frame--dark .trulos-ad {
  --trulos-ad-border: #2c3848;
  --trulos-ad-surface: #151c26;
  --trulos-ad-surface-muted: #1c2532;
  --trulos-ad-surface-elevated: #1c2532;
  --trulos-ad-text: #eef2f6;
  --trulos-ad-text-muted: #9aabbc;
  --trulos-ad-accent: #2aa4b3;
  --trulos-ad-accent-hover: #3db8c6;
  --trulos-ad-accent-contrast: #041316;
  --trulos-ad-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 24px rgba(0, 0, 0, 0.28);
  --trulos-ad-focus: 0 0 0 3px rgba(42, 164, 179, 0.45);
}

@media (prefers-color-scheme: dark) {
  .trulos-ad--auto-dark {
    --trulos-ad-border: #2c3848;
    --trulos-ad-surface: #151c26;
    --trulos-ad-surface-muted: #1c2532;
    --trulos-ad-surface-elevated: #1c2532;
    --trulos-ad-text: #eef2f6;
    --trulos-ad-text-muted: #9aabbc;
    --trulos-ad-accent: #2aa4b3;
    --trulos-ad-accent-hover: #3db8c6;
    --trulos-ad-accent-contrast: #041316;
    --trulos-ad-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 24px rgba(0, 0, 0, 0.28);
  }
}

.trulos-ad__link {
  display: block;
  color: inherit;
  text-decoration: none;
  outline: none;
  min-height: 44px;
}

.trulos-ad__link:focus-visible {
  box-shadow: var(--trulos-ad-focus);
}

.trulos-ad__link:hover .trulos-ad__cta {
  background: var(--trulos-ad-accent-hover);
}

.trulos-ad__inner {
  display: grid;
  gap: var(--trulos-ad-gap);
  padding: var(--trulos-ad-pad);
  align-items: center;
}

.trulos-ad__sponsor {
  display: inline-block;
  margin: 0 0 0.35rem;
  padding: 0;
  font-size: var(--trulos-ad-sponsor-size);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--trulos-ad-text-muted);
  line-height: 1.2;
}

.trulos-ad__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--trulos-ad-radius-sm);
  background: var(--trulos-ad-surface-muted);
  aspect-ratio: var(--trulos-ad-aspect, 16 / 9);
  min-height: 72px;
}

.trulos-ad__media img,
.trulos-ad__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--trulos-ad-media-fit, cover);
  object-position: center;
}

.trulos-ad__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 28px;
}

.trulos-ad__logo {
  display: block;
  max-height: 32px;
  max-width: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
  background: transparent;
}

.trulos-ad--dark .trulos-ad__logo,
.trulos-ad-frame--dark .trulos-ad__logo {
  /* Transparent dark logos: light plate behind without altering pixels */
  background: rgba(255, 255, 255, 0.92);
  border-radius: 4px;
  padding: 3px 5px;
}

.trulos-ad__content {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.trulos-ad__headline {
  display: block;
  font-size: var(--trulos-ad-headline-size);
  font-weight: var(--trulos-ad-headline-weight);
  color: var(--trulos-ad-text);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.trulos-ad__body {
  display: block;
  font-size: var(--trulos-ad-body-size);
  color: var(--trulos-ad-text-muted);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.trulos-ad__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 0.25rem;
  min-height: 36px;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--trulos-ad-accent);
  color: var(--trulos-ad-accent-contrast);
  font-size: var(--trulos-ad-cta-size);
  font-weight: 650;
  line-height: 1.1;
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: background 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .trulos-ad__cta {
    transition: none;
  }
}

.trulos-ad__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 0.75rem;
  border-radius: var(--trulos-ad-radius-sm);
  background: var(--trulos-ad-surface-muted);
  color: var(--trulos-ad-text-muted);
  font-size: 0.8125rem;
  text-align: center;
}

.trulos-ad--no-image .trulos-ad__media {
  display: none;
}

.trulos-ad--no-logo .trulos-ad__logo-wrap {
  display: none;
}

.trulos-ad--compact {
  --trulos-ad-pad: 0.65rem;
  --trulos-ad-gap: 0.55rem;
  --trulos-ad-headline-size: 0.9375rem;
  box-shadow: none;
}

.trulos-ad--fallback {
  box-shadow: none;
}

/* ---- Native company ---- */
.trulos-ad--native-company .trulos-ad__inner,
.trulos-ad--native .trulos-ad__inner {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "sponsor sponsor"
    "logo content"
    "media content";
}

.trulos-ad--native-company .trulos-ad__sponsor,
.trulos-ad--native .trulos-ad__sponsor {
  grid-area: sponsor;
}

.trulos-ad--native-company .trulos-ad__logo-wrap,
.trulos-ad--native .trulos-ad__logo-wrap {
  grid-area: logo;
  align-self: start;
}

.trulos-ad--native-company .trulos-ad__media,
.trulos-ad--native .trulos-ad__media {
  grid-area: media;
  width: 96px;
  aspect-ratio: 1;
}

.trulos-ad--native-company .trulos-ad__content,
.trulos-ad--native .trulos-ad__content {
  grid-area: content;
}

.trulos-ad--native-company.trulos-ad--no-image .trulos-ad__inner,
.trulos-ad--native.trulos-ad--no-image .trulos-ad__inner {
  grid-template-areas:
    "sponsor sponsor"
    "logo content";
}

@container trulos-ad (max-width: 420px) {
  .trulos-ad--native-company .trulos-ad__inner,
  .trulos-ad--native .trulos-ad__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "sponsor"
      "logo"
      "media"
      "content";
  }

  .trulos-ad--native-company .trulos-ad__media,
  .trulos-ad--native .trulos-ad__media {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

/* ---- Native product ---- */
.trulos-ad--native-product .trulos-ad__inner {
  grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
  grid-template-areas:
    "media sponsor"
    "media content";
  align-items: stretch;
}

.trulos-ad--native-product .trulos-ad__media {
  grid-area: media;
  aspect-ratio: 4 / 3;
  min-height: 110px;
  height: 100%;
}

.trulos-ad--native-product .trulos-ad__sponsor {
  grid-area: sponsor;
  align-self: start;
}

.trulos-ad--native-product .trulos-ad__content {
  grid-area: content;
}

.trulos-ad--native-product .trulos-ad__logo-wrap {
  margin-bottom: 0.15rem;
}

@container trulos-ad (max-width: 420px) {
  .trulos-ad--native-product .trulos-ad__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "sponsor"
      "media"
      "content";
  }
}

/* ---- Horizontal ---- */
.trulos-ad--horizontal {
  --trulos-ad-pad: 0;
}

.trulos-ad--horizontal .trulos-ad__inner {
  grid-template-columns: minmax(140px, 42%) minmax(0, 1fr);
  gap: 0;
  padding: 0;
  min-height: 132px;
}

.trulos-ad--horizontal .trulos-ad__media {
  border-radius: 0;
  height: 100%;
  min-height: 132px;
  aspect-ratio: auto;
}

.trulos-ad--horizontal .trulos-ad__content {
  padding: 0.9rem 1rem;
  justify-content: center;
}

@container trulos-ad (max-width: 560px) {
  .trulos-ad--horizontal .trulos-ad__inner {
    grid-template-columns: 1fr;
  }

  .trulos-ad--horizontal .trulos-ad__media {
    min-height: 140px;
    aspect-ratio: 2.4 / 1;
  }
}

/* ---- Mobile banner ---- */
.trulos-ad--mobile,
.trulos-ad--mobile-banner {
  --trulos-ad-pad: 0.55rem 0.7rem;
  --trulos-ad-gap: 0.55rem;
  --trulos-ad-headline-size: 0.875rem;
  box-shadow: none;
}

.trulos-ad--mobile .trulos-ad__inner,
.trulos-ad--mobile-banner .trulos-ad__inner {
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  padding: var(--trulos-ad-pad);
  min-height: 64px;
}

.trulos-ad--mobile .trulos-ad__media,
.trulos-ad--mobile-banner .trulos-ad__media {
  width: 56px;
  height: 56px;
  aspect-ratio: 1;
  min-height: 56px;
}

.trulos-ad--mobile .trulos-ad__sponsor,
.trulos-ad--mobile-banner .trulos-ad__sponsor {
  position: absolute;
  top: 0.35rem;
  right: 0.55rem;
  margin: 0;
}

.trulos-ad--mobile .trulos-ad__cta,
.trulos-ad--mobile-banner .trulos-ad__cta {
  margin-top: 0;
  min-height: 40px;
  padding: 0.35rem 0.7rem;
  white-space: nowrap;
}

.trulos-ad--mobile .trulos-ad__body,
.trulos-ad--mobile-banner .trulos-ad__body {
  display: none;
}

@container trulos-ad (max-width: 340px) {
  .trulos-ad--mobile .trulos-ad__inner,
  .trulos-ad--mobile-banner .trulos-ad__inner {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .trulos-ad--mobile .trulos-ad__cta,
  .trulos-ad--mobile-banner .trulos-ad__cta {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
  }
}

/* ---- Sidebar ---- */
.trulos-ad--sidebar {
  max-width: 320px;
}

.trulos-ad--sidebar .trulos-ad__inner {
  grid-template-columns: 1fr;
  align-items: stretch;
}

.trulos-ad--sidebar .trulos-ad__media {
  aspect-ratio: 4 / 3;
  width: 100%;
}

/* ---- Square ---- */
.trulos-ad--square {
  --trulos-ad-pad: 0;
  max-width: 360px;
}

.trulos-ad--square .trulos-ad__inner {
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
}

.trulos-ad--square .trulos-ad__media {
  border-radius: 0;
  aspect-ratio: 1;
  width: 100%;
}

.trulos-ad--square .trulos-ad__content {
  padding: 0.8rem 0.9rem 0.95rem;
  background: var(--trulos-ad-surface-elevated);
  border-top: 1px solid var(--trulos-ad-border);
}

.trulos-ad--square .trulos-ad__sponsor {
  margin-bottom: 0.25rem;
}

/* Prefer solid content panel over text on image */
.trulos-ad--square .trulos-ad__overlay {
  display: none;
}

/* ---- Marketplace tile ---- */
.trulos-ad--marketplace-tile,
.trulos-ad--inline {
  --trulos-ad-shadow: 0 1px 2px rgba(26, 35, 50, 0.05);
}

.trulos-ad--marketplace-tile .trulos-ad__inner,
.trulos-ad--inline .trulos-ad__inner {
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: start;
}

.trulos-ad--marketplace-tile .trulos-ad__media,
.trulos-ad--inline .trulos-ad__media {
  width: 88px;
  aspect-ratio: 1;
}

.trulos-ad--marketplace-tile .trulos-ad__sponsor,
.trulos-ad--inline .trulos-ad__sponsor {
  color: var(--trulos-ad-accent);
}

@container trulos-ad (max-width: 360px) {
  .trulos-ad--marketplace-tile .trulos-ad__inner,
  .trulos-ad--inline .trulos-ad__inner {
    grid-template-columns: 1fr;
  }

  .trulos-ad--marketplace-tile .trulos-ad__media,
  .trulos-ad--inline .trulos-ad__media {
    width: 100%;
    aspect-ratio: 16 / 10;
  }
}

/* ---- Image banner (finished artwork) ---- */
.trulos-ad--image-banner {
  --trulos-ad-pad: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.trulos-ad--image-banner .trulos-ad__inner {
  gap: 0.4rem;
  padding: 0;
}

.trulos-ad--image-banner .trulos-ad__sponsor {
  margin: 0 0 0.2rem 0.1rem;
}

.trulos-ad--image-banner .trulos-ad__media {
  border-radius: var(--trulos-ad-radius);
  border: 1px solid var(--trulos-ad-border);
  background: var(--trulos-ad-surface-muted);
  aspect-ratio: var(--trulos-ad-aspect, 3.2 / 1);
  overflow: hidden;
}

.trulos-ad--image-banner .trulos-ad__image {
  object-fit: contain; /* preserve finished artwork */
}

.trulos-ad--image-banner .trulos-ad__content {
  display: none; /* no automatic copy overlay */
}

.trulos-ad--image-banner .trulos-ad__link:focus-visible .trulos-ad__media {
  box-shadow: var(--trulos-ad-focus);
}

/* Gallery / admin frame helpers (outside production ad) */
.trulos-ad-frame {
  margin: 0 auto;
  background: #e8eef2;
  border: 1px dashed #b7c3cf;
  border-radius: 12px;
  padding: 1rem;
}

.trulos-ad-frame--dark {
  background: #0d131b;
  border-color: #334155;
}

.trulos-ad-frame__meta {
  font-size: 0.75rem;
  color: #5b6b7c;
  margin-bottom: 0.65rem;
}

.trulos-ad-frame--dark .trulos-ad-frame__meta {
  color: #9aabbc;
}