:root {
  --bg: #f4f1ea;
  --card-bg: #ffffff;
  --card-border: #2b2b2b;
  --text: #1f1f1f;
  --accent: #c0392b;
  --shadow: rgba(0, 0, 0, 0.15);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17171a;
    --card-bg: #232327;
    --card-border: #e8e6df;
    --text: #f0efe9;
    --accent: #e0574a;
    --shadow: rgba(0, 0, 0, 0.5);
  }
}

* {
  box-sizing: border-box;
}

:root {
  --container: min(1300px, 92vw);
  --gap: clamp(1.2rem, 1.5vw, 2rem);
}

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.5rem, 3vw, 3rem) 1rem clamp(2rem, 5vw, 4rem);
}

.ad-banner {
  width: 100%;
  max-width: var(--container);
  min-height: clamp(90px, 9vw, 140px);
  border: 2px dashed var(--card-border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  opacity: 0.6;
  font-size: clamp(0.9rem, 1vw, 1.15rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: clamp(2rem, 3vw, 3rem);
}

.grid {
  width: 100%;
  max-width: var(--container);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-bottom: var(--gap);
}

.grid.secondary {
  grid-template-columns: repeat(3, 1fr);
  max-width: calc((3 * var(--container) - var(--gap)) / 4);
}

.prostovoljci-wrap {
  position: relative;
}

.prostovoljci-wrap .card {
  width: 100%;
  height: 100%;
}

.social-icons {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin-left: var(--gap);
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) / 2);
}

.social-icon {
  display: block;
  width: clamp(36px, 4vw, 56px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  box-shadow: 0 4px 10px var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.social-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.social-icon:hover,
.social-icon:focus-visible {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 8px 16px var(--shadow);
}

@media (max-width: 640px) {
  .prostovoljci-wrap .card {
    height: auto;
  }
  .social-icons {
    position: static;
    transform: none;
    justify-content: center;
    flex-direction: row;
    margin-left: 0;
    margin-top: calc(var(--gap) / 2);
  }
}

.card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 1 / 1;
  border: 3px solid var(--card-border);
  border-radius: 14px;
  background: var(--card-bg);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.05rem, 1.5vw, 1.6rem);
  letter-spacing: 0.03em;
  padding: 0.5rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.card:hover,
.card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px var(--shadow);
  background-color: var(--accent);
  color: #fff;
}

.card-kosarka,
.card-nogomet,
.card-pikado,
.card-orientacija {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 68%;
}

.card-kosarka {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='47' fill='%23e8732c' stroke='%231f1f1f' stroke-width='3'/><line x1='3' y1='50' x2='97' y2='50' stroke='%231f1f1f' stroke-width='3'/><line x1='50' y1='3' x2='50' y2='97' stroke='%231f1f1f' stroke-width='3'/><path d='M17 17 Q50 50 17 83' fill='none' stroke='%231f1f1f' stroke-width='3'/><path d='M83 17 Q50 50 83 83' fill='none' stroke='%231f1f1f' stroke-width='3'/></svg>");
}

.card-nogomet {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='47' fill='%23fafaf7' stroke='%231f1f1f' stroke-width='3'/><polygon points='50,35 64.3,45.4 58.8,62.1 41.2,62.1 35.7,45.4' fill='%231f1f1f'/><polygon points='77.6,12 82.4,26.5 70,35.5 57.6,26.5 62.4,12' fill='%231f1f1f'/><polygon points='90,50 94.7,64.5 82.3,73.5 70,64.5 74.7,50' fill='%231f1f1f'/><polygon points='57.6,73.5 62.4,88 50,97 37.6,88 42.4,73.5' fill='%231f1f1f'/><polygon points='25.3,50 30,64.5 17.7,73.5 5.3,64.5 10,50' fill='%231f1f1f'/><polygon points='37.6,12 42.4,26.5 30,35.5 17.6,26.5 22.4,12' fill='%231f1f1f'/></svg>");
}

.card-pikado {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='47' fill='%23fafaf0' stroke='%231f1f1f' stroke-width='3'/><path d='M50,50 L97,50 A47,47 0 0,1 95,64.5 Z' fill='%231f1f1f'/><path d='M50,50 L88,77.6 A47,47 0 0,1 78,88 Z' fill='%231f1f1f'/><path d='M50,50 L64.5,95 A47,47 0 0,1 50,97 Z' fill='%231f1f1f'/><path d='M50,50 L35.5,95 A47,47 0 0,1 22,88 Z' fill='%231f1f1f'/><path d='M50,50 L12,78 A47,47 0 0,1 5,64.5 Z' fill='%231f1f1f'/><path d='M50,50 L3,50 A47,47 0 0,1 5,35.5 Z' fill='%231f1f1f'/><path d='M50,50 L12,22 A47,47 0 0,1 22,12 Z' fill='%231f1f1f'/><path d='M50,50 L35.5,5 A47,47 0 0,1 50,3 Z' fill='%231f1f1f'/><path d='M50,50 L64.5,5 A47,47 0 0,1 78,12 Z' fill='%231f1f1f'/><path d='M50,50 L88,22 A47,47 0 0,1 95,35.5 Z' fill='%231f1f1f'/><circle cx='50' cy='50' r='40' fill='none' stroke='%23c0392b' stroke-width='4'/><circle cx='50' cy='50' r='28' fill='none' stroke='%232f8f46' stroke-width='4'/><circle cx='50' cy='50' r='9' fill='%232f8f46'/><circle cx='50' cy='50' r='4' fill='%23c0392b'/></svg>");
}

