/* Temporary "coming soon" page. The board and .flap rules are copied from ../styles.css so
   this folder can be deployed on its own. If you change the board look, change both. */
:root {
  --navy: #13294B;
  --signal: #F2B705;
  --board: #1B1D1F;
  --flap: #2A2D30;
  --soft: #B7C2D6;

  --f-sign: "Fira Sans Extra Condensed", "Arial Narrow", sans-serif;
  --f-body: "Commissioner", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--navy); color: #fff; font: 400 1.0625rem/1.6 var(--f-body); }
h1 { margin: 0; font: 700 clamp(1.5rem, 7.2vw, 2.9rem)/1.05 var(--f-sign); color: #fff; }
h1 span { color: var(--signal); }
p { margin: 0; }
ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }

.wrap { max-width: 40rem; margin: 0 auto; padding: clamp(1.5rem, 5vw, 3.5rem) 16px 3rem; }

.brand { display: flex; align-items: center; gap: .75rem; margin-bottom: clamp(2rem, 6vw, 3.5rem); color: #fff; }
.brand__mark { flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong { font: 700 1.5rem/1 var(--f-sign); letter-spacing: .02em; }
.brand__text span { font-size: .8125rem; color: var(--soft); }

.lede { margin: 1.1rem 0 2rem; font-size: 1.1875rem; color: var(--soft); }

/* Πίνακας αναχωρήσεων */
.board {
  --cell: clamp(11px, 3.3vw, 21px);
  background: var(--board);
  color: #fff;
  padding: 1.1rem 1.1rem .9rem;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px #000, 0 0 0 6px #3B4046, 0 0 0 7px #0E0F10;
}
.board__head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 .25rem .75rem; border-bottom: 2px solid #3B4046; }
.board__title { font: 700 1.6rem/1 var(--f-sign); color: var(--signal); letter-spacing: .03em; }
.board__clock { font: 600 1.6rem/1 var(--f-sign); color: var(--signal); font-variant-numeric: tabular-nums; }
.board__cols { display: grid; grid-template-columns: 16fr 11fr; gap: calc(var(--cell) * .6); padding: .7rem .25rem .35rem; font: 500 .875rem/1 var(--f-sign); color: #9AA3AD; letter-spacing: .03em; }
.board__rows { display: grid; gap: 5px; }
.board__row { display: grid; grid-template-columns: 16fr 11fr; gap: calc(var(--cell) * .6); padding: 3px .25rem; }
.board__field { display: flex; gap: 2px; min-width: 0; }
.flap {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: calc(var(--cell) * 1.45);
  display: grid; place-items: center;
  background: var(--flap);
  border-radius: 2px;
  font: 600 var(--cell)/1 var(--f-sign);
  color: #F3F1E8;
  overflow: hidden;
}
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #0E0F10; }
.board__row .board__field:last-child .flap { color: var(--signal); }
.flap.is-turning { animation: flip .07s linear; }
@keyframes flip { 50% { transform: scaleY(.15); } }

.contact { margin-top: 3rem; padding-top: 1.5rem; border-top: 3px solid var(--signal); }
.contact address { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.25rem 2rem; font-style: normal; font-weight: 500; color: #fff; }
.contact div { display: flex; flex-direction: column; }
.contact span { margin-bottom: .2rem; font: 600 .875rem/1.2 var(--f-sign); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.contact a { text-decoration: none; }
.contact a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .flap.is-turning { animation: none; }
}