/* ============================================================
   TEMA EMBED CARD — oEmbed iframe
   Варианты: .temb-card--full | --compact | --horizontal | --minimal
   ============================================================ */

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

html, body {
  margin:     0;
  padding:    0;
  background: transparent;
}

.temb-body {
  display:         flex;
  align-items:     flex-start;
  justify-content: center;
  padding:         8px 0 10px;   /* отступы сверху и снизу */
  background:      transparent;
  font-family:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BASE CARD (общий для всех вариантов)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.temb-card {
  --accent:     #0b008a;
  --accent-rgb: 11, 0, 138;
  --border:     #e0e0e0;
  --card-bg:    #ffffff;
  --corner:     28px;
  --radius:     5px;

  position:      relative;
  width:         100%;
  background:    var(--card-bg);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  overflow:      hidden;
}

/* Accent top bar */
.temb-card::before {
  content:    '';
  display:    block;
  height:     3px;
  background: var(--accent);
  position:   absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
}

/* Top-right Г-скобка */
.temb-card::after {
  display: none;
}

/* Bottom-left Г-скобка (на лейбл, т.к. ::after уже занят) */
.temb-card__label::before {
  display: none;
}

/* Label */
.temb-card__label {
  position:       relative;
  font-family:    'Rubik', sans-serif;
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color:          var(--accent);
  padding:        16px 20px 0;
  display:        flex;
  align-items:    center;
  gap:            12px;
  z-index:        1;
}

.temb-card__label::after {
  content:       '';
  flex:          1;
  height:        1px;
  background:    var(--border);
  margin-right:  44px;
}

/* Image */
.temb-card__media {
  overflow: hidden;
  background: #f5f5f5;
  line-height: 0;
}

.temb-card__media a { display: block; }

.temb-card__img {
  display:    block;
  width:      100%;
  height:     auto;
  object-fit: cover;
  transition: transform 0.35s ease;
}

/* Body */
.temb-card__body {
  padding:  18px 20px 20px;
}

.temb-card__title {
  font-size:   18px;
  font-weight: 700;
  line-height: 1.3;
  color:       #1a1a1a;
  margin:      0 0 7px;
}

.temb-card__title a {
  color:           inherit;
  text-decoration: none;
}

.temb-card__title a:hover {
  color:           var(--accent);
  text-decoration: underline;
}

.temb-card__excerpt {
  font-size:   14px;
  line-height: 1.6;
  color:       #5a5a70;
  margin:      0 0 14px;
}

/* Footer */
.temb-card__footer {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding-top: 12px;
  border-top:  1px solid var(--border);
}

.temb-card__logo { display: flex; align-items: center; flex-shrink: 0; }

.temb-card__logo-img {
  width:         28px !important;
  height:        28px !important;
  object-fit:    contain;
  border-radius: 5px;
}

.temb-card__site {
  font-family:    'Rubik', sans-serif;
  font-size:      12px;
  font-weight:    600;
  color:          #1a1a1a;
  flex:           1;
}

.temb-card__cta {
  font-family:     'Rubik', sans-serif;
  font-size:       10px;
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  0.08em;
  color:           var(--accent);
  text-decoration: none;
  padding:         5px 10px;
  border:          1px solid rgba(var(--accent-rgb), 0.3);
  border-radius:   4px;
  flex-shrink:     0;
  transition:      background 0.15s ease;
}

.temb-card__cta:hover {
  background: rgba(var(--accent-rgb), 0.06);
  border-color: var(--accent);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   VARIANT: full (default)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.temb-card--full .temb-card__media {
  margin: 10px 0 0;
}

.temb-card--full .temb-card__img {
  max-height: 360px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   VARIANT: compact
   Маленькое фото слева, текст справа
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.temb-card--compact .temb-card__body {
  display:    flex;
  gap:        12px;
  padding:    10px 18px 12px;
  align-items: center;
}

.temb-card--compact .temb-card__label {
  padding: 12px 18px 0;
  gap:     10px;
}

.temb-card--compact .temb-card__label::after {
  margin-right: 28px;
}

.temb-card--compact .temb-card__media {
  flex-shrink: 0;
  width:       108px;
  border-radius: 5px;
  overflow:    hidden;
  margin:      0;
}

.temb-card--compact .temb-card__img {
  width:      108px;
  height:     82px;
  object-fit: cover;
}

.temb-card--compact .temb-card__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.temb-card--compact .temb-card__title {
  font-size:   15px;
  line-height: 1.35;
  margin:      0;
}

.temb-card--compact .temb-card__excerpt {
  font-size:   13px;
  line-height: 1.45;
  margin:      0;
}

.temb-card--compact .temb-card__footer {
  margin-top: 0;
  padding:    8px 18px 12px;
  border-top: 1px solid var(--border);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   VARIANT: horizontal
   Фото 40% слева, весь текст справа
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.temb-card--horizontal {
  display:    flex;
  flex-direction: row;
  align-items: stretch;   /* растягиваем обе колонки на одну высоту */
  min-height: 180px;
}

.temb-card--horizontal::before {
  left: 0; right: 0;
}

.temb-card--horizontal::after { display: none; }

.temb-card--horizontal .temb-card__media {
  flex:          0 0 40%;
  max-width:     40%;
  border-radius: 0;
  margin:        0;
  display:       flex;    /* нужен чтобы <a> растянулся */
}

/* <a> внутри медиа тоже должен растянуться */
.temb-card--horizontal .temb-card__media a {
  display: flex;
  flex:    1;
}

.temb-card--horizontal .temb-card__img {
  width:      100%;
  height:     100%;   /* занимает всю высоту <a> */
  max-height: none;
  object-fit: cover;
}

.temb-card--horizontal .temb-card__body {
  flex:    1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px 20px 18px;
}

.temb-card--horizontal .temb-card__label {
  padding: 0 0 10px;
  font-size: 9px;
}

.temb-card--horizontal .temb-card__label::before { display: none; }
.temb-card--horizontal .temb-card__label::after  { margin-right: 8px; }

.temb-card--horizontal .temb-card__title {
  font-size: 16px;
}

.temb-card--horizontal .temb-card__excerpt {
  font-size: 13px;
  flex: 1;
}

.temb-card--horizontal .temb-card__footer {
  margin-top: auto;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   VARIANT: minimal (no image)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.temb-card--minimal .temb-card__media { display: none; }

.temb-card--minimal .temb-card__body {
  padding: 6px 20px 20px;
}

.temb-card--minimal .temb-card__label {
  padding: 16px 20px 0;
}

.temb-card--minimal .temb-card__title {
  font-size: 19px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DARK MODE (night theme palette)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html.gdt-dark .temb-card,
html.darkmysite_dark_mode_enabled .temb-card {
  --accent:     #7aa2ff;
  --accent-rgb: 122, 162, 255;
  --border:     rgba(231, 234, 240, 0.14);
  --card-bg:    #242833;
}

html.gdt-dark .temb-card__title,
html.darkmysite_dark_mode_enabled .temb-card__title,
html.gdt-dark .temb-card__site,
html.darkmysite_dark_mode_enabled .temb-card__site {
  color: #e7eaf0;
}

html.gdt-dark .temb-card__excerpt,
html.darkmysite_dark_mode_enabled .temb-card__excerpt {
  color: #b3bcc9;
}

html.gdt-dark .temb-card__media,
html.darkmysite_dark_mode_enabled .temb-card__media {
  background: #31343d;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ADAPTIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 480px) {
  .temb-card--horizontal {
    flex-direction: column;
  }

  .temb-card--horizontal .temb-card__media {
    flex:      none;
    max-width: none;
    width:     100%;
  }

  .temb-card--horizontal .temb-card__img {
    height:     200px;
    max-height: 200px;
  }
}