/* ==========================================================================
   Google source widget — in-article box (Sledovat / Upřednostnit)
   Verze 1.0
   Vše je scopované pod .gsw, aby se to nepralo s CSS portálu.
   ========================================================================== */

.gsw {
  /* --- tokeny, přepiš na úrovni portálu ------------------------------- */
  --gsw-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gsw-bg: #f4f5f7;
  --gsw-border: #e3e5e8;
  --gsw-radius: 12px;

  --gsw-title: #16181c;
  --gsw-text: #5b6169;

  --gsw-btn-bg: #ffffff;
  --gsw-btn-bg-hover: #f7f8f9;
  --gsw-btn-border: #d8dbdf;
  --gsw-btn-border-hover: #bcc1c7;
  --gsw-btn-text: #16181c;

  --gsw-focus: #1a73e8;

  --gsw-gap: 16px;
  --gsw-pad: 16px;

  /* --- reset ----------------------------------------------------------- */
  box-sizing: border-box;
  display: block;
  margin: 28px 0;
  padding: var(--gsw-pad);
  border: 1px solid var(--gsw-border);
  border-radius: var(--gsw-radius);
  background: var(--gsw-bg);
  font-family: var(--gsw-font);
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
  position: relative;
  container-type: inline-size;
  container-name: gsw;
}

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

#w .gsw p { margin: 0; padding: 0; }

.gsw[hidden] { display: none; }

/* --- layout ---------------------------------------------------------- */

.gsw__inner {
  display: flex;
  align-items: center;
  gap: var(--gsw-gap);
  flex-wrap: nowrap;
}

.gsw__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.gsw__logo img,
.gsw__logo svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 32px;
  object-fit: contain;
}

.gsw__text {
  flex: 1 1 auto;
  min-width: 0;
}

.gsw__title {
  color: var(--gsw-title);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.gsw__subtitle {
  color: var(--gsw-text);
  font-size: 15px;
  font-weight: 400;
  margin-top: 2px !important;
}

.gsw__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* --- tlačítka -------------------------------------------------------- */

#w a.gsw__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--gsw-btn-border);
  border-radius: 10px;
  background: var(--gsw-btn-bg);
  color: var(--gsw-btn-text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

#w a.gsw__btn:hover {
  background: var(--gsw-btn-bg-hover);
  border-color: var(--gsw-btn-border-hover);
  color: var(--gsw-btn-text);
  text-decoration: none;
}

# a.gsw__btn:focus-visible {
  outline: 2px solid var(--gsw-focus);
  outline-offset: 2px;
}

#w a.gsw__btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

.gsw__btn-icon {
  flex: 0 0 auto;
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* --- zavírací křížek (volitelný) ------------------------------------- */

.gsw__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--gsw-text);
  cursor: pointer;
  line-height: 0;
}

.gsw[data-dismissible="true"] .gsw__close { display: flex; }
.gsw[data-dismissible="true"] .gsw__inner { padding-right: 26px; }
.gsw__close:hover { background: rgba(0, 0, 0, .06); }
.gsw__close:focus-visible { outline: 2px solid var(--gsw-focus); outline-offset: 2px; }
.gsw__close svg { width: 16px; height: 16px; }

/* --- mobil / úzký sloupec -------------------------------------------
   Primárně container query (řídí se šířkou boxu, ne okna), fallback
   na media query pro starší prohlížeče.
   -------------------------------------------------------------------- */

@container gsw (max-width: 560px) {
  .gsw__inner { flex-wrap: wrap; }
  .gsw__text { flex: 1 1 160px; }
  .gsw__actions { flex: 1 1 100%; }
  .gsw__btn { flex: 1 1 0; padding: 10px 12px; }
}

@container gsw (max-width: 340px) {
  .gsw__actions { flex-direction: column; align-items: stretch; }
}

@supports not (container-type: inline-size) {
  @media (max-width: 600px) {
    .gsw__inner { flex-wrap: wrap; }
    .gsw__text { flex: 1 1 160px; }
    .gsw__actions { flex: 1 1 100%; }
    #w a.gsw__btn { flex: 1 1 0; padding: 10px 12px; }
  }
}

/* --- natvrdo vynucené varianty --------------------------------------
   Pro portály, které mají oddělenou desktop a mobilní šablonu.
   data-layout="mobile" / data-layout="desktop"
   -------------------------------------------------------------------- */

.gsw[data-layout="mobile"] .gsw__inner { flex-wrap: wrap; }
.gsw[data-layout="mobile"] .gsw__text { flex: 1 1 160px; }
.gsw[data-layout="mobile"] .gsw__actions { flex: 1 1 100%; }
.gsw[data-layout="mobile"] #w a.gsw__btn { flex: 1 1 0; padding: 10px 12px; }

.gsw[data-layout="desktop"] .gsw__inner { flex-wrap: nowrap; }
.gsw[data-layout="desktop"] .gsw__actions { flex: 0 0 auto; }
.gsw[data-layout="desktop"] #w a.gsw__btn { flex: 0 0 auto; padding: 10px 18px; }

/* --- tmavý režim (jen pokud ho portál používá) ------------------------ */

.gsw[data-theme="dark"] {
  --gsw-bg: #1f2126;
  --gsw-border: #303339;
  --gsw-title: #f1f2f4;
  --gsw-text: #a5abb3;
  --gsw-btn-bg: #2a2d33;
  --gsw-btn-bg-hover: #33373e;
  --gsw-btn-border: #3c4047;
  --gsw-btn-border-hover: #4c5159;
  --gsw-btn-text: #f1f2f4;
}

@media (prefers-reduced-motion: reduce) {
  #w a.gsw__btn { transition: none; }
}

@media print {
  .gsw { display: none; }
}
