/* =========================================================
   GRANT CARDONE — CUSTOMER PORTAL
   /assets/css/pages/portal.css
========================================================= */


/* =========================================================
   BASE
========================================================= */

.gc-portal {

  --gc-portal-black:
    #111111;

  --gc-portal-text:
    #484542;

  --gc-portal-muted:
    #8b8783;

  --gc-portal-red:
    #70000e;

  --gc-portal-red-bright:
    #c8102e;

  --gc-portal-cream:
    #f8f6f2;

  --gc-portal-soft:
    #f5f2ee;

  --gc-portal-white:
    #ffffff;

  --gc-portal-line:
    #dfdbd5;

  --gc-portal-font:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --gc-portal-ease:
    cubic-bezier(
      .22,
      1,
      .36,
      1
    );


  width:
    100%;

  max-width:
    1540px;

  margin:
    0 auto;

  padding:
    clamp(
      60px,
      7vw,
      110px
    )
    40px
    clamp(
      70px,
      8vw,
      120px
    );

  color:
    var(--gc-portal-text);

  font-family:
    var(--gc-portal-font);
}


.gc-portal *,
.gc-portal *::before,
.gc-portal *::after {

  box-sizing:
    border-box;

}


/* =========================================================
   HERO
========================================================= */

.gc-portal__hero {

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(320px, 440px);

  align-items:
    end;

  gap:
    clamp(
      48px,
      7vw,
      110px
    );

  padding-bottom:
    52px;

}


.gc-portal__eyebrow {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  margin:
    0
    0
    18px !important;

  color:
    var(--gc-portal-muted) !important;

  font-size:
    10px !important;

  font-weight:
    700 !important;

  line-height:
    1.2;

  letter-spacing:
    .22em;

  text-transform:
    uppercase;

}


.gc-portal__eyebrow::before {

  content:
    "";

  flex:
    0 0 auto;

  width:
    30px;

  height:
    2px;

  background:
    var(--gc-portal-red);

}


.gc-portal__title {

  margin:
    0 !important;

  color:
    var(--gc-portal-black) !important;

  font-family:
    var(--gc-portal-font) !important;

  font-size:
    clamp(
      48px,
      5vw,
      76px
    ) !important;

  line-height:
    .95 !important;

  letter-spacing:
    -.045em !important;

}


.gc-portal__title strong {

  display:
    block;

  font-weight:
    900 !important;

}


.gc-portal__title span {

  display:
    block;

  color:
    var(--gc-portal-red) !important;

  font-weight:
    300 !important;

}


.gc-portal__lead {

  width:
    100%;

  max-width:
    440px;

  margin:
    0 !important;

  color:
    var(--gc-portal-text) !important;

  font-size:
    16px !important;

  font-weight:
    400;

  line-height:
    1.7 !important;

}


/* =========================================================
   TOOLBAR
========================================================= */

.gc-portal__toolbar {

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(240px, 330px);

  align-items:
    center;

  gap:
    30px;

  padding:
    20px
    0;

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

  border-bottom:
    1px solid
    var(--gc-portal-line);

}


/* =========================================================
   FILTERS
========================================================= */

.gc-portal__filters {

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;

}


.gc-portal__filters-label {

  margin-right:
    8px;

  color:
    var(--gc-portal-muted);

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;

}


.gc-portal__filter-list {

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    8px;

}


.gc-portal__chip {

  appearance:
    none;

  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    38px;

  margin:
    0 !important;

  padding:
    0
    15px !important;

  cursor:
    pointer;

  color:
    var(--gc-portal-black) !important;

  background:
    transparent !important;

  border:
    1px solid
    var(--gc-portal-line) !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;

  font-family:
    var(--gc-portal-font) !important;

  font-size:
    9px !important;

  font-weight:
    800 !important;

  line-height:
    1;

  letter-spacing:
    .1em;

  text-transform:
    uppercase;

  white-space:
    nowrap;

  transition:
    color .25s ease,
    background-color .25s ease,
    border-color .25s ease;

}


.gc-portal__chip:hover {

  border-color:
    var(--gc-portal-black) !important;

}


.gc-portal__chip[aria-pressed="true"] {

  color:
    #ffffff !important;

  background:
    var(--gc-portal-red) !important;

  border-color:
    var(--gc-portal-red) !important;

}


