/* =========================================================
   GAMESALONE18 UNIVERSE
   AGENDA 2026
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

  --green: #00ffae;
  --green-2: #00c989;

  --green-soft:
    rgba(0, 255, 174, .11);

  --green-border:
    rgba(0, 255, 174, .25);

  --bg: #050507;

  --surface: #0d0d12;
  --surface-2: #121219;
  --surface-3: #17171f;

  --border:
    rgba(255, 255, 255, .09);

  --border-strong:
    rgba(255, 255, 255, .14);

  --text: #f7f7f8;

  --muted: #a7a7b0;

  --muted-2: #74747f;

  --header: 74px;

  --radius: 24px;

  --max: 1180px;

}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}


html {

  scroll-behavior: smooth;

  -webkit-text-size-adjust: 100%;

}


body {

  margin: 0;

  min-height: 100vh;

  overflow-x: hidden;

  background:
    var(--bg);

  color:
    var(--text);

  font-family:
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Arial,
    sans-serif;

  -webkit-font-smoothing:
    antialiased;

}


a {

  color: inherit;

  text-decoration: none;

}


button {

  color: inherit;

  font: inherit;

}


img {

  display: block;

  max-width: 100%;

}


button,
a {

  -webkit-tap-highlight-color:
    transparent;

}


/* =========================================================
   HEADER
========================================================= */

.site-header {

  position: fixed;

  inset:
    0 0 auto;

  z-index: 1000;

  height:
    var(--header);

  background:
    rgba(5, 5, 7, .82);

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

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

}


.nav-wrap {

  width:
    min(
      calc(100% - 36px),
      var(--max)
    );

  height: 100%;

  margin:
    auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;

}


.brand {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  font-weight:
    850;

  font-size:
    1.18rem;

  letter-spacing:
    -.03em;

}


.brand-dot {

  width:
    10px;

  height:
    10px;

  flex:
    0 0 auto;

  border-radius:
    50%;

  background:
    var(--green);

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

}


.main-nav {

  display:
    flex;

  align-items:
    center;

  gap:
    25px;

  font-size:
    .92rem;

  font-weight:
    650;

}


.main-nav > a:not(.nav-cta) {

  position:
    relative;

  color:
    #d2d2d8;

  transition:
    color .18s ease;

}


.main-nav > a:not(.nav-cta):hover {

  color:
    #fff;

}


.main-nav > a.nav-current {

  color:
    var(--green);

}


.main-nav > a.nav-current::after {

  content:
    "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    -10px;

  height:
    2px;

  border-radius:
    99px;

  background:
    var(--green);

}


.nav-cta {

  min-height:
    42px;

  padding:
    0 17px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  border:
    1px solid
    rgba(0, 255, 174, .34);

  border-radius:
    999px;

  background:
    var(--green-soft);

  color:
    var(--green);

}


.menu-toggle {

  display:
    none;

  width:
    44px;

  height:
    44px;

  padding:
    10px;

  border:
    0;

  background:
    transparent;

  cursor:
    pointer;

}


.menu-toggle span {

  display:
    block;

  width:
    23px;

  height:
    2px;

  margin:
    5px auto;

  background:
    #fff;

  transition:
    .2s;

}


/* =========================================================
   MAIN
========================================================= */

main {

  padding-top:
    var(--header);

}


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

.agenda-hero {

  position:
    relative;

  min-height:
    520px;

  overflow:
    hidden;

  display:
    flex;

  align-items:
    center;

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

  background:
    #07070a;

}


.agenda-hero-bg {

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:

    radial-gradient(
      circle at 76% 42%,
      rgba(0, 255, 174, .13),
      transparent 25%
    ),

    radial-gradient(
      circle at 20% 5%,
      rgba(0, 255, 174, .055),
      transparent 27%
    ),

    linear-gradient(
      135deg,
      #09090e 0%,
      #050507 58%,
      #080a0a 100%
    );

}


