/* ------------------------------------------------------------- */
/* ROOT */
/* ------------------------------------------------------------- */

:root {
--btn_video_size: 4.1rem;
--btn_video_size: clamp(4.1rem, 3.8662rem + 0.6494vw, 5.1rem);
--btn_video_icon_size: 1.6rem;
--btn_video_icon_size: clamp(1.6rem, 1.5065rem + 0.2597vw, 2rem);
}

/* ------------------------------------------------------------- */
/* HERO */
/* ------------------------------------------------------------- */

section.hero {
height: 100vh;
height: 100dvh;
min-height: 68.5rem;
max-height: 80rem;
}
section.hero .boxed {
flex-grow: 1;
align-items: stretch;
}

/* COL_SX */
section.hero .col_sx {
width: 50%;
width: clamp(53rem, 50%, 80rem);
}

/* LOGO */
section.hero .logo {
width: 10rem;
width: clamp(10rem, 8.8312rem + 3.2468vw, 15rem);
flex: 1 1 50%;
}
section.hero .logo figure, section.hero .logo img {
display: block;
width: 100%;
height: auto;
margin: 0;
}

/* TEXT */
section.hero .text { text-align: left; }

/* PAGE TITLE */
section.hero .page_title {
width: min-content;
}
section.hero .michelin_star {
width: 14rem;
width: clamp(14rem, 13.0649rem + 2.5974vw, 18rem);
margin-top: 1rem;
align-self: flex-end;
}
section.hero .michelin_star figure, section.hero .michelin_star img {
display: block;
width: 100%;
height: auto;
margin: 0;
}

/* COL_DX */
section.hero .col_dx { width: 50%; }
section.hero .col_dx:has(.atelier_menu) { align-self: center; }

/* ------------------------------------------------------------- */
/* ATELIER PHOTO  */
/* ------------------------------------------------------------- */

section.split_block.atelier_photo .boxed { display: flex; flex-direction: row-reverse; align-items: flex-start; }
section.split_block.atelier_photo .photo {
display: flex;
flex-direction: column;
align-items: flex-end;
flex: 0 1 auto;
}

/* ONE */
section.split_block.atelier_photo .photo .one { width: 81.25%; }
section.split_block.atelier_photo .photo .one figure {
position: relative;
width: 100%;
height: 0;
padding-top: var(--staggered_h_photo_pad_top);
}
section.split_block.atelier_photo .photo .one figure img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
@supports (aspect-ratio: 1 / 1) {
section.split_block.atelier_photo .photo .one figure { height: auto; aspect-ratio: var(--staggered_h_photo_aspect_ratio); padding-top: 0!important; }
section.split_block.atelier_photo .photo .one figure img { position: relative; }
}

/* TWO */
section.split_block.atelier_photo .two {
display: flex;
gap: var(--main_gap);
flex: 0 1 auto;
align-items: flex-start;
}
section.split_block.atelier_photo .two figure {
position: relative;
width: 100%;
height: 0;
flex: 0 1 auto;
}
section.split_block.atelier_photo .two img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
section.split_block.atelier_photo .two figure:nth-child(1) { padding-top: var(--image_pair_v_photo_pad_top); }
section.split_block.atelier_photo .two figure:nth-child(2) { padding-top: var(--image_pair_s_photo_pad_top); }
@supports (aspect-ratio: 1 / 1) {    
section.split_block.atelier_photo .two figure { height: auto; aspect-ratio: var(--aspect_ratio); padding-top: 0!important; }
section.split_block.atelier_photo .two img { position: relative; }
section.split_block.atelier_photo .two figure:nth-child(1) { --aspect_ratio: var(--image_pair_v_photo_aspect_ratio); }
section.split_block.atelier_photo .two figure:nth-child(2) { --aspect_ratio: var(--image_pair_s_photo_aspect_ratio); }
}

/* ------------------------------------------------------------- */
/* ATELIER VIDEO  */
/* ------------------------------------------------------------- */

section.split_block.atelier_video {}
section.split_block.atelier_video .video { padding-left: var(--space_x_out); padding-right: var(--space_x_out); }
section.split_block.atelier_video .video figure {
width: 100%;
max-width: 360px;
margin: 0 auto;
}
section.split_block.atelier_video .video figure video {
display: block;
width: 100%;
height: auto;
}

