/* The opening screen is a division gate, composed as three sports posters. */
.page-portal {
  --fcn-picker-top: 80px;
  background: #030b16;
}
.page-portal.admin-bar { --fcn-picker-top: 112px; }
.page-portal #main-content { min-height: 0; padding: 0; }
.page-portal .site-header {
  position: relative;
  inset: auto;
  min-height: 80px;
  gap: 20px;
  padding: 14px clamp(20px, 3vw, 56px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #030b16;
  backdrop-filter: none;
}
.page-portal.admin-bar .site-header { top: auto; }
.fcn-selector-slogan {
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.5;
  text-align: center;
}
.fcn-portal-picker { max-width: none; margin: 0; }
.fcn-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: max(640px, calc(100svh - var(--fcn-picker-top)));
  gap: 6px;
}
.fcn-choice {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-areas: "heading" "media" "action";
  grid-template-rows: auto minmax(280px, 1fr) auto;
  min-width: 0;
  min-height: 0;
  padding: 40px 0 36px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  background: linear-gradient(160deg, #c01528 0%, #810b1c 52%, #320916 100%);
}
.fcn-choice--utanpotlas {
  background: linear-gradient(160deg, #164e88 0%, #092b51 52%, #061628 100%);
}
.fcn-choice--futsal {
  background: linear-gradient(160deg, #00749b 0%, #034969 52%, #031d36 100%);
}
.fcn-choice::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(145deg, transparent 0 115px, rgba(255,255,255,.045) 115px 170px, transparent 170px 285px);
  pointer-events: none;
}
.fcn-choice::after { content: none; }
.fcn-choice-watermark {
  position: absolute;
  top: 44%;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, -50%) rotate(-90deg);
  color: rgba(255,255,255,.065);
  font: 900 clamp(100px, 10vw, 180px)/1 Arial, sans-serif;
  letter-spacing: .04em;
  white-space: nowrap;
  pointer-events: none;
}
.fcn-choice-heading {
  grid-area: heading;
  position: relative;
  z-index: 1;
  padding: 0 24px;
  text-align: center;
  pointer-events: none;
}
.fcn-choice-heading h2 {
  margin: 0 0 10px;
  color: #fff;
  font-family: "FCN Heading", Arial, sans-serif;
  font-size: clamp(27px, 3vw, 56px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: .015em;
  text-transform: uppercase;
  word-spacing: normal;
  word-break: normal;
  overflow-wrap: normal;
}
.fcn-choice-heading p {
  margin: 0;
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
}
.fcn-choice-media {
  grid-area: media;
  position: relative;
  min-width: 0;
  min-height: 0;
  pointer-events: none;
}
.fcn-choice-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 51%;
  -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 76%, transparent);
  mask-image: linear-gradient(transparent, #000 20%, #000 76%, transparent);
  transition: transform .3s ease;
}
.fcn-choice--crest .fcn-choice-photo {
  inset: 10% 16%;
  width: 68%;
  height: 80%;
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.35));
  -webkit-mask-image: none;
  mask-image: none;
}
.fcn-choice-cta {
  grid-area: action;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 70%;
  max-width: 280px;
  min-height: 54px;
  margin: 12px auto 0;
  padding: 14px 24px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 3px;
  background: rgba(0,0,0,.16);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
  pointer-events: none;
  transition: background .2s ease, color .2s ease;
}
.fcn-choice-cta > span { font-size: 24px; line-height: 1; }
.fcn-choice:hover .fcn-choice-cta,
.fcn-choice:focus-visible .fcn-choice-cta { background: #fff; color: #071426; }
.fcn-choice:hover .fcn-choice-photo { transform: scale(1.025); }
.fcn-choice:focus-visible { outline: 4px solid #fff; outline-offset: -8px; }
@media (max-width: 1100px) and (min-width: 821px) {
  .fcn-choice-heading { padding-inline: 14px; }
  .fcn-choice-heading h2 { font-size: 27px; }
  .fcn-choice-heading p { font-size: 13px; }
  .fcn-selector-slogan { max-width: 230px; }
}
@media (max-width: 820px) {
  .page-portal.admin-bar { --fcn-picker-top: 126px; }
  .page-portal .site-header {
    min-height: 80px;
    gap: 10px;
    padding: 12px 16px;
  }
  .page-portal .site-header .brand { min-width: 0; flex-shrink: 0; }
  .page-portal .site-header .brand img { width: 40px; height: 40px; }
  .fcn-selector-slogan { flex: 1; font-size: 12px; line-height: 1.45; }
  .page-portal .header-partner { font-size: 9px; padding: 10px; }
  .page-portal .header-partner-label > span { display: block; }
  .page-portal .header-partner-icon { display: none; }
  .fcn-choice-grid { grid-template-columns: 1fr; min-height: 0; gap: 4px; }
  .fcn-choice {
    grid-template-areas: "heading media" "action media";
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-rows: minmax(90px, 1fr) auto;
    min-height: clamp(198px, calc((100svh - var(--fcn-picker-top) - 8px) / 3), 310px);
    padding: 24px;
    align-items: center;
  }
  .fcn-choice-heading { padding: 0; text-align: left; }
  .fcn-choice-heading h2 { font-size: clamp(22px, 6.1vw, 38px); margin-bottom: 8px; }
  .fcn-choice-heading p { max-width: 200px; font-size: 13px; }
  .fcn-choice-media { align-self: stretch; margin: -24px -24px -24px -12px; }
  .fcn-choice-photo {
    object-position: 50% 48%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000);
    mask-image: linear-gradient(90deg, transparent, #000 24%, #000);
  }
  .fcn-choice--crest .fcn-choice-photo { inset: 14% 12%; width: 76%; height: 72%; }
  .fcn-choice-cta {
    justify-self: start;
    width: auto;
    max-width: 100%;
    min-height: 44px;
    margin: 14px 0 0;
    padding: 9px 16px;
    gap: 18px;
    font-size: 12px;
  }
  .fcn-choice-watermark { top: 60%; left: 75%; font-size: 86px; }
}
@media (prefers-reduced-motion: reduce) {
  .fcn-choice-photo, .fcn-choice-cta { transition: none; }
  .fcn-choice:hover .fcn-choice-photo { transform: none; }
}