.agenda-hero-bg::after {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  opacity:
    .15;

  background-image:

    linear-gradient(
      rgba(255, 255, 255, .035) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255, 255, 255, .035) 1px,
      transparent 1px
    );

  background-size:
    46px 46px;

  mask-image:
    linear-gradient(
      to bottom,
      #000,
      transparent 94%
    );

}


.agenda-hero-shell {

  position:
    relative;

  z-index:
    1;

  width:
    min(
      calc(100% - 36px),
      var(--max)
    );

  margin:
    auto;

  padding:
    80px 0;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(250px, .65fr);

  align-items:
    center;

  gap:
    70px;

}


.eyebrow,
.section-kicker {

  margin:
    0 0 15px;

  color:
    var(--green);

  font-size:
    .72rem;

  font-weight:
    850;

  letter-spacing:
    .2em;

}


.agenda-hero h1 {

  max-width:
    780px;

  margin:
    0;

  font-size:
    clamp(
      3.5rem,
      7vw,
      6.5rem
    );

  line-height:
    .91;

  letter-spacing:
    -.065em;

  font-weight:
    900;

}


.agenda-hero h1 span {

  display:
    block;

  color:
    var(--green);

}


.agenda-hero-description {

  max-width:
    650px;

  margin:
    28px 0 0;

  color:
    var(--muted);

  font-size:
    1.04rem;

  line-height:
    1.75;

}


.agenda-summary {

  width:
    fit-content;

  margin-top:
    34px;

  padding:
    14px 18px;

  display:
    flex;

  align-items:
    center;

  gap:
    20px;

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

  border-radius:
    16px;

  background:
    rgba(255, 255, 255, .025);

}


.summary-item {

  display:
    grid;

  gap:
    2px;

}


.summary-item strong {

  color:
    var(--text);

  font-size:
    .95rem;

  font-weight:
    850;

}


.summary-item span {

  color:
    var(--muted-2);

  font-size:
    .7rem;

  text-transform:
    uppercase;

  letter-spacing:
    .09em;

}


.summary-divider {

  width:
    1px;

  height:
    32px;

  background:
    var(--border);

}


/* =========================================================
   MARCA GA18
========================================================= */

.agenda-hero-mark {

  justify-self:
    center;

  width:
    240px;

  height:
    240px;

  display:
    grid;

  place-content:
    center;

  text-align:
    center;

  border:
    1px solid
    rgba(0, 255, 174, .20);

  border-radius:
    50%;

  background:
    rgba(0, 255, 174, .025);

  box-shadow:

    inset
    0 0 70px
    rgba(0, 255, 174, .035),

    0 0 100px
    rgba(0, 255, 174, .05);

}


.agenda-mark-top {

  display:
    block;

  font-size:
    2rem;

  font-weight:
    900;

  letter-spacing:
    -.07em;

}


.agenda-hero-mark strong {

  display:
    block;

  margin-top:
    4px;

  color:
    var(--green);

  font-size:
    5rem;

  line-height:
    .8;

  letter-spacing:
    -.08em;

}


.agenda-mark-bottom {

  display:
    block;

  margin-top:
    19px;

  color:
    var(--muted-2);

  font-size:
    .62rem;

  font-weight:
    850;

  letter-spacing:
    .28em;

}


/* =========================================================
   SECCIÓN AGENDA
========================================================= */

.agenda-section {

  position:
    relative;

  padding:
    82px 0 95px;

}


.agenda-container {

  width:
    min(
      calc(100% - 36px),
      var(--max)
    );

  margin:
    auto;

}


.agenda-section-head {

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    30px;

  margin-bottom:
    32px;

}


.agenda-section-head h2 {

  margin:
    0;

  font-size:
    clamp(
      2.2rem,
      4vw,
      3.3rem
    );

  line-height:
    1.05;

  letter-spacing:
    -.045em;

}


.agenda-section-intro {

  max-width:
    390px;

  margin:
    0;

  color:
    var(--muted);

  text-align:
    right;

  line-height:
    1.6;

}


