:root {
  --event-block-max-width: none;
  --event-details-max-width: none;
  --event-block-padding: 24px;
  --event-inline-padding: 24px;

  --event-detail-w: 100%;
  --stage-h: auto;
  --stage-w: 100%;
  --media-wrapper-h: auto;
  --media-wrapper-w: 100%;
  --media-ar: 1/1;
  --media-h: auto;
  --media-w: 100%;

  --media-bg: green;
  --media-bg-image: none
  --order-stage: 0;
  --order-event-details: 1;
}

.event-block {
  margin-inline: auto;
  max-width: var( --event-block-max-width);
  min-height: var(--event-block-min-height);
}

/*  stage, media ------------------------------------ */

.stage {
  margin-inline: auto;
  order: var(--order-stage);
  padding-inline: var(--event-inline-padding);
  height: var(--stage-h);
  width: var(--stage-w);
}

.media-wrapper {
  height: var(--media-h);
  line-height: 0;
  position: relative;
  width: var(--media-wrapper-w);
}

.media {
  aspect-ratio: var(--media-ar);
  background-color: var(--media-bg);
  background-image: var(--media-bg-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  height: var(--media-h);
  position: relative;
  width: var(--media-w);
}

/*  media aspect ratios by shape ------------------------------------ */

.event-block:is(.square) {
  --media-ar: 1 / 1;
  --media-bg: none;
  --media-bg-image: url(../images/1-1.jpg);
}

.event-block:is(.landscape) {
  --media-ar: 4 / 3;
  --media-bg: none;
  --media-h: calc(var(--media-w) * 3 / 4);
  --media-bg-image: url(../images/4-3.jpg);

}

.event-block:is(.portrait, .tall) {
  /* --media-w: calc(var(--media-h) * var(--media-ar)); */
  --media-h: 50cqh;
  --media-w: auto;
}

.event-block:is(.portrait) {
  --media-ar: 5 / 7;
  --media-bg: none;
  --media-bg-image: url(../images/5-7.jpg);

}

.event-block:is(.tall) {
  --media-ar: 9 / 16;
  --media-bg: none;
  --media-bg-image: url(../images/9-16.jpg);
}


/*  event details ------------------------------------ */

.event-details {
  --event-details-min-width: var(--media-w);

  display: flex;
  flex-direction: column;
  max-width: var(--event-details-max-width);
  min-width: var(--event-details-min-width);
  order: var(--order-event-details);
  padding-inline: var(--event-inline-padding);
  width: var(--event-detail-w);
}

/*  event block by media size ------------------------------------ */


.small {

  .event-block:is(.square, .landscape) {
    --media-w: 252px;
  }

  .event-block:is(.tall, .portrait) {
    --media-h: 33cqh;
  }

}

.large {

  .event-block:is(.square, .landscape) {
    --media-w: 100%;
  }

  .event-block:is(.tall, .portrait) {
    --media-h: 50cqh;
  }

}


/* container queries for event-blocks --------------------------------------------------------------------------  */


@container (min-width: 600px) {

  .event-block {
    --event-block-padding: 56px;
    --event-inline-padding: 48px;
  }

  .small {

    .event-block:is(.square, .landscape) {
      --media-w: 30cqh;
    }
  
    .event-block:is(.tall, .portrait) {
      --media-h: 33cqh;
    }
  
  }
  
  .large {
  
    .event-block:is(.square, .landscape) {
      --media-w: min(60cqh, 100%);
    }
  
    .event-block:is(.tall, .portrait) {
      --media-h: 60cqh;
    }
  
  }
  

}

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

  .event-block {
    --stage-w: fit-content;
    --media-wrapper-w: fit-content;

    --event-inline-padding: 32px;
    --event-details-max-width: 600px;
    --event-block-min-height: calc(var(--media-h) + var(--header-h) * 2);

    .block-content {      
      /* align-items: center; */
      display: flex;
      justify-content: center;
    }

    .stage {
      --stage-h: 100%;

      margin-inline: 0;
      position: sticky;
      top: 0;
    }

  }

  .event-block:is(.left) {
    .block-content {
      --order-stage: 0;
      --order-event-details: 1;
    }
  }

  .event-block:is(.right) {
    .block-content {
      --order-stage: 1;
      --order-event-details: 0;
    }
  }

  .small {
    --event-block-max-width: none;

    .event-block {
      --event-block-min-height: calc(100cqh - var(--header-h) * 4);

      .block-content {
        align-items: flex-start;
      }
    }

    .event-block:is(.square, .landscape) {
      --media-w: 400px;
    }
  
    .event-block:is(.tall, .portrait) {
      --media-h: 448px;  
    }

  }

  .large {

    .event-block:is(.square, .landscape) {
      --media-w: calc(50cqw - var(--event-inline-padding) * 2);
    }
  
    .event-block:is(.tall, .portrait) {
      --media-h: max(512px, 100cqh - var(--header-h) * 3);
    }

  }

}

