@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/montserrat/montserrat-latin.woff2") format("woff2");
}

:root {
  --convegno-black: #111111;
  --convegno-brand-black: #111213;
  --convegno-neutral-900: #333333;
  --convegno-neutral-100: #eeeeee;
  --convegno-neutral-600: #5a5a5f;
  --convegno-neutral-500: #999999;
  --convegno-neutral-300: #cccccc;
  --convegno-header-border: #e3e1dc;
  --convegno-red: #a63241;
  --convegno-blue-300: #9fbbd4;
  --convegno-blue-700: #2e5e8c;
  --convegno-blue-900: #13293d;
  --convegno-white: #ffffff;
  --convegno-breakpoint-wide: 1600px;
}

html,
body {
  min-height: 100%;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: var(--convegno-neutral-900);
  background: var(--convegno-white);
  font-family: "Montserrat", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.site-shell {
  min-height: 100vh;
  min-height: 100svh;
  justify-content: space-between;
}

.site-header {
  flex: 0 0 64px;
  height: 64px;
  border: 1px solid var(--convegno-neutral-300);
  background: var(--convegno-white);
}

.site-header__inner {
  height: 100%;
  padding-inline: 15px;
}

.site-brand {
  color: var(--convegno-black);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.site-brand:hover,
.site-brand:focus-visible {
  color: var(--convegno-black);
}

.site-brand:focus-visible {
  outline: 3px solid var(--convegno-blue-300);
  outline-offset: 4px;
}

.language-switcher {
  gap: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  white-space: nowrap;
}

.language-switcher__item {
  color: var(--convegno-neutral-600);
}

.language-switcher__item--active {
  color: var(--convegno-red);
}

.language-switcher__separator {
  color: var(--convegno-neutral-600);
  font-size: 13px;
  line-height: 1;
}

.site-main {
  flex: 0 0 auto;
  gap: 64px;
  padding: 48px 20px;
}

.hero {
  max-width: 900px;
  gap: 24px;
}

.event-logo {
  display: block;
  width: calc(100% - 64px);
  height: auto;
  aspect-ratio: 600 / 289;
  flex: 0 0 auto;
}

.hero__title {
  color: var(--convegno-neutral-900);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}

.hero__description {
  color: var(--convegno-neutral-900);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
}

.event-date {
  max-width: 900px;
  min-height: 106px;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--convegno-neutral-300);
  border-bottom: 1px solid var(--convegno-neutral-300);
  color: var(--convegno-black);
}

.event-date__part {
  gap: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.event-date__number {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.56px;
  line-height: 1.1;
}

.event-date__label {
  color: var(--convegno-neutral-500);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.75px;
  line-height: normal;
}

.event-date__separator {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
}

.event-location {
  color: var(--convegno-neutral-900);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
}

.site-footer {
  /*flex: 0 0 69px;*/
  min-height: 69px;
  padding: 24px 16px;
  border-top: 1px solid var(--convegno-neutral-300);
}

.site-footer__copyright {
  color: var(--convegno-neutral-900);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 1.6;
  white-space: nowrap;
}

@media (max-width: 389.98px) {
  .site-main {
    padding-inline: 16px;
  }

  .event-date {
    gap: clamp(8px, 3.5vw, 16px);
  }

  .event-date__number {
    font-size: clamp(40px, 12.3vw, 48px);
  }

  .event-date__label {
    font-size: clamp(11px, 3.6vw, 14px);
  }

  .site-footer__copyright {
    font-size: 12px;
  }
}

@media (min-width: 768px) {
  .site-header {
    flex-basis: 80px;
    height: 80px;
    border-color: var(--convegno-header-border);
  }

  .site-header__inner,
  .site-main {
    width: calc(100% - 48px) !important;
    max-width: 1200px;
    padding-inline: 0;
  }

  .site-brand {
    color: var(--convegno-brand-black);
    font-size: 26px;
  }

  .event-logo {
    width: 480px;
    height: 231px;
    aspect-ratio: auto;
  }

  .hero__title {
    font-size: 33px;
  }

  .hero__description {
    font-size: 20px;
  }

  .event-date {
    min-height: 151px;
    gap: 40px;
    padding: 16px 32px;
  }

  .event-date__number {
    font-size: 86px;
    letter-spacing: -1px;
  }

  .event-date__label {
    font-size: 16px;
    letter-spacing: 2px;
  }

  .event-location {
    font-size: 26px;
  }
}

@media (min-width: 1200px) {
  .event-location {
    white-space: nowrap;
  }
}

/* Layout ampio: entra prima del Full HD e copre le tavole 1080p e 2K. */
@media (min-width: 1600px) {
  .site-header {
    flex-basis: 96px;
    height: 96px;
  }

  .site-header__inner,
  .site-main {
    width: calc(100% - 80px) !important;
    max-width: 1600px;
  }

  .site-brand {
    font-size: 30px;
  }

  .language-switcher {
    gap: 10px;
    font-size: 18px;
  }

  .hero__title {
    font-size: 40px;
  }

  .hero__description {
    font-size: 24px;
  }

  .event-date {
    min-height: 168px;
  }

  .event-date__number {
    font-size: 100px;
    letter-spacing: -1.16px;
  }

  .event-date__label {
    font-size: 18px;
    letter-spacing: 2.25px;
  }

  .event-location {
    font-size: 30px;
  }

  .site-footer {
    /*flex-basis: 74px;*/
    min-height: 74px;
  }

  .site-footer__copyright {
    font-size: 16px;
    letter-spacing: 0.25px;
  }
}

/* Variante statica per il giorno dell'evento. Tutte le regole sono isolate
   dalla pagina coming soon tramite la classe sul body. */
.event-day-page {
  background: var(--convegno-neutral-100);
}

.event-day-page .event-day-shell {
  justify-content: flex-start;
  gap: 64px;
}

.event-day-page .event-day-main {
  gap: 64px;
  padding: 0 20px;
}

.event-day-page .site-footer {
  background: var(--convegno-white);
}

.resources-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.resource-card {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 24px;
  border-radius: 12px;
  background: var(--convegno-white);
  box-shadow: inset 0 0 0 1px var(--convegno-neutral-300);
}

.resource-card__thumbnail {
  display: flex;
  flex: 0 0 56px;
  width: 56px;
  height: 65px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 8px;
  color: var(--convegno-blue-900);
  background: rgb(159 187 212 / 50%);
}

.resource-card__thumbnail img {
  display: block;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}

.resource-card__thumbnail span {
  font-size: 11px;
  font-weight: 700;
  line-height: normal;
}

.resource-card__content,
.resource-card__main,
.resource-card__copy,
.resource-card__meta,
.resource-card__actions {
  display: flex;
}

.resource-card__content {
  min-width: 0;
  flex: 1 1 auto;
  align-self: stretch;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}

.resource-card__main,
.resource-card__copy,
.resource-card__meta,
.resource-card__actions {
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
}

.resource-card__main {
  gap: 16px;
}

.resource-card--research-current .resource-card__main {
  gap: 28px;
}

.resource-card__meta {
  gap: 8px;
}

.resource-tag {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 4px 14px;
  border: 1px solid var(--convegno-neutral-300);
  border-radius: 100px;
  color: var(--convegno-neutral-900);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 1.6;
  white-space: nowrap;
}

.resource-overline {
  color: var(--convegno-neutral-900);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.75px;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
}

.resource-card__copy {
  gap: 8px;
  line-height: 1.6;
}

.resource-card__copy h3,
.resource-card__copy p {
  width: 100%;
  margin: 0;
}

.resource-card__copy h3 {
  color: var(--convegno-black);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}

.resource-card__copy p {
  color: var(--convegno-neutral-900);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

.resource-card__actions {
  gap: 16px;
}

.resource-button {
  display: inline-flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  white-space: normal;
  text-decoration: none;
}

.resource-button--primary {
  border: 1.5px solid var(--convegno-red);
  color: var(--convegno-white);
  background: var(--convegno-red);
}

.resource-button--accent {
  border: 1.5px solid var(--convegno-blue-700);
  color: var(--convegno-white);
  background: var(--convegno-blue-700);
}

.resource-button--outline {
  border: 1.5px solid var(--convegno-neutral-900);
  color: var(--convegno-black);
  background: var(--convegno-white);
}

.resource-button:disabled {
  cursor: not-allowed;
  opacity: 1;
  -webkit-text-fill-color: currentColor;
}

@media (min-width: 768px) {
  .event-day-page .event-day-shell {
    gap: 128px;
  }

  .event-day-page .event-day-main {
    padding: 0;
  }

  .resources-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  .resource-card {
    gap: 32px;
    padding: 32px;
  }
  
  .resource-card-full {
    grid-column: 1 / span 2;
  }

  .resource-card__meta,
  .resource-card__actions {
    flex-direction: row;
  }

  .resource-card__meta {
    align-items: center;
    justify-content: space-between;
  }

  .resource-tag {
    min-height: 38px;
    padding-inline: 20px;
  }

  .resource-overline {
    font-size: 16px;
    letter-spacing: 2px;
  }

  .resource-card__copy h3 {
    font-size: 20px;
  }

  .resource-button {
    width: auto;
    min-height: 64px;
    padding-inline: 32px;
    font-size: 20px;
  }

  .resource-card__actions {
    gap: 24px;
  }
}

@media (min-width: 768px) and (max-width: 1279.98px) {
  .resource-card__meta,
  .resource-card__actions {
    flex-wrap: wrap;
  }

  .resource-button {
    max-width: 100%;
  }
}

@media (min-width: 1600px) {
  .resource-tag {
    min-height: 44px;
    padding-inline: 24px;
  }

  .resource-overline {
    font-size: 18px;
    letter-spacing: 2.25px;
  }

  .resource-card__copy h3 {
    font-size: 24px;
  }

  .resource-card__copy p {
    font-size: 18px;
  }

  .resource-button {
    min-height: 76px;
    padding-inline: 40px;
    font-size: 24px;
  }
}