/* ============================================================
   Screen 01 — Select Language
   ============================================================ */

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  padding: 68px 40px 40px;
}

.lang-grid {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.lang-row {
  display: flex;
  gap: 22px;
}

.lang-card {
  flex: 1;
  height: 220px;
  background: var(--bg-card);
  border-radius: 24px;
  border: 3px solid transparent;
  box-shadow: 0 8px 28px -8px rgba(27, 27, 92, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.15s;
  text-decoration: none;
  color: inherit;
}

.lang-card:hover {
  border-color: var(--border-navy-dark);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -8px rgba(27, 27, 92, 0.18);
}

.lang-card:active {
  transform: translateY(0);
}

.lang-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ── Flags ── */
.flag {
  width: 104px;
  height: 62px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

/* Slovakia: white / blue / red horizontal stripes + coat of arms */
.flag-sk {
  display: flex;
  flex-direction: column;
}
.flag-sk .stripe-white { height: 21px; background: #FFFFFF; }
.flag-sk .stripe-blue  { height: 20px; background: #0B4EA2; }
.flag-sk .stripe-red   { height: 21px; background: #EE1C25; }

.flag-sk .coa {
  position: absolute;
  left: 5px;
  top: 12px;
  width: 30px;
  height: 38px;
  background: #EE1C25;
  border-radius: 3px 3px 18px 18px;
  border: 1.5px solid #FFFFFF;
  overflow: hidden;
}

/* Three blue hills (ellipses) at the bottom of the coat */
.flag-sk .coa-hill {
  position: absolute;
  background: #0B4EA2;
  border-radius: 50%;
}
.flag-sk .coa-hill-1 { width: 12px; height: 14px; left: -2px; bottom: 0; }
.flag-sk .coa-hill-2 { width: 12px; height: 16px; left: 9px;  bottom: 0; }
.flag-sk .coa-hill-3 { width: 12px; height: 14px; left: 20px; bottom: 0; }

/* White cross bars */
.flag-sk .coa-cross-v {
  position: absolute;
  background: #FFFFFF;
  width: 2px; height: 16px;
  left: 14px; top: 6px;
}
.flag-sk .coa-cross-h1 {
  position: absolute;
  background: #FFFFFF;
  width: 10px; height: 2px;
  left: 10px; top: 10px;
}
.flag-sk .coa-cross-h2 {
  position: absolute;
  background: #FFFFFF;
  width: 14px; height: 2px;
  left: 8px; top: 16px;
}

/* United Kingdom — Union Jack */
/* Layers (bottom to top):
   1. Blue field (#012169)
   2. White diagonal X (St Andrew's saltire) — two thick white diagonals
   3. Red diagonal X (St Patrick's saltire) — narrower, offset to show white border
   4. White St George horizontal band
   5. White St George vertical band
   6. Red St George horizontal band
   7. Red St George vertical band
*/
.flag-en {
  background:
    /* Red vertical St George */
    linear-gradient(to right, transparent calc(50% - 4px), #C8102E calc(50% - 4px), #C8102E calc(50% + 4px), transparent calc(50% + 4px)),
    /* Red horizontal St George */
    linear-gradient(to bottom, transparent calc(50% - 4px), #C8102E calc(50% - 4px), #C8102E calc(50% + 4px), transparent calc(50% + 4px)),
    /* White vertical St George */
    linear-gradient(to right, transparent calc(50% - 8px), #FFFFFF calc(50% - 8px), #FFFFFF calc(50% + 8px), transparent calc(50% + 8px)),
    /* White horizontal St George */
    linear-gradient(to bottom, transparent calc(50% - 8px), #FFFFFF calc(50% - 8px), #FFFFFF calc(50% + 8px), transparent calc(50% + 8px)),
    /* Red diagonal St Patrick — top-left to bottom-right (offset +2px) */
    linear-gradient(to bottom right, transparent calc(50% - 3px), #C8102E calc(50% - 3px), #C8102E calc(50% + 1px), transparent calc(50% + 1px)),
    /* Red diagonal St Patrick — top-right to bottom-left (offset -2px) */
    linear-gradient(to bottom left, transparent calc(50% - 3px), #C8102E calc(50% - 3px), #C8102E calc(50% + 1px), transparent calc(50% + 1px)),
    /* White diagonal St Andrew — top-left to bottom-right */
    linear-gradient(to bottom right, transparent calc(50% - 6px), #FFFFFF calc(50% - 6px), #FFFFFF calc(50% + 6px), transparent calc(50% + 6px)),
    /* White diagonal St Andrew — top-right to bottom-left */
    linear-gradient(to bottom left, transparent calc(50% - 6px), #FFFFFF calc(50% - 6px), #FFFFFF calc(50% + 6px), transparent calc(50% + 6px)),
    /* Blue field */
    #012169;
}

/* Child divs are no longer used for flag-en — kept in DOM for safety but hidden */
.flag-en .en-h-white,
.flag-en .en-v-white,
.flag-en .en-h-red,
.flag-en .en-v-red {
  display: none;
}

/* Germany */
.flag-de {
  display: flex;
  flex-direction: column;
}
.flag-de .stripe-black  { height: 21px; background: #000000; }
.flag-de .stripe-red    { height: 20px; background: #DD0000; }
.flag-de .stripe-gold   { height: 21px; background: #FFCE00; }

/* Poland */
.flag-pl {
  display: flex;
  flex-direction: column;
}
.flag-pl .stripe-white { height: 31px; background: #FFFFFF; }
.flag-pl .stripe-red   { height: 31px; background: #DC143C; }

/* Czechia — white (top) / red (bottom) with blue triangle from the hoist */
.flag-cz {
  background: linear-gradient(to bottom, #FFFFFF 0 50%, #D7141A 50% 100%);
}
.flag-cz::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 31px solid transparent;
  border-bottom: 31px solid transparent;
  border-left: 52px solid #11457E;
}

/* Hungary — red / white / green horizontal stripes */
.flag-hu {
  background: linear-gradient(
    to bottom,
    #CD2A3E 0 33.34%,
    #FFFFFF 33.34% 66.67%,
    #436F4D 66.67% 100%
  );
}