/* RU readability + buttons polish for Portugal Gate */

:root {
  --pg-bg: #063b3d;
  --pg-bg-deep: #032820;
  --pg-text: #f4f8ef;
  --pg-muted: rgba(244, 248, 239, 0.82);
  --pg-card: rgba(255, 255, 255, 0.085);
  --pg-card-border: rgba(255, 255, 255, 0.18);
  --pg-yellow: #ffd36f;
  --pg-yellow-2: #ffbf4d;
  --pg-yellow-text: #092c27;
  --pg-outline: rgba(255, 211, 111, 0.58);
}

html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    "Noto Sans",
    "Liberation Sans",
    sans-serif !important;
  color: var(--pg-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Общая читаемость */
p,
li,
label,
input,
textarea,
select {
  line-height: 1.58;
}

p {
  color: var(--pg-muted);
  text-wrap: pretty;
}

/* Контейнеры */
main,
.container,
.page,
.page-shell,
.hero,
.section {
  width: min(100% - 40px, 1160px);
  margin-left: auto;
  margin-right: auto;
}

/* Верхнее меню */
header,
.site-header,
.navbar {
  background: rgba(2, 37, 31, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

header nav,
.site-header nav,
.nav,
.nav-links {
  gap: clamp(14px, 2vw, 28px);
}

header a,
.site-header a,
.nav a,
.nav-links a {
  color: rgba(244, 248, 239, 0.82) !important;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 14px;
  line-height: 1;
  text-decoration: none;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

header a:hover,
.site-header a:hover,
.nav a:hover,
.nav-links a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

header a.active,
header .active,
.site-header a.active,
.nav a.active,
.nav-links a.active,
header a[aria-current="page"],
.site-header a[aria-current="page"] {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 24px rgba(0, 0, 0, 0.16);
}

/* Заголовки: крупно только в hero/page-title, не внутри карточек */
main h1,
.hero h1,
.page-hero h1 {
  max-width: 820px;
  font-size: clamp(2.8rem, 5.2vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

main > h2,
.page-hero h2,
.section-title {
  font-size: clamp(2rem, 3.1vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

/* ВАЖНО: возвращаем нормальный размер заголовков внутри карточек */
.card h2,
.card h3,
article h2,
article h3,
.destination-card h2,
.destination-card h3,
.guide-card h2,
.guide-card h3,
.video-card h2,
.video-card h3,
.login-card h2,
.login-card h3,
form h2,
form h3 {
  font-size: clamp(1.18rem, 1.65vw, 1.65rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}

/* Карточки */
.card,
.destination-card,
.guide-card,
.video-card,
.login-card,
form,
article {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.105),
    rgba(255, 255, 255, 0.065)
  ) !important;
  border: 1px solid var(--pg-card-border) !important;
  box-shadow:
    0 20px 55px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.card p,
.destination-card p,
.guide-card p,
.video-card p {
  font-size: 0.98rem;
  line-height: 1.58;
}

/* Главные кнопки в контенте */
main a[href*="destinations"],
main a[href*="videos"],
main a[href*="login"],
main a[href*="auth/login"],
main .btn,
main .button,
main .cta,
form button,
.login-card button,
button[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 230, 160, 0.9) !important;
  background:
    linear-gradient(180deg, #ffe18a 0%, var(--pg-yellow) 48%, var(--pg-yellow-2) 100%) !important;
  color: var(--pg-yellow-text) !important;
  font-weight: 800 !important;
  letter-spacing: -0.012em;
  text-decoration: none !important;
  box-shadow:
    0 16px 34px rgba(255, 191, 77, 0.22),
    0 7px 18px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease,
    border-color 160ms ease;
}

/* Вторичная кнопка — например "Смотреть видео" */
main a[href*="videos"],
main .btn.secondary,
main .button.secondary,
main .cta.secondary {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.045)) !important;
  color: #ffffff !important;
  border-color: rgba(255, 211, 111, 0.55) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

/* Чтобы кнопка входа в форме была именно основной, а не вторичной */
form button,
.login-card button,
button[type="submit"] {
  width: 100%;
  background:
    linear-gradient(180deg, #ffe18a 0%, var(--pg-yellow) 48%, var(--pg-yellow-2) 100%) !important;
  color: var(--pg-yellow-text) !important;
}

main a[href*="destinations"]:hover,
main a[href*="videos"]:hover,
main a[href*="login"]:hover,
main a[href*="auth/login"]:hover,
main .btn:hover,
main .button:hover,
main .cta:hover,
form button:hover,
.login-card button:hover,
button[type="submit"]:hover {
  transform: translateY(-2px);
  filter: saturate(1.08) brightness(1.03);
  box-shadow:
    0 20px 42px rgba(255, 191, 77, 0.28),
    0 9px 24px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

main a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(255, 211, 111, 0.7) !important;
  outline-offset: 4px;
}

/* Плашки сверху */
.badge,
.eyebrow,
.kicker,
.pill {
  color: var(--pg-yellow) !important;
  border-color: rgba(255, 211, 111, 0.42) !important;
  background: rgba(255, 211, 111, 0.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Сетка */
.cards,
.destinations-grid,
.video-grid,
.grid {
  gap: clamp(18px, 2vw, 28px);
}

.destinations-grid,
.cards {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.video-grid {
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

footer {
  color: rgba(244, 248, 239, 0.82);
  font-size: 0.96rem;
  line-height: 1.45;
}

/* Мобильная версия */
@media (max-width: 820px) {
  main,
  .container,
  .page,
  .page-shell,
  .hero,
  .section {
    width: min(100% - 28px, 1160px);
  }

  main h1,
  .hero h1,
  .page-hero h1 {
    font-size: clamp(2.25rem, 11vw, 3.35rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
  }

  header nav,
  .site-header nav,
  .nav,
  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
  }

  header a,
  .site-header a,
  .nav a,
  .nav-links a {
    padding: 9px 12px;
    font-size: 0.92rem;
  }

  main a[href*="destinations"],
  main a[href*="videos"],
  main a[href*="login"],
  main a[href*="auth/login"],
  main .btn,
  main .button,
  main .cta {
    width: 100%;
    margin-bottom: 10px;
  }

  .video-grid {
    grid-template-columns: 1fr;
  }
}