/*
ooooo                                                        .   
`888'                                                      .o8   
 888          .oooo.   oooo    ooo  .ooooo.  oooo  oooo  .o888oo 
 888         `P  )88b   `88.  .8'  d88' `88b `888  `888    888   
 888          .oP"888    `88..8'   888   888  888   888    888   
 888       o d8(  888     `888'    888   888  888   888    888 . 
o888ooooood8 `Y888""8o     .8'     `Y8bod8P'  `V88V"V8P'   "888" 
                       .o..P'                                    
                       `Y8P'                                     
*/

/* General layout, everything that has to do with paddings, margins, flex and grid */

:root {
  --space: 1rem;
  --space-s: calc(0.5 * var(--space));
  --space-m: calc(1 * var(--space));
  --space-l: calc(2 * var(--space));
  --space-xl: calc(3 * var(--space));

  --site-header-height: 4rem;
  --page-header-height: 17rem;
}

body {
  display: grid;
  grid-template-rows: var(--site-header-height) auto min-content;
  grid-template-columns: 1fr;
  grid-template-areas: "site-header" "site-main" "site-footer";
  align-items: start;
  position: relative;
}

/*
ooooo   ooooo                           .o8                     
`888'   `888'                          "888                     
 888     888   .ooooo.   .oooo.    .oooo888   .ooooo.  oooo d8b 
 888ooooo888  d88' `88b `P  )88b  d88' `888  d88' `88b `888""8P 
 888     888  888ooo888  .oP"888  888   888  888ooo888  888     
 888     888  888    .o d8(  888  888   888  888    .o  888     
o888o   o888o `Y8bod8P' `Y888""8o `Y8bod88P" `Y8bod8P' d888b    
*/                                                              
                                                                
                                                                

.site-header {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 100;
  grid-area: site-header;
}


.site-header-wrapper {
  min-height: var(--site-header-height);
  padding: var(--space);
  display: grid;
  grid-template-columns: min-content auto;
  gap: var(--space-xl);
}

@media screen and (min-width: 800px) {
  .site-header-wrapper {
    grid-template-columns: min-content auto min-content;
  }
}

.header-navigation {
  justify-self: self-end;
}

.header-social {
  display: none;
}

@media screen and (min-width: 800px) {
  .header-social {
    display: flex;
    gap: var(--space);
  } 
}

.page-header {
  display: flex;
  align-items: flex-end;
  min-height: 17rem;
  padding: var(--space);
}

.page-template-default .page-header {
  display: block;
}

.page-template-default .page-section {
  padding: var(--space);
}

@media screen and (min-width: 800px) {
  .page-template-default .page-header {
    padding: var(--space-l);
  }
}

/*
ooo        ooooo            o8o              
`88.       .888'            `"'              
 888b     d'888   .oooo.   oooo  ooo. .oo.   
 8 Y88. .P  888  `P  )88b  `888  `888P"Y88b  
 8  `888'   888   .oP"888   888   888   888  
 8    Y     888  d8(  888   888   888   888  
o8o        o888o `Y888""8o o888o o888o o888o 
*/                                           
                                             

.site-main {
  display: grid;
  grid-template-columns: 1fr;
  grid-area: site-main;
}

@media screen and (min-width: 800px) {
  .site-main {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "header header" "gradient content";
  }
  
  .page-template-rent .site-main {
    grid-template-areas: "header header" "content content";
  }

  .page-header {
    grid-area: header;
  }

  .page-section-gradient {
    grid-area: gradient;
  }

  .page-section-content {
    grid-area: content;
  }
}

.page-template-dates .page-section-gradient,
.page-template-archive .page-section-gradient {
  height: calc(100vh - var(--page-header-height));
  position: relative;
}

@media screen and (min-width: 800px) {
  .page-section-gradient {
    height: auto;
  }
}


@media screen and (min-width: 800px) {
  .page-template-default .site-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}


@media screen and (min-width: 800px) {
  .page-template-dates .page-header,
	.page-template-archive .page-header {
    position: fixed;
    top: var(--site-header-height);
    right: 0;
    left: 0;
    z-index: -1;
  }

  .page-template-dates .site-main,
	.page-template-archive .site-main {
    position: relative;
    margin-top: var(--page-header-height);
  }
}


