/* fonts starts here ------------------------------------ */

@font-face {
  font-family: 'Apfel Grotezk Fett';
  src: url(../fonts/ApfelGrotezk-Fett.woff2) format("woff2");
}

@font-face {
  font-family: 'Apfel Grotezk Regular';
  src: url(../fonts/ApfelGrotezk-Regular.woff2) format("woff2");
}

@font-face {
  font-family: 'Apfel Grotezk Mittel';
  src: url(../fonts/ApfelGrotezk-Mittel.woff2) format("woff2");
}

:root {
  --font-primary: 'Apfel Grotezk Regular', sans-serif;
  --font-secondary: 'Apfel Grotezk Mittel', sans-serif;
  --font-3: 'Apfel Grotezk Fett', sans-serif;
}

/* text styles starts here ------------------------------------ */

.ts-1 {
  --font-family: var(--font-primary);
  --font-size: clamp(1.8rem, 2cqw + 1cqh, 3rem);
  --font-style: normal;
  --font-weight: normal;
  --line-height: 1.2;
  --letter-spacing: 0;
  --text-transform: none;
}
.ts-2 {
  --font-family: var(--font-secondary);
  --font-size: clamp(1.4rem, 1.5cqw + 1cqh, 1.8rem);
  --font-style: normal;
  --font-weight: 400;
  --line-height: 1;
  --letter-spacing: 0.12em;
  --text-transform: uppercase;
}
.ts-3 {
  --font-family: var(--font-3);
  --font-size: clamp(1rem, 1rem + 0.04cqw + 0.04cqh, 1.2rem);
  --font-style: normal;
  --font-weight: 500;
  --line-height: 1;
  --letter-spacing: 0.12em;
  --text-transform: uppercase;
}
.ts-4 {
  --font-family: var(--font-secondary);
  --font-size: clamp(1rem, 1rem + 0.04cqw + 0.04cqh, 1.2rem);
  --font-style: normal;
  --font-weight: 400;
  --line-height: 1.5;
  --letter-spacing: 0.12em;
  --text-transform: uppercase;
}
.ts-5 {
  --font-family: var(--font-primary);
  --font-size: clamp(1rem, 1rem + 0.04cqw + 0.04cqh, 1.2rem);
  --font-style: normal;
  --font-weight:normal;
  --line-height: 1.5;
  --letter-spacing: 0.24em;
  --text-transform: uppercase;
}
.ts-6,
.ts-6 span {
  --font-family: var(--font-primary);
  --font-size: clamp(1.2rem, 1rem + 0.2cqw + 0.2cqh, 1.4rem);
  --font-style: normal;
  --font-weight: normal;
  --line-height: 1.6;
  --letter-spacing: 0em;
  --text-transform: none;
}

.header {
  --font-size: 24px;

  font-family: var(--font-primary);
}

.logo {
  --font-size: inherit;
}

/* link styles ------------------------------------ */

.venue-name,
.address-1,
.address-2,
.date,
.time,
.link .text {
  padding: 0 0 2px;
}

/* link button styles ------------------------------------ */

.link-button {
  padding: 24px;
}

.rsvp-button {
  padding: 24px 40px;
}

/* container queries ------------------------------ */

@container (min-width: 600px) {

}

@container (min-width: 1024px) and (orientation: landscape) {

}

@container (min-width: 1280px) and (orientation: landscape) {

}

/* spacing starts ------------------------------------ */

* {
  --block-image-size: 100%;

  --ver-sp-xs: 8px;
  --ver-sp-s: 16px;
  --ver-sp-m: 40px;
  --ver-sp-l: 48px;
  --ver-sp-xl: 52px;
  
  --hor-sp-xs: 8px;
  --hor-sp-s: 16px;
  --hor-sp-m: 32px;
  --hor-sp-l: 40px;
  --hor-sp-xl: 48px;

  --ver-cq-value: .25cqh;
  --hor-cq-value: .25cqw;

  --v-sp-xs: calc(var(--ver-sp-xs) + var(--ver-cq-value));
  --v-sp-s: calc(var(--ver-sp-s) + var(--ver-cq-value));
  --v-sp-m: calc(var(--ver-sp-m) + var(--ver-cq-value));
  --v-sp-l: calc(var(--ver-sp-l) + var(--ver-cq-value));
  --v-sp-xl: calc(var(--ver-sp-xl) + var(--ver-cq-value));

  --h-sp-xs: calc(var(--hor-sp-xs) + var(--hor-cq-value));
  --h-sp-s: calc(var(--hor-sp-s) + var(--hor-cq-value));
  --h-sp-m: calc(var(--hor-sp-m) + var(--hor-cq-value));
  --h-sp-l: calc(var(--hor-sp-l) + var(--hor-cq-value));
  --h-sp-xl: calc(var(--hor-sp-xl) + var(--hor-cq-value));
}

* {
  --block-image-size: 100%;
}

.header {
  padding: 4px var(--h-sp-s) 16px;
}

.event-details {
  gap: var(--v-sp-m);
  padding-block-start: var(--v-sp-m);
}

.event-block {
  .event-description {
    padding-inline: var(--v-sp-s);
  }
}

.block > .divider {
  margin-block-end: var(--v-sp-l);
}

.time-wrapper,
.address-wrapper {
  gap: var(--v-sp-xs);
}

