@import url("../country-guide-base.css");

.croatia-article-page {
  --article-accent: #c8424b;
  --article-accent-light: #ffe1df;
  --article-accent-dark: #8d2e35;
  --article-tint: #fff8f7;
  margin: 0;
}

.croatia-article-page .article-hero.banknotes { --article-accent: #416da4; --article-accent-light: #dce8f5; --article-accent-dark: #294b73; }
.croatia-article-page .article-hero.islands { --article-accent: #3d9d9b; --article-accent-light: #d9f1ed; --article-accent-dark: #24635f; }
.croatia-article-page .article-hero.payments { --article-accent: #c58c25; --article-accent-light: #fff0c4; --article-accent-dark: #815916; }
.croatia-article-page .article-hero.tolls { --article-accent: #66757f; --article-accent-light: #e4eaed; --article-accent-dark: #39464e; }
.croatia-article-page .article-hero.tipping { --article-accent: #c8424b; --article-accent-light: #ffe1df; --article-accent-dark: #8d2e35; }

.croatia-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 28px 0;
}

.croatia-card {
  min-width: 0;
  padding: 18px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: linear-gradient(140deg, var(--article-accent-light), #fff 145%);
  box-shadow: 4px 5px 0 var(--article-accent-dark);
}

.croatia-card strong, .croatia-card span, .croatia-note strong, .croatia-note span { display: block; }
.croatia-card strong { margin-bottom: 6px; }
.croatia-card span { color: var(--muted); font-size: .92rem; }

.croatia-note {
  display: grid;
  gap: 8px;
  margin: 30px 0;
  padding: 21px 23px;
  border: 3px solid var(--ink);
  border-radius: 7px;
  background: linear-gradient(135deg, #dce8f5 0%, #fff0c4 52%, #ffe1df 100%);
  box-shadow: 6px 7px 0 var(--ink);
  transform: rotate(-.3deg);
}

.route-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 26px 0;
}

.route-strip > div {
  min-width: 0;
  padding: 15px 10px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: #fff;
  box-shadow: 3px 4px 0 var(--article-accent-dark);
}

.route-strip strong, .route-strip span { display: block; }
.route-strip strong { margin-bottom: 5px; color: var(--article-accent-dark); }
.route-strip span { color: var(--muted); font-size: .82rem; }
.article-footnote { color: var(--muted); font-size: .88rem; }

@media (max-width: 760px) { .route-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .croatia-grid { grid-template-columns: 1fr; }
  .croatia-note { padding: 18px; transform: none; }
}