@container (min-width: 1024px) and (orientation: landscape)  {
/*   .event-details {
    display: grid;
    grid-template-rows: min-content;
    grid-template-columns: 1fr 1fr;
    height: fit-content;

    .event-title-wrapper {
      grid-column: 1 / -1;
      grid-row: 1 / 2;
    }

    .host-name {
      grid-column: 1 / -1;
      grid-row: 2 / 3;
    }

    .divider1 {
      grid-column: 1 / -1;
      grid-row: 3 / 4;
    }

    .event-date {
      grid-column: 1 / 2;
      grid-row: 4 / 5;
    }

    .event-address {
      grid-column: 2 / 3;
      grid-row: 4 / 5;
    }

    .divider2 {
      grid-column: 1 / -1;
      grid-row: 5 / 6;
    }

    .event-description {
      grid-column: 1 / -1;
      grid-row: 6 / 7;
    }

    .wrapper-date,
    .wrapper-location {
      height: '100%',
    }
  }

  .host-hide .event-details{
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;

    .event-title-wrapper {
      grid-column: 1 / -1;
      grid-row: 1 / 2;
    }

    .divider1 {
      grid-column: 1 / -1;
      grid-row: 2 / 3;
    }

    .event-date {
      grid-column: 1 / 2;
      grid-row: 3 / 4;
    }

    .event-address {
      grid-column: 2 / 3;
      grid-row: 3 / 4;
    }

    .divider2 {
      grid-column: 1 / -1;
      grid-row: 4 / 5;
    }

    .event-description {
      grid-column: 1 / -1;
      grid-row: 5 / 6;
    }

    .wrapper-date,
    .wrapper-location {
      height: '100%',
    }
  }

  .desc-hide .event-details{
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;

    .event-title-wrapper {
      grid-column: 1 / -1;
      grid-row: 1 / 2;
    }

    .host-name {
      grid-column: 1 / -1;
      grid-row: 2 / 3;
    }

    .divider1 {
      grid-column: 1 / -1;
      grid-row: 3 / 4;
    }

    .event-date {
      grid-column: 1 / 2;
      grid-row: 4 / 5;
    }

    .event-address {
      grid-column: 2 / 3;
      grid-row: 4 / 5;
    }

    .wrapper-date,
    .wrapper-location {
      height: '100%',
    }

    .divider2 {
      display: none;
    }
  }

  .host-hide.desc-hide .event-details{
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;

    .event-title-wrapper {
      grid-column: 1 / -1;
      grid-row: 1 / 2;
    }

    .divider1 {
      grid-column: 1 / -1;
      grid-row: 2 / 3;
    }

    .event-date {
      grid-column: 1 / 2;
      grid-row: 3 / 4;
    }

    .event-address {
      grid-column: 2 / 3;
      grid-row: 3 / 4;
    }

    .wrapper-date,
    .wrapper-location {
      height: '100%',
    }

    .divider2 {
      display: none;
    }
  }

  body:is(
    .address-hide,
    .date-hide,
    .address-hide.date-hide,
    .desc-hide.address-hide,
    .desc-hide.date-hide,
    .desc-hide.address-hide.date-hide,
    .host-hide.address-hide,
    .host-hide.date-hide,
    .host-hide.address-hide.date-hide,
    .host-hide.desc-hide.address-hide,
    .host-hide.desc-hide.date-hide,
    .host-hide.desc-hide.address-hide.date-hide
  ) .event-details {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .address-hide.date-hide .event-details{
    .divider1 {
      display: none;
    }
  }
 */
}


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

  .event-block {
    --event-block-padding: 48px;
    --event-inline-padding: 48px;
    --event-block-max-width: 1440px;
    --event-details-max-width: 720px;
  }

  .small {

    .event-block:is(.square, .landscape) {
      --media-w: 480px;
    }

    .event-block:is(.tall, .portrait) {
      --media-h: 512px;
    }
  
  }

  .large {

    .event-block:is(.square, .landscape) {
      --media-w: clamp(600px, 100cqh - var(--header-h) * 3.2, 640px);
    }
  
    .event-block:is(.tall, .portrait) {
      --media-h: max(600px, 100cqh - var(--header-h) * 3);
    }

  }
}

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

  .large {

    .event-block {
      --event-block-max-width: 1800px;
      --event-details-max-width: 900px;
    }

    .event-block:is(.square, .landscape) {
      --media-w: clamp(640px, 100cqh - var(--header-h) * 2.5, 800px);
    }
  
    .event-block:is(.tall, .portrait) {
      --media-h: max(720px, 100cqh - var(--header-h) * 3.5);
    }

  }

}