/* =========================================================
   SEARCH
========================================================= */

.gc-portal__search {

  position:
    relative;

  display:
    flex;

  align-items:
    center;

  width:
    100%;

}


.gc-portal__search svg {

  position:
    absolute;

  left:
    16px;

  width:
    16px;

  height:
    16px;

  pointer-events:
    none;

  fill:
    none;

  stroke:
    var(--gc-portal-muted);

  stroke-width:
    1.7;

}


.gc-portal__search input {

  display:
    block;

  width:
    100%;

  height:
    46px;

  margin:
    0 !important;

  padding:
    0
    16px
    0
    44px !important;

  color:
    var(--gc-portal-black) !important;

  background:
    var(--gc-portal-white) !important;

  border:
    1px solid
    var(--gc-portal-line) !important;

  border-radius:
    0 !important;

  outline:
    none;

  box-shadow:
    none !important;

  font-family:
    var(--gc-portal-font) !important;

  font-size:
    13px !important;

  transition:
    border-color .25s ease,
    box-shadow .25s ease;

}


.gc-portal__search input:focus {

  border-color:
    var(--gc-portal-black) !important;

  box-shadow:
    inset
    0
    -2px
    0
    var(--gc-portal-red) !important;

}


.gc-portal__search input::placeholder {

  color:
    #9a9692;

}


/* =========================================================
   PROGRAM GROUP
========================================================= */

.gc-portal__group {

  display:
    grid;

  grid-template-columns:
    minmax(230px, 320px)
    minmax(0, 1fr);

  gap:
    clamp(
      40px,
      6vw,
      100px
    );

  padding:
    54px
    0;

  border-bottom:
    1px solid
    var(--gc-portal-line);

}


.gc-portal__group[hidden] {

  display:
    none !important;

}


.gc-portal__group-info {

  position:
    relative;

  padding-top:
    18px;

}


.gc-portal__group-info::before {

  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    38px;

  height:
    2px;

  background:
    var(--gc-portal-red);

}


.gc-portal__group-title {

  margin:
    0
    0
    14px !important;

  color:
    var(--gc-portal-black) !important;

  font-family:
    var(--gc-portal-font) !important;

  font-size:
    clamp(
      24px,
      2.2vw,
      34px
    ) !important;

  font-weight:
    800 !important;

  line-height:
    1.04 !important;

  letter-spacing:
    -.035em;

}


.gc-portal__group-title span {

  display:
    block;

  margin-top:
    5px;

  color:
    var(--gc-portal-red) !important;

  font-size:
    .68em;

  font-weight:
    500 !important;

  line-height:
    1.3;

  letter-spacing:
    -.015em;

}


.gc-portal__group-description {

  width:
    100%;

  max-width:
    31ch;

  margin:
    0 !important;

  color:
    var(--gc-portal-text) !important;

  font-size:
    14px !important;

  font-weight:
    400;

  line-height:
    1.65 !important;

}


/* =========================================================
   ACCESS LIST
========================================================= */

.gc-portal__list {

  margin:
    0 !important;

  padding:
    0 !important;

  list-style:
    none !important;

  border-top:
    2px solid
    var(--gc-portal-black);

}


.gc-portal__list li {

  margin:
    0 !important;

  padding:
    0 !important;

  list-style:
    none !important;

  border-bottom:
    1px solid
    var(--gc-portal-line);

}


.gc-portal__list li:last-child {

  border-bottom:
    0;

}


.gc-portal__list li::before {

  display:
    none !important;

  content:
    none !important;

}


/* =========================================================
   ACCESS ROW
========================================================= */

.gc-portal__access {

  position:
    relative;

  display:
    grid !important;

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

  align-items:
    center;

  gap:
    24px;

  width:
    100%;

  min-height:
    96px;

  margin:
    0 !important;

  padding:
    18px
    18px !important;

  color:
    inherit !important;

  text-decoration:
    none !important;

  background:
    transparent;

  overflow:
    hidden;

  transition:
    background-color .3s ease;

}