/* =========================================================
   MESES
========================================================= */

.month-navigation {

  margin-bottom:
    38px;

  padding-bottom:
    7px;

  display:
    flex;

  gap:
    8px;

  overflow-x:
    auto;

  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(255, 255, 255, .14)
    transparent;

}


.month-button {

  flex:
    0 0 auto;

  min-height:
    42px;

  padding:
    0 16px;

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

  border-radius:
    999px;

  background:
    rgba(255, 255, 255, .025);

  color:
    var(--muted);

  font-size:
    .77rem;

  font-weight:
    800;

  letter-spacing:
    .06em;

  text-transform:
    uppercase;

  cursor:
    pointer;

  transition:

    color .18s ease,
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;

}


.month-button:hover {

  color:
    #fff;

  border-color:
    var(--border-strong);

  transform:
    translateY(-1px);

}


.month-button.is-active {

  border-color:
    rgba(0, 255, 174, .40);

  background:
    var(--green-soft);

  color:
    var(--green);

}


/* =========================================================
   MES
========================================================= */

.agenda-month {

  display:
    grid;

  gap:
    18px;

}


.month-heading {

  margin-bottom:
    6px;

  display:
    flex;

  align-items:
    center;

  gap:
    15px;

}


.month-heading h3 {

  margin:
    0;

  font-size:
    clamp(
      1.45rem,
      3vw,
      2rem
    );

  letter-spacing:
    -.035em;

}


.month-heading span {

  height:
    1px;

  flex:
    1;

  background:
    var(--border);

}


/* =========================================================
   EVENTO
========================================================= */

.event-card {

  position:
    relative;

  min-height:
    215px;

  overflow:
    hidden;

  display:
    grid;

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

  align-items:
    stretch;

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

  border-radius:
    22px;

  background:
    var(--surface);

  transition:

    transform .2s ease,
    border-color .2s ease,
    background .2s ease;

}


.event-card:hover {

  transform:
    translateY(-3px);

  border-color:
    rgba(0, 255, 174, .20);

  background:
    #101016;

}


.event-card::after {

  content:
    "";

  position:
    absolute;

  width:
    220px;

  height:
    220px;

  right:
    -130px;

  top:
    -130px;

  border-radius:
    50%;

  background:
    rgba(0, 255, 174, .055);

  filter:
    blur(15px);

  pointer-events:
    none;

}


/* FECHA */

.event-date {

  position:
    relative;

  z-index:
    1;

  padding:
    28px 20px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

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

  background:
    rgba(255, 255, 255, .018);

}


.event-day {

  color:
    var(--text);

  font-size:
    3.6rem;

  font-weight:
    900;

  line-height:
    .9;

  letter-spacing:
    -.06em;

}


.event-month {

  margin-top:
    9px;

  color:
    var(--green);

  font-size:
    .72rem;

  font-weight:
    900;

  letter-spacing:
    .18em;

}


.event-year {

  margin-top:
    5px;

  color:
    var(--muted-2);

  font-size:
    .68rem;

}


/* INFORMACIÓN */

.event-main {

  position:
    relative;

  z-index:
    1;

  padding:
    27px 30px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

}


.event-badges {

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    7px;

  margin-bottom:
    13px;

}


.event-badge {

  min-height:
    25px;

  padding:
    0 9px;

  display:
    inline-flex;

  align-items:
    center;

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

  border-radius:
    999px;

  background:
    rgba(255, 255, 255, .025);

  color:
    #b8b8c0;

  font-size:
    .62rem;

  font-weight:
    850;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;

}


.event-badge.type {

  border-color:
    rgba(0, 255, 174, .22);

  color:
    var(--green);

}


.event-badge.today {

  border-color:
    var(--green);

  background:
    var(--green);

  color:
    #001c13;

}


.event-badge.finished {

  color:
    #777781;

}


.event-title {

  margin:
    0;

  font-size:
    clamp(
      1.4rem,
      2.5vw,
      2rem
    );

  line-height:
    1.1;

  letter-spacing:
    -.035em;

}