.card-orientacija {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='47' fill='%23fafaf7' stroke='%231f1f1f' stroke-width='3'/><line x1='90' y1='50' x2='96' y2='50' stroke='%231f1f1f' stroke-width='1.5'/><line x1='84.6' y1='70' x2='89.8' y2='73' stroke='%231f1f1f' stroke-width='1.5'/><line x1='70' y1='84.6' x2='73' y2='89.8' stroke='%231f1f1f' stroke-width='1.5'/><line x1='50' y1='90' x2='50' y2='96' stroke='%231f1f1f' stroke-width='1.5'/><line x1='30' y1='84.6' x2='27' y2='89.8' stroke='%231f1f1f' stroke-width='1.5'/><line x1='15.4' y1='70' x2='10.2' y2='73' stroke='%231f1f1f' stroke-width='1.5'/><line x1='10' y1='50' x2='4' y2='50' stroke='%231f1f1f' stroke-width='1.5'/><line x1='15.4' y1='30' x2='10.2' y2='27' stroke='%231f1f1f' stroke-width='1.5'/><line x1='30' y1='15.4' x2='27' y2='10.2' stroke='%231f1f1f' stroke-width='1.5'/><line x1='50' y1='10' x2='50' y2='4' stroke='%231f1f1f' stroke-width='1.5'/><line x1='70' y1='15.4' x2='73' y2='10.2' stroke='%231f1f1f' stroke-width='1.5'/><line x1='84.6' y1='30' x2='89.8' y2='27' stroke='%231f1f1f' stroke-width='1.5'/><polygon points='71.2,28.8 52.83,52.83 47.17,47.17' fill='%231f1f1f'/><polygon points='71.2,71.2 52.83,47.17 47.17,52.83' fill='%231f1f1f'/><polygon points='28.8,71.2 52.83,52.83 47.17,47.17' fill='%231f1f1f'/><polygon points='28.8,28.8 52.83,47.17 47.17,52.83' fill='%231f1f1f'/><polygon points='88,50 50,46 50,54' fill='%231f1f1f'/><polygon points='50,88 46,50 54,50' fill='%231f1f1f'/><polygon points='12,50 50,54 50,46' fill='%231f1f1f'/><polygon points='50,12 46,50 54,50' fill='%23c0392b'/><circle cx='50' cy='50' r='4' fill='%231f1f1f'/></svg>");
}

