/* TopCasinoApex — Structure 4: Журнальная верстка */
:root {
  --green-dark: #0d2818;
  --green-mid: #1a4d2e;
  --green-light: #2d6a4f;
  --glass: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.15);
  --text: #e8f5e9;
  --text-dim: #a5d6a7;
  --logo-bg: rgba(13, 40, 24, 0.85);
  --font: 'DM Sans', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: linear-gradient(180deg, var(--green-dark) 0%, var(--green-mid) 40%, #0d2818 100%);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
}
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

.glass {
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
}

/* Header: logo left, nav right underlined, line under */
.header { padding: 1rem 0 0; }
.header-inner { display: flex; align-items: center; justify-content: space-between; }
.logo { font-weight: 600; font-size: 1.4rem; color: var(--text); text-decoration: none; }
.nav-underline { display: flex; gap: 2rem; }
.nav-underline a {
  color: var(--text-dim);
  text-decoration: none;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid transparent;
}
.nav-underline a:hover { color: var(--text); border-bottom-color: var(--green-light); }
.header-line { height: 1px; background: var(--glass-border); margin-top: 0.75rem; }

/* Main: background in content area */
.main {
  position: relative;
  background-image: url("images/hero-bg.png");
  background-size: cover;
  background-position: center;
}
.main::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(13, 40, 24, 0.88) 0%, rgba(26, 77, 46, 0.85) 100%);
  pointer-events: none;
}
.main > * { position: relative; z-index: 1; }

/* Hero: title left, large number/date right */
.hero-journal {
  padding: 3rem 0;
  position: relative;
}
.hero-journal .hero-inner { position: relative; z-index: 1; }
.hero-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.hero-journal h1 { font-size: 2.5rem; font-weight: 600; margin: 0; }
.hero-date { font-size: 4rem; font-weight: 600; color: var(--green-light); opacity: 0.8; line-height: 1; }

/* Block 1: Framed text */
.block-framed { padding: 2rem 0; }
.framed-block {
  border: 2px solid var(--glass-border);
  padding: 2rem;
  border-radius: 8px;
  background: var(--glass);
}
.framed-block h2 { font-size: 1.3rem; margin-bottom: 1rem; color: var(--text); }
.framed-block p { margin: 0; max-width: 65ch; }
.block-framed .section-title { margin-bottom: 0.75rem; }
.block-framed .block-intro { margin-bottom: 1rem; font-size: 0.95rem; color: var(--text-dim); max-width: 65ch; }
.block-framed .block-outro { margin-top: 1rem; font-size: 0.9rem; color: var(--text-dim); }
.block-framed .block-outro a { color: var(--green-light); }
.poster-card .card-name { font-size: 1rem; margin: 0.5rem 0 0.25rem; color: var(--text); }
.poster-card .card-desc { font-size: 0.9rem; color: var(--text-dim); margin: 0 0 0.5rem; line-height: 1.4; }
.checklist-license { list-style: none; margin: 0; padding: 0; }
.checklist-license li { padding: 0.5rem 0; padding-left: 1.5rem; position: relative; }
.checklist-license li::before { content: "✓"; position: absolute; left: 0; color: var(--green-light); font-weight: 600; }