.event-description {

  max-width:
    720px;

  margin:
    13px 0 0;

  color:
    var(--muted);

  font-size:
    .91rem;

  line-height:
    1.65;

}


.event-details {

  margin-top:
    18px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px 17px;

  color:
    #c9c9d0;

  font-size:
    .78rem;

}


.event-detail {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

}


.event-detail::before {

  content:
    "";

  width:
    5px;

  height:
    5px;

  flex:
    0 0 auto;

  border-radius:
    50%;

  background:
    var(--green);

}


/* ACCIÓN */

.event-action {

  position:
    relative;

  z-index:
    1;

  min-width:
    185px;

  padding:
    25px 28px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

}


.event-button {

  min-height:
    45px;

  padding:
    0 18px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  border:
    1px solid
    rgba(0, 255, 174, .35);

  border-radius:
    999px;

  background:
    var(--green-soft);

  color:
    var(--green);

  font-size:
    .78rem;

  font-weight:
    850;

  white-space:
    nowrap;

  transition:

    transform .18s ease,
    background .18s ease;

}


.event-button:hover {

  transform:
    translateY(-2px);

  background:
    rgba(0, 255, 174, .16);

}


/* =========================================================
   EVENTO FINALIZADO
========================================================= */

.event-card.is-finished {

  opacity:
    .68;

}


.event-card.is-finished:hover {

  opacity:
    .82;

}


/* =========================================================
   LOADING
========================================================= */

.agenda-status {

  min-height:
    240px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    15px;

  color:
    var(--muted);

}


.agenda-status p {

  margin:
    0;

  font-size:
    .85rem;

}


.loading-indicator {

  width:
    31px;

  height:
    31px;

  border:
    2px solid
    rgba(255, 255, 255, .09);

  border-top-color:
    var(--green);

  border-radius:
    50%;

  animation:
    agenda-spin .8s linear infinite;

}


@keyframes agenda-spin {

  to {
    transform:
      rotate(360deg);
  }

}


/* =========================================================
   MENSAJES
========================================================= */

.agenda-message {

  min-height:
    180px;

  padding:
    30px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    18px;

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

  border-radius:
    20px;

  background:
    var(--surface);

  text-align:
    left;

}


.agenda-message.is-hidden {

  display:
    none;

}


.message-icon {

  width:
    48px;

  height:
    48px;

  flex:
    0 0 auto;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(0, 255, 174, .25);

  border-radius:
    50%;

  background:
    var(--green-soft);

  color:
    var(--green);

  font-weight:
    900;

}


.agenda-message strong {

  display:
    block;

  font-size:
    1rem;

}


.agenda-message p {

  margin:
    7px 0 0;

  color:
    var(--muted);

  font-size:
    .84rem;

  line-height:
    1.5;

}


/* =========================================================
   CIERRE
========================================================= */

.agenda-closing {

  width:
    min(
      calc(100% - 36px),
      var(--max)
    );

  margin:
    0 auto;

  padding:
    0 0 90px;

}


