/* =========================================================
   ISDO'27 - HOME / REGISTRATION PORTAL
   ========================================================= */


.home-app{
  max-width:1120px;
}


/* HEADER */

.home-hero{
  margin-bottom:32px;
}


/* INTRO */

.portal-intro{
  text-align:center;

  max-width:650px;

  margin:
    0 auto
    32px;
}

.portal-intro h2{
  margin:0;

  font-size:
    clamp(
      2rem,
      5vw,
      3.2rem
    );

  letter-spacing:-.045em;
}

.portal-intro p:last-child{
  margin:
    12px 0 0;

  color:var(--muted);

  font-size:1rem;

  line-height:1.55;
}


/* PORTAL GRID */

.portal-grid{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:18px;

  margin-bottom:28px;
}


/* CARD */

.portal-card{
  position:relative;

  display:flex;

  flex-direction:column;

  min-height:310px;

  padding:26px;

  border-radius:24px;

  background:#fff;

  border:
    1px solid
    var(--line);

  box-shadow:
    0 16px 45px
    rgba(17,20,28,.07);

  color:var(--ink);

  text-decoration:none;

  overflow:hidden;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}


.portal-card:hover{
  transform:
    translateY(-5px);

  box-shadow:
    0 24px 60px
    rgba(17,20,28,.11);
}


/* COLORED TOP BAR */

.portal-card::before{
  content:"";

  position:absolute;

  left:0;
  right:0;
  top:0;

  height:5px;
}


/* PLAYER */

.player-card::before{
  background:
    var(--red);
}

.player-card:hover{
  border-color:
    rgba(239,47,79,.35);
}


/* MANAGER */

.manager-card::before{
  background:
    #41a0b5;
}

.manager-card:hover{
  border-color:
    rgba(65,160,181,.38);
}


/* ADMIN */

.admin-card::before{
  background:
    var(--purple);
}

.admin-card:hover{
  border-color:
    rgba(125,91,214,.35);
}


/* NUMBER */

.portal-icon{
  display:grid;

  place-items:center;

  width:52px;
  height:52px;

  margin-bottom:28px;

  border-radius:16px;

  background:
    #15171b;

  color:#fff;

  font-size:.8rem;

  font-weight:900;

  letter-spacing:.07em;
}


.player-card .portal-icon{
  background:
    var(--red);
}


.manager-card .portal-icon{
  background:
    #41a0b5;
}


.admin-card .portal-icon{
  background:
    var(--purple);
}


/* CARD CONTENT */

.portal-content{
  display:flex;

  flex:1;

  flex-direction:column;
}


.portal-label{
  margin-bottom:6px;

  color:var(--muted);

  font-size:.72rem;

  font-weight:850;

  letter-spacing:.1em;

  text-transform:uppercase;
}


.portal-content h2{
  margin:0;

  font-size:
    1.55rem;

  letter-spacing:-.035em;
}


.portal-content p{
  margin:
    12px 0 26px;

  color:
    var(--muted);

  font-size:.94rem;

  font-weight:400;

  line-height:1.55;
}


/* BUTTON-LIKE LINK */

.portal-action{
  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:12px;

  margin-top:auto;

  padding-top:18px;

  border-top:
    1px solid
    var(--line);

  font-size:.92rem;

  font-weight:800;
}


.portal-action span{
  display:grid;

  place-items:center;

  width:32px;
  height:32px;

  border-radius:50%;

  background:
    var(--surface-soft);

  transition:
    transform .18s ease;
}


.portal-card:hover
.portal-action span{
  transform:
    translateX(4px);
}


/* PLAYER CARD MORE PROMINENT */

.player-card{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fffafa 100%
    );
}


.player-card
.portal-action{
  color:
    var(--red);
}


.manager-card
.portal-action{
  color:
    #29859a;
}


.admin-card
.portal-action{
  color:
    var(--purple);
}


/* MOBILE */

@media(max-width:850px){

  .portal-grid{
    grid-template-columns:1fr;
  }

  .portal-card{
    min-height:auto;
  }

}


@media(max-width:680px){

  .home-hero{
    margin-bottom:26px;
  }

  .portal-intro{
    margin-bottom:24px;
  }

  .portal-card{
    padding:22px;

    border-radius:20px;
  }

  .portal-icon{
    margin-bottom:20px;
  }

}