/* VIDEO CONTROLS */
section.split_block.atelier_video .video_controls {
display: flex;
flex-direction: row;
justify-content: center;
gap: 1rem;
margin-top: 2rem;
}
section.split_block.atelier_video .video_controls .control_group {
position: relative;
display: block;
width: var(--btn_video_size);
height: var(--btn_video_size);
}
section.split_block.atelier_video .video_controls .control_group button {
position: absolute;
top: 0;
left: 0;
display: block;
width: var(--btn_video_size);
height: auto;
background: none;
border: 0;
border-radius: 50%;
cursor: pointer;
}
section.split_block.atelier_video .video_controls .control_group button.hidden { display: none; }
section.split_block.atelier_video .video_controls .control_group button .icon {
position: relative;
display: block;
width: var(--btn_video_size);
height: var(--btn_video_size);
border-radius: 50%;
border: 0.1rem solid var(--color_black);
background-color: transparent;
transition: background-color 0.5s;
}
section.split_block.atelier_video .video_controls .control_group button:active .icon, section.split_block.atelier_video .video_controls .control_group button:hover .icon, section.split_block.atelier_video .video_controls .control_group button:focus .icon, section.split_block.atelier_video .video_controls .control_group button:focus-visible .icon { background-color: var(--color_black); }
section.split_block.atelier_video .video_controls .control_group button .icon svg {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: var(--btn_video_icon_size);;
height: var(--btn_video_icon_size);;
fill: var(--color_black);
transform: translate(-50%, -50%);
transition: fill 0.5s;
}
section.split_block.atelier_video .video_controls .control_group button.btnPlay .icon svg { transform: translate(-40%, -50%); }
section.split_block.atelier_video .video_controls .control_group button:active .icon svg, section.split_block.atelier_video .video_controls .control_group button:hover .icon svg, section.split_block.atelier_video .video_controls .control_group button:focus .icon svg, section.split_block.atelier_video .video_controls .control_group button:focus-visible .icon svg { fill: var(--color_cream_dark); }

/*
// Modifica lo stile globale dei sottotitoli
video::cue {
  background-color: rgba(0, 0, 0, 0.75); 
  color: #ffffff;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 18px;
  padding: 4px 8px;
  border-radius: 4px;
}

// Puoi persino cambiare stile a parti specifiche se usi i tag nel file .vtt (es. il grassetto)
video::cue(b) {
  color: #ffcc00; /* Testo giallo per le parole in grassetto 
}
*/


/* ------------------------------------------------------------- */
/* RESPONSIVE */
/* ------------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {
	
}

@media screen and (orientation: landscape) {
    
}

@media screen and (orientation: portrait) {
  
}

@media only screen and (max-width: 1699px) {
	
}

@media only screen and (max-width: 1599px) {
	
	
}

@media only screen and (max-width: 1439px) {
	
}

@media only screen and (max-width: 1365px) {
    
}

@media only screen and (max-width: 1279px) {
	
	
}

@media only screen and (max-width: 1199px) {
	
}

@media only screen and (max-width: 1111px) {
		
	
}

@media only screen and (max-width: 1024px) {


}

@media only screen and (max-width: 1023px) {
    
    /* HERO */
    section.hero { height: auto; min-height: 0; max-height: none; }
    section.hero .boxed {
    flex-direction: column;
    row-gap: 5rem;
    row-gap: clamp(5rem, 3.3735rem + 4.5181vw, 8rem);
    }
    section.hero .col_sx {
    width: 100%;
    align-items: center;
    row-gap: 5rem;
    row-gap: clamp(5rem, 3.3735rem + 4.5181vw, 8rem);
    }
    section.hero .col_dx {
    width: 100%;
    }
    
    /* ATELIER PHOTO */
    section.split_block.atelier_photo .boxed { flex-direction: column; align-items: flex-start; gap: var(--main_gap); }
    section.split_block.atelier_photo .photo { align-items: flex-start; }
    
    /* ATELIER VIDEO */
    section.split_block.atelier_video .video { padding-left: 0; padding-right: 0; }
	
}

@media only screen and (max-width: 833px) {
	
}

@media only screen and (max-width: 767px) {
	
}

@media only screen and (max-width: 735px) {
	
}

@media only screen and (max-width: 666px) {
    
	
}
	

@media only screen and (max-width: 599px) {
	
}

@media only screen and (max-width: 567px) {
    
	
}

@media only screen and (max-width: 479px) {
	
}

@media only screen and (max-width: 413px) {
		
	
}

@media only screen and (max-width: 374px) {
	
	
}


@media only screen and (max-width: 359px) {
	
}