.gc-portal__access::before {

  content:
    "";

  position:
    absolute;

  top:
    50%;

  left:
    0;

  width:
    3px;

  height:
    0;

  background:
    var(--gc-portal-red);

  transform:
    translateY(-50%);

  transition:
    height
    .35s
    var(--gc-portal-ease);

}


.gc-portal__access:hover {

  background:
    var(--gc-portal-soft);

}


.gc-portal__access:hover::before {

  height:
    58%;

}


.gc-portal__access-copy {

  display:
    block;

  min-width:
    0;

}


.gc-portal__access-title {

  display:
    block;

  color:
    var(--gc-portal-black);

  font-size:
    17px;

  font-weight:
    750;

  line-height:
    1.2;

  letter-spacing:
    -.015em;

}


.gc-portal__access-note {

  display:
    block;

  width:
    100%;

  max-width:
    580px;

  margin-top:
    6px;

  color:
    var(--gc-portal-muted);

  font-size:
    12px;

  font-weight:
    400;

  line-height:
    1.5;

}


/* =========================================================
   LOGIN BUTTON
========================================================= */

.gc-portal__login {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  min-width:
    120px;

  height:
    44px;

  padding:
    0
    18px;

  color:
    #ffffff;

  background:
    var(--gc-portal-red);

  border:
    1px solid
    var(--gc-portal-red);

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;

  white-space:
    nowrap;

  transition:
    background-color .3s ease,
    border-color .3s ease,
    transform .3s var(--gc-portal-ease),
    box-shadow .3s ease;

}


.gc-portal__login svg {

  display:
    block;

  width:
    11px;

  height:
    11px;

  flex:
    0 0 auto;

  transition:
    transform
    .3s
    var(--gc-portal-ease);

}


.gc-portal__access:hover
.gc-portal__login {

  background:
    var(--gc-portal-black);

  border-color:
    var(--gc-portal-black);

  transform:
    translateY(-2px);

  box-shadow:
    0
    8px
    20px
    rgba(0,0,0,.12);

}


.gc-portal__access:hover
.gc-portal__login svg {

  transform:
    translate(
      3px,
      -3px
    );

}


/* =========================================================
   EMPTY STATE
========================================================= */

.gc-portal__empty {

  display:
    none;

  padding:
    70px
    20px;

  border-bottom:
    1px solid
    var(--gc-portal-line);

  text-align:
    center;

}


.gc-portal__empty.is-visible {

  display:
    block;

}


.gc-portal__empty strong {

  display:
    block;

  margin-bottom:
    8px;

  color:
    var(--gc-portal-black);

  font-size:
    22px;

  font-weight:
    800;

}


.gc-portal__empty span {

  color:
    var(--gc-portal-muted);

  font-size:
    14px;

}


/* =========================================================
   SUPPORT BANNER
========================================================= */

.gc-portal__support {

  position:
    relative;

  display:
    grid !important;

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

  align-items:
    center;

  gap:
    50px;

  margin-top:
    70px;

  padding:
    40px
    44px;

  color:
    #ffffff;

  background:
    var(--gc-portal-red);

  border:
    0;

  overflow:
    hidden;

}


.gc-portal__support::after {

  content:
    "";

  position:
    absolute;

  top:
    -100px;

  right:
    -70px;

  width:
    260px;

  height:
    260px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:
    50%;

  pointer-events:
    none;

}


.gc-portal__support-copy {

  position:
    relative;

  z-index:
    2;

}


.gc-portal__support-eyebrow {

  display:
    block;

  margin-bottom:
    8px;

  color:
    rgba(
      255,
      255,
      255,
      .58
    );

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    .18em;

  text-transform:
    uppercase;

}


.gc-portal__support-title {

  margin:
    0
    0
    8px !important;

  color:
    #ffffff !important;

  font-family:
    var(--gc-portal-font) !important;

  font-size:
    23px !important;

  font-weight:
    800 !important;

  line-height:
    1.1 !important;

  letter-spacing:
    -.025em;

}


.gc-portal__support-text {

  width:
    100%;

  max-width:
    650px;

  margin:
    0 !important;

  color:
    rgba(
      255,
      255,
      255,
      .76
    ) !important;

  font-size:
    14px !important;

  line-height:
    1.65 !important;

}


.gc-portal__support-phone {

  position:
    relative;

  z-index:
    2;

  display:
    block;

  color:
    #ffffff !important;

  text-align:
    right;

  text-decoration:
    none !important;

}