.block:not(.event-block) {

  margin-block-start: var(--v-sp-l);

  .block-content {
    padding: 0;
  }

  .block-header,
  .block-body {
    margin: 0 auto;
    padding: 0 var(--h-sp-m);
  }

  .block-body {
    margin-block-start: var(--v-sp-s);
  }

  .block-title,
  .block-description {
    padding: var(--v-sp-xs) var(--h-sp-xs);
  }
  
  .item {
    padding: var(--v-sp-s) var(--h-sp-s);
  }

  .item-group .divider {
    margin-block-start: var(--v-sp-l);
  }

  .image-container {
    margin-inline: auto;
  }

}

.block:is(.guestlist) .item {
  padding: var(--v-sp-xs) var(--h-sp-xs);
}

.footer {
  margin-block-start: var(--v-sp-l);
}

@container (min-width: 1024px) and (orientation: landscape) {
  
  .header {
    padding: 4px var(--h-sp-s);
  }

    /* spacing to avoid header from overwrap*/
    .stage,
    .event-details{
      padding-block: 56px;
    }

    .tool-hide {
      .stage,
      .event-details{
        padding-block: 40px;
      }
    }
}

@container (min-width: 1280px) and (orientation: landscape) {

  * {
    --block-image-size: 320px;

    --ver-cq-value: .5cqh;
    --hor-cq-value: .5cqw;
  }

  .block:not(.event-block) {
    margin-block-start: var(--v-sp-l);

    .item-group .divider {
      margin-block-start: 0;
    }
  
    .item {
      padding: var(--v-sp-xl) var(--h-sp-l);
    }
  
  }

  .block:is(.guestlist) .item {
    padding: var(--v-sp-s) var(--h-sp-s);
  }  
  
}

/* block layout types specific spacing starts -------------------------- */

.block:is(.stacked) {

  .layout-1 {
    .item > *:not(:first-child) {
      margin-block-start: var(--v-sp-m);
    }
  }

  .layout-2 {
    .item-group {
      gap: var(--h-sp-m);
    }
    .item {
      gap: var(--h-sp-m);
    }
  }

}

.block:is(.listing) {

  .items {
    gap: var(--h-sp-m);
  }

  .layout-1 {
    .item-group {
      gap: var(--h-sp-m);
    }
  }

  .layout-2 {
    .item-group {
      gap: var(--h-sp-m);
    }
  }

  .sponsor-logo {
    gap: var(--h-sp-xs);
  }
}

.block:is(.carousel) {

  .block-header, .block-body {
    padding: 0;
  }
  
  .layout-1 {
    
    .item-group {
      gap: var(--h-sp-xs);
      padding-block-end: var(--v-sp-s);
      padding-inline: var(--h-sp-l);
    }
    .item > *:not(:first-child) {
      margin-block-start: var(--v-sp-s);
    }
    .item {
      padding: var(--v-sp-s) var(--h-sp-s);
    }
  }

}

.block:is(.two-columns) {

  /* .layout-1 {} */

  .layout-2 {

    .item {
      gap: var(--h-sp-s);
    }

  }

}

@container (min-width: 600px) {

}

@container (min-width: 1024px) and (orientation: landscape) {

}

@container (min-width: 1280px) and (orientation: landscape) {

}

/* block image sizes starts --------------------------------- */

.image-container {
  width: var(--block-image-size);
}

.block-image {
  height: 100%;
  width: 100%;
}


.travel  {
  .image-container,
  .image-wrapper {
    --block-image-size: 100%;

    height: auto;
  }
}

.accommodation  {
  .image-container,
  .image-wrapper {
    --block-image-size: 300px;

    height: var(--block-image-size);
    overflow: clip;
    width: var(--block-image-size);
  }
}

.speaker  {
  .image-container,
  .image-wrapper {
    --block-image-size: 256px;

    border-radius: 100%;
    height: var(--block-image-size);

    overflow: clip;
  }
}

.sponsor-logo {

  .image-container{
    --block-image-size: auto;
  }

  .image-wrapper {
    --block-image-size: 120px;

    height: var(--block-image-size);
    width: var(--block-image-size);
  }

  .block-image {
    height: fit-content;
    width:100%;
  }

}

@container (min-width: 600px) {

}

@container (min-width: 1024px) and (orientation: landscape) {

}

@container (min-width: 1280px) and (orientation: landscape) {

  .travel  {
    .image-container,
    .image-wrapper {
      --block-image-size: 1024px;
    }
  }

  .accommodation  {
    .image-container,
    .image-wrapper {
      --block-image-size: min(360px, 18cqw);
    }
  }

  .speaker   {
    .image-container,
    .image-wrapper {
      --block-image-size: 400px;
    }
  }

  .sponsor-logo {
    .image-container,
    .image-wrapper {
      --block-image-size: 200px;
    }
  
  }
  
  
}

/* dividers & borders ------------------------------------ */

.divider {
  border: none;
  border-bottom: 1px solid var(--color-2);
  max-width: var(--block-element-max-width);
  width: calc(100% - var(--h-sp-l) * 2);
}

.item-group {
  .divider {
    border-color: var(--color-3);
  }
}

.event-details .divider {
  border: none;
  border-top: 1px solid var(--color-3);
  width: 100%;
}

.carousel .item {
  border: 1px solid var(--color-3);
}

/* container queries ------------------------------ */

@container (min-width: 600px) {

}

@container (min-width: 1024px) and (orientation: landscape) {

}

@container (min-width: 1280px) and (orientation: landscape) {

  .divider {
    width: 100%;
  }
  
}