/*
@container (max-height: 48cqw) and (orientation: landscape)  {
   .event-block:is( .left, .right) {
    --media-padding: 48px;
    --stage-w: 50%;
    --event-detail-w: 50%;

    --image-side-h-p: min(50cqw - var(--media-padding), 100cqh - var(--header-h) - var(--media-padding));
    --image-side-hw-sq: min(50cqw - var(--media-padding) * 2, 100cqh - var(--header-h) - var(--media-padding) * 2);
    --media-wrapper-w: calc(100cqh - var(--header-h) - var(--media-padding));

  }

  .event-block:is(.landscape) {
    --media-h: auto;
    --media-w: min(100% - var(--media-padding));
  }
  .event-block:is(.narrow) {
    --media-h: var(--image-side-h-p);
    --media-w: auto;
  }
  .event-block:is(.portrait) {
    --media-h: var(--image-side-h-p);
    --media-w: auto;
  }
  .event-block:is(.square) {
    --media-w: var(--image-side-hw-sq);
    --media-h: var(--image-side-hw-sq);
  } 
}

*/

/* @container (min-aspect-ratio: 90/100) and (max-aspect-ratio: 100/85) and (min-width: 600px) {

  .event-block:is(.tall, .portrait) {
    --stage-w: 60%;
    --media-wrapper-h: var(--stage-side-h);
    --media-h: max(92cqh - var(--header-h) - var(--media-padding), 45cqw - var(--media-padding));
    --media-w: auto;
    --event-detail-w: 40%;
    --order-stage: 1;
    --order-event-details: 0;

    .block-content {      
      display: flex;
      justify-content: center;
    }

    .stage {
      --stage-h: 100%;

      margin-inline: 0;
      position: sticky;
      top: 0;
    }

  }

} */














/* layout for blocks -------------------------- */
.block:is(.stacked) {

  .item-wrapper:is(.layout-1) {
    .item {
      display: block;
    }
  }

  .item-wrapper:is(.layout-2) {

    .item-group {
      display: flex;
      flex-direction: column;
    }

    .item {
      display: flex;
      justify-content: center;
      flex-direction: column;
    }

  }

}

.block:is(.listing) {

  .items {
    display: flex;
    flex-direction: column;
  }

  .item-wrapper:is(.layout-1) {
    .item-group {
      align-items: center;
      display: flex;
      justify-content: center;
      flex-direction: column;
    }
  }

  .item-wrapper:is(.layout-2) {
    .item-group {
      display: grid;
    }
  }

}

.block:is(.sponsor) {

  .item {
    align-items: center;
    display: flex;
  }

  .sponsor-logo {
    display: flex;
    flex-direction: column;
  }

  .image-container,
  .image-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.block:is(.carousel) {
  .block-body {
    max-width: 1024px;
    overflow: auto clip;
  }
  
  .layout-1 {
    overflow: clip;

    .item-group {
      display: flex;
      overflow-y: auto;

      &::-webkit-scrollbar {
        display: none;
      }
    }
    
    .note {
      overflow: auto;

      span {
        display: -webkit-box;
        line-clamp: 3;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;  
        overflow: clip;
        min-height: 8ch;
      }

    }
  }
}

.block:is(.two-columns) {

  /* .layout-1 {} */

  .layout-2 {

    .item {
      display: flex;
      justify-content: center;
    }

  }

}

/* container queries for other blocks --------------------------------------------------------------------------  */
@container (min-width: 600px) {
  
  .block:is(.listing) {

    .items {
      display: flex;
      flex-direction: column;
    }
  
    .item-wrapper:is(.layout-1) {
      .item-group {
        display: flex;
        flex-direction: row;
        justify-content: center;
      }
    }
  
    .item-wrapper:is(.layout-2) {
      .item-group {
        display: grid;
      }
    }
  
  }
  
}

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

@container (min-width: 1280px) and (orientation: landscape) {
  .blocks {
    --block-element-max-width: 1024px;
  }

  .block:is(.carousel) {
    .block-body {
      max-width: none;
      overflow: auto clip;
    }
  
    .layout-1 {
      .item-group {
        display: flex;
      }
  
      .item {
        display: grid;
        flex-shrink: 0;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 32% 44% 24%;
        grid-column-gap: 16px;
        grid-row-gap: 0px;
        height: 56cqh;
        width: calc((100cqw - var(--block-image-size)) / 2 + 24px);
      }
        
      .image-container { 
        align-items: center;
        align-self: stretch;
        display: flex;
        grid-area: 1 / 1 / 4 / 2;
        height: 100%;
      }

      .location-wrapper { 
        align-self: center;
        grid-area: 1 / 2 / 2 / 3; 
      }

      .note { 
        grid-area: 2 / 2 / 3 / 3; 
        
        span {
          display: -webkit-box;
          line-clamp: 3;
          -webkit-line-clamp: 8;
          -webkit-box-orient: vertical;  
          max-height: 24ch;
          overflow: clip;
        }
      }

      .link-button { 
        grid-area: 3 / 2 / 4 / 3; 
      }
  
    }
    
  }

}

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

@container (max-height: 48cqw) and (orientation: landscape)  {

}

@container (min-aspect-ratio: 90/100) and (max-aspect-ratio: 100/85) and (min-width: 600px) {

}