/* Posters grid */
.posters-section { padding: 2rem 0 3rem; }
.section-title { font-size: 1.3rem; margin-bottom: 1.5rem; color: var(--text); }
.posters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.75rem;
}
.poster-card {
  padding: 2rem;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  text-align: center;
  min-height: 240px;
  border: 2px solid var(--glass-border);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.2);
}
.poster-card:hover { border-color: var(--green-light); box-shadow: 0 8px 32px rgba(45, 106, 79, 0.25); }
.logo-wrap { display: inline-flex; align-items: center; justify-content: center; padding: 0.6rem 1rem; border-radius: 10px; background: var(--logo-bg); margin-bottom: 0.25rem; max-width: 100%; min-height: 52px; box-sizing: border-box; }
.poster-card .logo-wrap { display: flex; width: 100%; max-width: 220px; justify-content: center; }
.poster-card .card-logo { max-height: 68px; max-width: 200px; width: auto; object-fit: contain; }
.poster-card .card-fact { font-size: 0.85rem; color: var(--text-dim); margin: 0; }
.poster-card .card-disclaimer { font-size: 0.75rem; color: var(--text-dim); margin: 0; }
.poster-card .card-btn {
  padding: 0.5rem 1rem;
  background: var(--green-light);
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: 8px;
  margin-top: 0.25rem;
}
.poster-card .card-btn:hover { background: #3d7a5c; }

/* Block 2: Article — image left, text right */
.block-article { padding: 2.5rem 0; border-top: 1px solid var(--glass-border); }
.article-inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
  align-items: start;
}
.article-img .img-placeholder {
  aspect-ratio: 4/3;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}
.article-text h2 { font-size: 1.3rem; margin-bottom: 0.75rem; color: var(--text); }
.article-text p { margin: 0; color: var(--text-dim); }

/* Footer: 70% left, 30% right */
.footer {
  margin-top: 3rem;
  padding: 2rem 0;
  border-top: 1px solid var(--glass-border);
  font-size: 0.9rem;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr 30%;
  gap: 2rem;
}
.footer-logo { font-weight: 600; font-size: 1.2rem; color: var(--text); text-decoration: none; display: block; margin-bottom: 0.75rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.75rem; }
.footer-nav a { color: var(--text-dim); text-decoration: none; }
.footer-nav a:hover { color: var(--text); }
.footer-info { margin: 0; color: var(--text-dim); font-size: 0.85rem; }
.footer-right {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}
.footer-right a { color: var(--text-dim); text-decoration: none; }
.footer-right a:hover { color: var(--text); }

.page-content { padding: 3rem 0; }
.content-inner { padding: 2rem; }
.page-content h1 { margin-bottom: 1rem; }
.page-content h2 { font-size: 1.2rem; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.page-content a { color: var(--green-light); }
.contact-form { max-width: 400px; margin-top: 1.5rem; }
.contact-form label { display: block; margin-top: 1rem; }
.contact-form input, .contact-form textarea { width: 100%; padding: 0.6rem; margin-top: 0.25rem; background: var(--glass); border: 1px solid var(--glass-border); color: var(--text); border-radius: 8px; }
.contact-form button { margin-top: 1rem; padding: 0.6rem 1.5rem; background: var(--green-light); color: var(--text); border: none; border-radius: 8px; font-weight: 500; cursor: pointer; }

.overlay { position: fixed; inset: 0; background: rgba(13, 40, 24, 0.95); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.overlay-box { padding: 2rem; max-width: 400px; text-align: center; border-radius: 16px; }
.overlay-box h2 { margin-bottom: 1rem; }
.overlay-box button { margin: 0.5rem; padding: 0.6rem 1.2rem; cursor: pointer; border: 1px solid var(--glass-border); background: var(--green-light); color: var(--text); border-radius: 8px; font-weight: 500; }
.overlay-box button:last-of-type { background: transparent; }
.overlay.hidden { display: none; }

.cookie-popup { position: fixed; bottom: 0; left: 0; right: 0; padding: 1rem 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; z-index: 9998; border-top: 1px solid var(--glass-border); }
.cookie-popup a { color: var(--green-light); }
.cookie-popup button { padding: 0.5rem 1rem; background: var(--green-light); color: var(--text); border: none; border-radius: 8px; font-weight: 500; cursor: pointer; }
.cookie-popup.hidden { display: none; }

.block-18 { padding: 2rem 0; }
.block-18-heading { font-size: 1.25rem; margin-bottom: 1rem; }
.block-18-para { line-height: 1.65; }
.block-18-para a { color: var(--green-light); }

@media (max-width: 768px) {
  .hero-inner { flex-direction: column; align-items: flex-start; }
  .hero-date { font-size: 2.5rem; }
  .article-inner { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
}