.gc-portal__support-phone span {

  display:
    block;

  margin-bottom:
    5px;

  color:
    rgba(
      255,
      255,
      255,
      .58
    );

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    .18em;

  text-transform:
    uppercase;

}


.gc-portal__support-phone strong {

  display:
    block;

  color:
    #ffffff;

  font-size:
    clamp(
      23px,
      2vw,
      31px
    );

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    -.035em;

  transition:
    opacity .25s ease,
    transform .3s var(--gc-portal-ease);

}


.gc-portal__support-phone:hover strong {

  color:
    #ffffff !important;

  opacity:
    .72;

  transform:
    translateX(-3px);

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.gc-portal__sr {

  position:
    absolute !important;

  width:
    1px;

  height:
    1px;

  margin:
    -1px;

  padding:
    0;

  overflow:
    hidden;

  clip:
    rect(0 0 0 0);

  white-space:
    nowrap;

  border:
    0;

}


.gc-portal__chip:focus-visible,
.gc-portal__access:focus-visible,
.gc-portal__support-phone:focus-visible {

  outline:
    2px solid
    var(--gc-portal-red-bright);

  outline-offset:
    3px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

  .gc-portal {

    padding:
      70px
      32px
      80px;

  }


  .gc-portal__hero {

    grid-template-columns:
      1fr;

    gap:
      28px;

  }


  .gc-portal__hero-copy {

    max-width:
      620px;

  }


  .gc-portal__toolbar {

    grid-template-columns:
      1fr;

    gap:
      18px;

  }


  .gc-portal__search {

    max-width:
      420px;

  }


  .gc-portal__group {

    grid-template-columns:
      1fr;

    gap:
      30px;

  }


  .gc-portal__group-description {

    max-width:
      620px;

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .gc-portal {

    padding:
      44px
      20px
      60px;

  }


  /* =============================
     HERO
  ============================== */

  .gc-portal__hero {

    gap:
      21px;

    padding-bottom:
      34px;

  }


  .gc-portal__eyebrow {

    margin-bottom:
      14px !important;

    font-size:
      8px !important;

  }


  .gc-portal__eyebrow::before {

    width:
      22px;

  }


  .gc-portal__title {

    font-size:
      clamp(
        42px,
        13vw,
        56px
      ) !important;

  }


  .gc-portal__lead {

    max-width:
      none;

    font-size:
      14px !important;

    line-height:
      1.65 !important;

  }


  /* =============================
     TOOLBAR
  ============================== */

  .gc-portal__toolbar {

    gap:
      16px;

    padding:
      15px
      0
      18px;

  }


  /* =============================
     MOBILE FILTERS
     Same direction as Events
  ============================== */

  .gc-portal__filters {

    display:
      block;

    width:
      100%;

  }


  .gc-portal__filters-label {

    display:
      none;

  }


.gc-portal__filter-list {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 14px 20px;

  width: 100%;

  max-width: none;

  margin: 0;

  padding: 0 0 3px;

  overflow: visible;

  scrollbar-width: none;
}





  .gc-portal__chip {

    position:
      relative;

    flex:
      0
      0
      auto;

    min-height:
      0;

    height:
      auto;

    margin:
      0 !important;

    padding:
      0
      0
      8px !important;

    color:
      #5f5b57 !important;

    background:
      transparent !important;

    border:
      0 !important;

    border-radius:
      0 !important;

    box-shadow:
      none !important;

    font-size:
      8px !important;

    font-weight:
      700 !important;

    line-height:
      1;

    letter-spacing:
      .11em;

    white-space:
      nowrap;

  }


  .gc-portal__chip::after {

    content:
      "";

    position:
      absolute;

    bottom:
      0;

    left:
      0;

    width:
      0;

    height:
      2px;

    background:
      var(--gc-portal-red);

    transition:
      width .3s ease;

  }


  .gc-portal__chip:hover {

    color:
      var(--gc-portal-red) !important;

    background:
      transparent !important;

  }


  .gc-portal__chip[aria-pressed="true"] {

    color:
      var(--gc-portal-red) !important;

    background:
      transparent !important;

    border:
      0 !important;

  }


  .gc-portal__chip[aria-pressed="true"]::after {

    width:
      100%;

  }


  /* =============================
     SEARCH
  ============================== */

  .gc-portal__search {

    width:
      100%;

    max-width:
      none;

  }


  .gc-portal__search input {

    height:
      44px;

  }


  /* =============================
     GROUPS
  ============================== */

  .gc-portal__group {

    gap:
      25px;

    padding:
      38px
      0;

  }


  .gc-portal__group-info {

    padding-top:
      15px;

  }


  .gc-portal__group-info::before {

    width:
      30px;

  }


  .gc-portal__group-title {

    margin-bottom:
      11px !important;

    font-size:
      28px !important;

  }


  .gc-portal__group-title span {

    margin-top:
      4px;

    font-size:
      15px;

  }


  .gc-portal__group-description {

    max-width:
      none;

    font-size:
      13px !important;

    line-height:
      1.6 !important;

  }


  /* =============================
     ACCESS ROW
  ============================== */

  .gc-portal__access {

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

    gap:
      13px;

    min-height:
      88px;

    padding:
      15px
      0 !important;

  }


  .gc-portal__access::before {

    display:
      none;

  }


  .gc-portal__access:hover {

    padding:
      15px
      0 !important;

    background:
      transparent;

  }


  .gc-portal__access-title {

    font-size:
      15px;

  }


  .gc-portal__access-note {

    max-width:
      none;

    margin-top:
      5px;

    padding-right:
      4px;

    font-size:
      10.5px;

    line-height:
      1.45;

  }


  /* =============================
     LOGIN BUTTON
  ============================== */

  .gc-portal__login {

    min-width:
      88px;

    height:
      39px;

    gap:
      7px;

    padding:
      0
      11px;

    font-size:
      8px;

    letter-spacing:
      .1em;

  }


  .gc-portal__login svg {

    width:
      9px;

    height:
      9px;

  }


  .gc-portal__access:hover
  .gc-portal__login {

    transform:
      none;

    box-shadow:
      none;

  }


  /* =============================
     SUPPORT
  ============================== */

  .gc-portal__support {

    grid-template-columns:
      1fr;

    gap:
      26px;

    margin-top:
      48px;

    padding:
      30px
      24px;

  }


  .gc-portal__support::after {

    top:
      -75px;

    right:
      -115px;

    width:
      220px;

    height:
      220px;

  }


  .gc-portal__support-title {

    font-size:
      21px !important;

  }


  .gc-portal__support-text {

    font-size:
      13px !important;

  }


  .gc-portal__support-phone {

    text-align:
      left;

  }


  .gc-portal__support-phone strong {

    font-size:
      25px;

  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 374px) {

  .gc-portal {

    padding-right:
      17px;

    padding-left:
      17px;

  }


  .gc-portal__filter-list {

    width:
      calc(
        100vw -
        34px
      );

    gap:
      18px;

  }


  .gc-portal__login {

    min-width:
      82px;

    padding:
      0
      9px;

  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .gc-portal *,
  .gc-portal *::before,
  .gc-portal *::after {

    transition:
      none !important;

  }

}


/* ============================================
   CUSTOMER PORTAL — COMPACT MOBILE FILTERS
============================================ */

@media (max-width: 767px) {

  /* Reduce space above filters */
  .gc-portal__hero {
    padding-bottom: 20px !important;
  }

  /* Bring border lines closer to filters */
  .gc-portal__toolbar {
    padding: 7px 0 6px !important;
  }

  /* Bring filter rows closer */
  .gc-portal__filter-list {
    row-gap: 16px !important;
    column-gap: 20px;
    padding: 0 !important;
  }

  /* Bring active underline closer to text */
  .gc-portal__chip {
    min-height: 0 !important;
    padding: 0 0 2px !important;
    line-height: 1 !important;
  }

  /* Reduce space before first program */
  .gc-portal__group {
    padding-top: 24px;
  }

}

/* ==========================================
   TRAINING ACCESS — MOBILE FILTERS
========================================== */

@media (max-width: 767px) {

  .gc-portal__toolbar {
    width: 100%;
    text-align: center;
  }

  .gc-portal__filters {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .gc-portal__filter-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 16px;
    width: 100%;
  }

}