.agenda-closing-card {

  min-height:
    270px;

  padding:
    clamp(
      30px,
      6vw,
      58px
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    50px;

  overflow:
    hidden;

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

  border-radius:
    var(--radius);

  background:

    radial-gradient(
      circle at 88% 50%,
      rgba(0, 255, 174, .11),
      transparent 27%
    ),

    var(--surface);

}


.agenda-closing-card h2 {

  margin:
    0;

  font-size:
    clamp(
      2rem,
      4vw,
      3rem
    );

  line-height:
    1.05;

  letter-spacing:
    -.045em;

}


.agenda-closing-card p:not(.section-kicker) {

  max-width:
    630px;

  margin:
    18px 0 0;

  color:
    var(--muted);

  line-height:
    1.7;

}


.closing-button {

  min-height:
    49px;

  padding:
    0 21px;

  flex:
    0 0 auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  border-radius:
    999px;

  background:
    var(--green);

  color:
    #001c13;

  font-size:
    .82rem;

  font-weight:
    850;

  transition:
    transform .18s ease;

}


.closing-button:hover {

  transform:
    translateY(-2px);

}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {

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

  background:
    #030304;

}


.footer-grid,
.footer-bottom {

  width:
    min(
      calc(100% - 36px),
      var(--max)
    );

  margin-inline:
    auto;

}


.footer-grid {

  padding:
    42px 0 30px;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    36px;

}


.footer-brand {

  font-size:
    1.05rem;

  font-weight:
    850;

}


.footer-grid p {

  margin:
    10px 0 0;

  color:
    var(--muted);

  font-size:
    .88rem;

}


.footer-nav {

  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    flex-end;

  gap:
    10px 22px;

  color:
    #c7c7ce;

  font-size:
    .87rem;

}


.footer-nav a:hover {

  color:
    #fff;

}


.footer-bottom {

  min-height:
    62px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

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

  color:
    #73737d;

  font-size:
    .78rem;

}


.footer-cookie-link {

  appearance:
    none;

  border:
    0;

  padding:
    0;

  margin:
    0;

  background:
    none;

  color:
    inherit;

  font:
    inherit;

  cursor:
    pointer;

  text-decoration:
    none;

}


.footer-cookie-link:hover,
.footer-cookie-link:focus-visible {

  text-decoration:
    underline;

}


/* =========================================================
   COOKIES
========================================================= */

.cookie-banner {

  position:
    fixed;

  z-index:
    5000;

  left:
    20px;

  right:
    20px;

  bottom:
    20px;

  display:
    flex;

  justify-content:
    center;

  transition:

    opacity .25s ease,
    transform .25s ease;

}


.cookie-hidden {

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transform:
    translateY(20px);

}


.cookie-content {

  width:
    min(
      100%,
      900px
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

  padding:
    20px 22px;

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

  border-radius:
    18px;

  background:
    rgba(13, 13, 18, .98);

  box-shadow:
    0 18px 60px
    rgba(0, 0, 0, .55);

}


.cookie-text {

  flex:
    1;

}


.cookie-text strong {

  display:
    block;

  margin-bottom:
    5px;

  font-size:
    .95rem;

}


.cookie-text p {

  margin:
    0;

  color:
    var(--muted);

  font-size:
    .82rem;

  line-height:
    1.55;

}


.cookie-text a {

  color:
    var(--green);

  text-decoration:
    underline;

  text-underline-offset:
    3px;

}


.cookie-buttons {

  display:
    flex;

  flex-shrink:
    0;

  gap:
    9px;

}


.cookie-buttons button {

  min-height:
    42px;

  padding:
    0 17px;

  border-radius:
    999px;

  font-weight:
    750;

  font-size:
    .82rem;

  cursor:
    pointer;

}


.cookie-reject {

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

  background:
    transparent;

  color:
    #d6d6dc;

}


.cookie-accept {

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

  background:
    var(--green);

  color:
    #001c13;

}


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

@media (max-width: 900px) {

  :root {

    --header:
      66px;

  }


  .menu-toggle {

    display:
      block;

  }


  .menu-toggle.is-open
  span:nth-child(1) {

    transform:
      translateY(7px)
      rotate(45deg);

  }


  .menu-toggle.is-open
  span:nth-child(2) {

    opacity:
      0;

  }


  .menu-toggle.is-open
  span:nth-child(3) {

    transform:
      translateY(-7px)
      rotate(-45deg);

  }


  .main-nav {

    position:
      absolute;

    top:
      var(--header);

    left:
      0;

    right:
      0;

    display:
      none;

    padding:
      14px 18px 20px;

    background:
      #08080b;

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

  }


  .main-nav.is-open {

    display:
      grid;

    gap:
      4px;

  }


  .main-nav > a {

    min-height:
      48px;

    display:
      flex;

    align-items:
      center;

    padding:
      0 13px;

    border-radius:
      10px;

  }


  .main-nav > a.nav-current::after {

    display:
      none;

  }


  .nav-cta {

    margin-top:
      6px;

    justify-content:
      center;

  }


  .agenda-hero-shell {

    grid-template-columns:
      1fr;

    gap:
      50px;

  }


  .agenda-hero-copy {

    text-align:
      center;

  }


  .agenda-hero-description {

    margin-left:
      auto;

    margin-right:
      auto;

  }


  .agenda-summary {

    margin-left:
      auto;

    margin-right:
      auto;

  }


  .agenda-hero-mark {

    width:
      190px;

    height:
      190px;

  }


  .agenda-hero-mark strong {

    font-size:
      4rem;

  }


  .event-card {

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

  }


  .event-action {

    grid-column:
      2;

    min-width:
      0;

    padding:
      0 30px 28px;

    justify-content:
      flex-start;

  }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 600px) {

  .nav-wrap,
  .agenda-hero-shell,
  .agenda-container,
  .agenda-closing {

    width:
      calc(100% - 28px);

  }


  .agenda-hero {

    min-height:
      auto;

  }


  .agenda-hero-shell {

    padding:
      62px 0 55px;

    gap:
      38px;

  }


  .agenda-hero h1 {

    font-size:
      clamp(
        3rem,
        15vw,
        4.5rem
      );

  }


  .agenda-hero-description {

    font-size:
      .94rem;

    line-height:
      1.65;

  }


  .agenda-summary {

    width:
      100%;

    justify-content:
      center;

  }


  .agenda-hero-mark {

    display:
      none;

  }


  .agenda-section {

    padding:
      58px 0 65px;

  }


  .agenda-section-head {

    display:
      block;

  }


  .agenda-section-intro {

    margin-top:
      13px;

    text-align:
      left;

  }


  .month-navigation {

    margin-right:
      -14px;

    padding-right:
      14px;

  }


  .event-card {

    min-height:
      0;

    display:
      block;

    border-radius:
      18px;

  }


  .event-date {

    padding:
      20px 22px;

    flex-direction:
      row;

    justify-content:
      flex-start;

    gap:
      8px;

    border-right:
      0;

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

  }


  .event-day {

    font-size:
      2rem;

  }


  .event-month {

    margin-top:
      0;

    font-size:
      .7rem;

  }


  .event-year {

    margin-top:
      0;

  }


  .event-main {

    padding:
      24px 22px;

  }


  .event-description {

    font-size:
      .86rem;

  }


  .event-details {

    display:
      grid;

    gap:
      8px;

  }


  .event-action {

    padding:
      0 22px 24px;

    justify-content:
      stretch;

  }


  .event-button {

    width:
      100%;

  }


  .agenda-message {

    min-height:
      200px;

    padding:
      27px 22px;

    flex-direction:
      column;

    text-align:
      center;

  }


  .agenda-closing {

    padding-bottom:
      55px;

  }


  .agenda-closing-card {

    min-height:
      0;

    padding:
      31px 23px;

    display:
      block;

    border-radius:
      18px;

  }


  .closing-button {

    width:
      100%;

    margin-top:
      25px;

  }


  .footer-grid {

    display:
      grid;

  }


  .footer-nav {

    justify-content:
      flex-start;

  }


  .footer-bottom {

    padding:
      18px 0;

    flex-direction:
      column;

    align-items:
      flex-start;

    justify-content:
      center;

  }


  .cookie-banner {

    left:
      10px;

    right:
      10px;

    bottom:
      10px;

  }


  .cookie-content {

    display:
      block;

    padding:
      18px;

    border-radius:
      16px;

  }


  .cookie-buttons {

    width:
      100%;

    margin-top:
      15px;

  }


  .cookie-buttons button {

    flex:
      1;

  }

}


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

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

  html {

    scroll-behavior:
      auto;

  }


  .event-card,
  .event-button,
  .month-button,
  .closing-button {

    transition:
      none;

  }


  .loading-indicator {

    animation:
      none;

  }

}