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

.czech-article-page {
  --article-accent:#3976a4;
  --article-accent-light:#deebf5;
  --article-accent-dark:#285372;
  --article-tint:#fbfdff;
  margin:0;
}

.czech-article-page .article-hero.notes {
  --article-accent:#3976a4;
  --article-accent-light:#deebf5;
  --article-accent-dark:#285372;
}

.czech-article-page .article-hero.exchange {
  --article-accent:#b73f43;
  --article-accent-light:#f8dddd;
  --article-accent-dark:#7d2b2e;
}

.czech-article-page .article-hero.atms {
  --article-accent:#268278;
  --article-accent-light:#d9f1ee;
  --article-accent-dark:#195850;
}

.czech-article-page .article-hero.transit {
  --article-accent:#be8728;
  --article-accent-light:#fff0bf;
  --article-accent-dark:#785619;
}

.czech-article-page .article-hero.tipping {
  --article-accent:#7d5a90;
  --article-accent-light:#eee4f3;
  --article-accent-dark:#543d61;
}

.czech-name-board,
.czech-wallet-grid,
.czech-ticket-path,
.czech-tip-board {
  display:grid;
  gap:14px;
  margin:28px 0;
  padding:20px;
  border:3px solid var(--ink);
  border-radius:6px;
}

.czech-name-board {
  grid-template-columns:repeat(3,minmax(0,1fr));
  background:linear-gradient(145deg,#deebf5,#fff 52%,#fff0bf);
  box-shadow:5px 6px 0 #285372;
}

.czech-wallet-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  background:linear-gradient(145deg,#d9f1ee,#fff 52%,#f8dddd);
  box-shadow:5px 6px 0 #195850;
}

.czech-tip-board {
  grid-template-columns:repeat(3,minmax(0,1fr));
  background:linear-gradient(145deg,#eee4f3,#fff 52%,#fff0bf);
  box-shadow:5px 6px 0 #543d61;
}

.czech-name-board > span,
.czech-wallet-grid > div,
.czech-ticket-path > div,
.czech-tip-board > span {
  min-width:0;
  padding:16px 10px;
  border:3px solid var(--ink);
  border-radius:5px;
  background:#fff;
  box-shadow:3px 4px 0 var(--ink);
  text-align:center;
}

.czech-name-board strong,
.czech-name-board small,
.czech-wallet-grid strong,
.czech-wallet-grid span,
.czech-ticket-path strong,
.czech-ticket-path span,
.czech-tip-board strong,
.czech-tip-board small {
  display:block;
}

.czech-name-board strong,
.czech-wallet-grid strong,
.czech-ticket-path strong,
.czech-tip-board strong {
  font-size:1.05rem;
}

.czech-name-board small,
.czech-wallet-grid span,
.czech-ticket-path span,
.czech-tip-board small {
  margin-top:5px;
  color:var(--muted);
  font-weight:750;
}

.czech-right-slip,
.czech-atm-slip,
.czech-tip-slip {
  width:min(100%,620px);
  margin:28px auto;
  padding:22px;
  border:3px solid var(--ink);
  border-radius:5px;
  background:linear-gradient(150deg,#fff,#f8dddd);
  box-shadow:5px 6px 0 #7d2b2e;
}

.czech-atm-slip {
  background:linear-gradient(150deg,#fff,#d9f1ee);
  box-shadow:5px 6px 0 #195850;
}

.czech-tip-slip {
  background:linear-gradient(150deg,#fff,#eee4f3);
  box-shadow:5px 6px 0 #543d61;
}

.czech-right-slip > span,
.czech-atm-slip > span,
.czech-tip-slip > span {
  display:block;
  font-size:.78rem;
  font-weight:950;
}

.czech-right-slip > strong,
.czech-atm-slip > strong,
.czech-tip-slip > strong {
  display:block;
  margin:7px 0 16px;
  padding:9px;
  border:3px double var(--ink);
  text-align:center;
  font-size:clamp(1.35rem,4vw,2.1rem);
}

.czech-right-slip > strong {
  color:#7d2b2e;
}

.czech-atm-slip > strong {
  color:#195850;
}

.czech-tip-slip > strong {
  color:#543d61;
}

.czech-right-slip div,
.czech-atm-slip div,
.czech-tip-slip div {
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:9px 0;
  border-bottom:2px dotted rgba(22,22,22,.32);
}

.czech-right-slip div:last-child,
.czech-atm-slip div:last-child,
.czech-tip-slip div:last-child {
  border-bottom:0;
}

.czech-ticket-path {
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;
  background:linear-gradient(145deg,#fff0bf,#fff 52%,#deebf5);
  box-shadow:5px 6px 0 #785619;
}

.czech-ticket-path > b {
  font-size:1.35rem;
}

.czech-article-page .article-money-explorer {
  background:linear-gradient(145deg,#fbfdff,#fff 52%,#fef8e7);
}

@media (max-width:700px) {
  .czech-name-board,
  .czech-wallet-grid,
  .czech-ticket-path,
  .czech-tip-board {
    grid-template-columns:1fr;
  }

  .czech-ticket-path > b {
    text-align:center;
    transform:rotate(90deg);
  }

  .czech-right-slip div,
  .czech-atm-slip div,
  .czech-tip-slip div {
    display:grid;
    gap:3px;
  }
}