/* outro.css — cookie notice (corner-pill expand-on-click) + small utilities */

.notice-cookies {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 1000;
  max-width: 360px;
  font-size: .9rem;
}
.notice-cookies[hidden] { display: none; }

.notice-cookies-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--color-deep);
  color: #fff;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  padding: 11px 18px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
}
.notice-cookies-pill svg { width: 18px; height: 18px; color: var(--color-accent); }

.notice-cookies-panel {
  display: none;
  background: var(--color-card);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  padding: 20px 20px 18px;
  box-shadow: var(--shadow-soft);
}
.notice-cookies.is-expanded .notice-cookies-pill { display: none; }
.notice-cookies.is-expanded .notice-cookies-panel { display: block; }

.notice-cookies-panel p { font-size: .9rem; margin-bottom: 14px; color: var(--color-ink-soft); }
.notice-cookies-panel p a { color: var(--color-primary); }
.notice-cookies-actions { display: flex; gap: 10px; }
.notice-cookies-actions button {
  flex: 1;
  min-height: 44px;
  font: inherit;
  font-weight: 600;
  border-radius: var(--radius-s);
  cursor: pointer;
  border: 1px solid var(--color-primary);
}
.notice-cookies-actions button[data-consent="yes"] { background: var(--color-primary); color: #fff; }
.notice-cookies-actions button[data-consent="yes"]:hover { background: var(--color-primary-light); }
.notice-cookies-actions button[data-consent="no"] { background: transparent; color: var(--color-primary); }
.notice-cookies-actions button[data-consent="no"]:hover { background: #eef4ef; }

.tag-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tag-row span {
  font-size: .82rem;
  padding: 6px 14px;
  border-radius: 999px;
  background: #eef4ef;
  color: var(--color-deep);
  border: 1px solid var(--color-line);
}

.split-feature { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: center; }
.split-feature img { border-radius: var(--radius-m); object-fit: cover; width: 100%; }
.split-feature ul { color: var(--color-ink-soft); }
.split-feature li { margin-bottom: .6em; }

@media (min-width: 880px) {
  .split-feature { grid-template-columns: 1fr 1fr; }
  .split-feature.flip > :first-child { order: 2; }
}