@media screen and (min-width: 1200px) {
  .dates-event {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

.event-meta {
  padding: var(--space-l);
}

.details-content picture, 
.details-content img {
  width: 100%;
}

.page-template-contact .site-main {
  grid-template-columns: 1fr;
  grid-template-areas: "header" "content";
}

.contact-form,
.block-type-form {
  margin: 0 auto;
  max-width: 44rem;
  padding: 8rem var(--space);
}

label,
input[type="text"],
input[type="email"],
textarea,
select {
  display: block;
  width: 100%;
}

.block-type-form form div,
.block-type-form form div label {
  margin-bottom: var(--space);
}

.block-type-form form div[data-has-error] input {
  outline: 2px solid red;
}

.block-type-form form div[data-has-error] span[data-error] {
  color: red;
  padding: var(--space);
  display: block;
}

.contact-form label,
ul.formblock__message__list {
  padding-left: var(--space);
  padding-right: var(--space);
  margin-bottom: var(--space-s);
}

.page-template-rent .page-header .page-subheading {
  display: none;
}

@media screen and (min-width: 800px) {
  .page-template-rent .page-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space);
  }

  .page-template-rent .page-header .page-subheading {
    display: block;
  }
}



/*
oooooooooooo                         .                      
`888'     `8                       .o8                      
 888          .ooooo.   .ooooo.  .o888oo  .ooooo.  oooo d8b 
 888oooo8    d88' `88b d88' `88b   888   d88' `88b `888""8P 
 888    "    888   888 888   888   888   888ooo888  888     
 888         888   888 888   888   888 . 888    .o  888     
o888o        `Y8bod8P' `Y8bod8P'   "888" `Y8bod8P' d888b    
*/                                                          
                                                            

.site-footer {
  display: grid;
  grid-template-rows: min-content min-content min-content;
  grid-template-areas: "newsletter" "social" "menu";
  grid-area: site-footer;
}

@media screen and (min-width: 800px) {
  .site-footer {
    grid-template-columns: auto auto;
    grid-template-rows: min-content min-content;
    grid-template-areas: "newsletter newsletter" "menu social";
  }
}

.site-footer > section {
  padding: var(--space);
}

.footer-newsletter {
  grid-area: newsletter;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

@media screen and (min-width: 800px) {
  .footer-newsletter {
    grid-area: newsletter;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
  } 
}

.footer-newsletter form div:nth-child(2) div,
.footer-newsletter form div:nth-child(2) div  div {
  display: flex;
  gap: var(--space);
  align-items: flex-start;
  flex-direction: column;
}

@media screen and (min-width: 800px) {
  .footer-newsletter form div:nth-child(2) div,
  .footer-newsletter form div:nth-child(2) div div {
    display: flex;
    gap: var(--space);
    align-items: center;
    flex-direction: row;
  }
}

.footer-newsletter form div:nth-child(2) div div label {
  width: fit-content;
  white-space: nowrap;
  flex: 0 0 auto;
}

@media screen and (min-width: 800px) and (max-width: 832px) {
  .footer-newsletter form div:nth-child(2) div div label {
    display: none;
  }
}

.footer-social {
  display: flex;
  gap: var(--space);
  margin-bottom: var(--space);
  grid-area: social;
}

.footer-menu {
  grid-area: menu;
}

.footer-menu > menu li {
  margin-bottom: var(--space);
}

.footer-menu > menu {
  min-height: 14rem;
}

@media screen and (min-width: 800px) {
  .footer-social {
    justify-self: end;
  }

  .footer-menu > menu {
    display: flex;
    gap: var(--space);
  }

  .footer-menu > menu li {
    margin-bottom: 0;
  }
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media screen and (min-width: 800px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }

  .column {
    grid-column: span var(--span);
  }
}

/* .column .blocks:first-of-type > .block-type-text,
.column .blocks:first-of-type > .block-type-heading {
  padding-top: var(--space);
}

.column .blocks:last-of-type > .block-type-text,
.column .blocks:first-of-type > .block-type-heading {
  padding-bottom: var(--space);
} */


.column .blocks {
  padding: var(--space);
}


@media screen and (min-width: 800px) {

  .column .blocks {
    padding: var(--space-xl);
  }
}

.column-span-12 .blocks:has(.block-type-image, .block-type-gallery) {
  padding: 0;
}

.block-type-gallery ul {
  padding: 0;
  margin: 0;
}


.swiper {
  width: 100%;
  height: auto;
  max-height: calc(100vh - var(--site-header-height));
}

.swiper-slide picture {
  /* height: calc(100vh - var(--site-header-height)); */
}

.swiper-slide picture img {
  /* width: auto; */
  height: calc(100vh - var(--site-header-height));
  object-fit: cover;
}

.page-hero,
.page-hero picture img {
  object-fit: cover;
  height: calc(100vh - var(--site-header-height));
}