.card-hotel {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect x='0' y='0' width='100' height='100' fill='%23bcdff0'/><polygon points='0,42 15,25 30,40 45,18 60,36 75,14 90,32 100,40 100,50 0,50' fill='%238fa088'/><rect x='0' y='84' width='100' height='16' fill='%236fa050'/><polygon points='8,58 50,18 92,50 92,58 50,26 8,66' fill='%233f3f42'/><polygon points='8,66 50,26 92,58 92,86 8,86' fill='%23f0e9da'/><rect x='8' y='68' width='84' height='4' fill='%23c9702f'/><rect x='24' y='74' width='6' height='8' fill='%232b3550'/><rect x='34' y='72' width='6' height='9' fill='%232b3550'/><rect x='46' y='70' width='6' height='10' fill='%232b3550'/><rect x='58' y='72' width='6' height='9' fill='%232b3550'/><rect x='70' y='74' width='6' height='8' fill='%232b3550'/><rect x='9' y='78' width='3' height='10' fill='%235b3a24'/><polygon points='10.5,55 3,80 18,80' fill='%232f5233'/><rect x='85' y='76' width='3' height='12' fill='%235b3a24'/><polygon points='86.5,50 78,80 95,80' fill='%232f5233'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.card-prostovoljci {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect x='0' y='0' width='100' height='100' fill='%23f4f2ef'/><defs><g id='h'><rect x='-4' y='0' width='8' height='26' rx='4'/><ellipse cx='0' cy='-2' rx='6.5' ry='8'/><rect x='-1.6' y='-19' width='3.2' height='17' rx='1.6' transform='rotate(-32 0 -2)'/><rect x='-1.6' y='-19' width='3.2' height='17' rx='1.6' transform='rotate(-16 0 -2)'/><rect x='-1.6' y='-19' width='3.2' height='17' rx='1.6' transform='rotate(0 0 -2)'/><rect x='-1.6' y='-19' width='3.2' height='17' rx='1.6' transform='rotate(16 0 -2)'/><rect x='-1.6' y='-19' width='3.2' height='17' rx='1.6' transform='rotate(32 0 -2)'/></g></defs><use href='%23h' transform='translate(8,65.5) scale(1.44)' fill='%23e8b93a'/><use href='%23h' transform='translate(24,60.8) scale(1.62)' fill='%23e2622f'/><use href='%23h' transform='translate(40,63.7) scale(1.51)' fill='%23c0392b'/><use href='%23h' transform='translate(56,58.5) scale(1.71)' fill='%23c23a7a'/><use href='%23h' transform='translate(72,62) scale(1.58)' fill='%236a3fa0'/><use href='%23h' transform='translate(88,64.9) scale(1.47)' fill='%232f8f7a'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.card-info {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><radialGradient id='infoGrad' cx='35%25' cy='30%25' r='75%25'><stop offset='0%25' stop-color='%237b86e8'/><stop offset='55%25' stop-color='%233f4bb8'/><stop offset='100%25' stop-color='%23181c5e'/></radialGradient></defs><circle cx='50' cy='50' r='47' fill='url(%23infoGrad)' stroke='%231f1f1f' stroke-width='2'/><ellipse cx='38' cy='24' rx='30' ry='14' fill='%23ffffff' opacity='0.18'/><circle cx='50' cy='50' r='20' fill='none' stroke='%23ffffff' stroke-width='5'/><circle cx='50' cy='38' r='3.2' fill='%23ffffff'/><rect x='46.5' y='45' width='7' height='18' rx='3' fill='%23ffffff'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 88%;
}

.card-kosarka .label,
.card-nogomet .label,
.card-pikado .label,
.card-orientacija .label,
.card-hotel .label,
.card-prostovoljci .label,
.card-info .label {
  background: var(--card-bg);
  padding: 0.15em 0.5em;
  border-radius: 8px;
}

.card-kosarka:hover .label,
.card-kosarka:focus-visible .label,
.card-nogomet:hover .label,
.card-nogomet:focus-visible .label,
.card-pikado:hover .label,
.card-pikado:focus-visible .label,
.card-orientacija:hover .label,
.card-orientacija:focus-visible .label,
.card-hotel:hover .label,
.card-hotel:focus-visible .label,
.card-prostovoljci:hover .label,
.card-prostovoljci:focus-visible .label,
.card-info:hover .label,
.card-info:focus-visible .label {
  background: var(--accent);
}

@media (max-width: 640px) {
  :root {
    --container: 100%;
  }
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid.secondary {
    grid-template-columns: 1fr;
    max-width: calc((100% - var(--gap)) / 2);
  }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 100;
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  position: relative;
  width: 100%;
  max-width: 760px;
  background: var(--card-bg);
  color: var(--text);
  border: 3px solid var(--card-border);
  border-radius: 14px;
  padding: 2rem 1.75rem 1.75rem;
  box-shadow: 0 12px 30px var(--shadow);
}

.modal-body {
  display: flex;
  align-items: stretch;
  gap: 1.75rem;
  height: 335px;
}

.modal-main {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
}

.modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}

.modal-close:hover,
.modal-close:focus-visible {
  background: var(--bg);
}

.modal-title {
  margin: 0 0 1.25rem;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal-form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.modal-form input {
  font: inherit;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  padding: 0.6rem 0.7rem;
  border: 2px solid var(--card-border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
}

.modal-form input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.modal-submit {
  margin-top: 0.5rem;
  padding: 0.7rem 1rem;
  border: 2px solid var(--card-border);
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.modal-submit:hover,
.modal-submit:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px var(--shadow);
}

.modal-list-panel {
  flex: 1 1 220px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  border: 2px solid var(--card-border);
  border-radius: 8px;
  background: var(--bg);
  padding: 0.75rem;
}

.modal-list-title {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
}

.list-scroll-btn {
  flex: 0 0 auto;
  width: 100%;
  padding: 0.25rem;
  border: 2px solid var(--card-border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.list-scroll-btn:hover,
.list-scroll-btn:focus-visible {
  background: var(--accent);
  color: #fff;
}

.modal-list {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  scroll-behavior: smooth;
}

.modal-list li {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background: var(--card-bg);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

@media (max-width: 640px) {
  .modal {
    max-width: 92vw;
  }
  .modal-body {
    flex-direction: column;
  }
  .modal-list-panel {
    height: 200px;
  }
}