/**
 * DS—DDD Tablet Styles
 * Styles for tablets and up (768px+)
 */

/*
——————————————————————————————————————————
CSS VARIABLES
——————————————————————————————————————————
*/

:root {

	
	/* Font sizes */
	--FS99: 5.00rem; 	/* 64px - used for big menu */

	/* Mix */
	--header-H: 	var(--S07);
}

/*
——————————————————————————————————————————
TYPOGRAPHY
——————————————————————————————————————————
*/

/* FONT SIZES & VARIANTS */
.main-navigation									{ font-size: var(--FS06); }
.big-navigation										{ font-size: var(--FS99); }

.caption 											{ font-size: var(--FS01); line-height: 1.00em; }
.flickity-fullscreen-button 						{ font-size: var(--FS01); line-height: 1.00em; }

/*
——————————————————————————————————————————
LAYOUT
——————————————————————————————————————————
*/

main 												{ margin: 0 0 50vh 0 ; }

/*
——————————————————————————————————————————
MAIN HEADER & NAV
——————————————————————————————————————————
*/

/* BIG MENU */
.big-navigation li									{ grid-column: span 4; }


/*
——————————————————————————————————————————
CONTENT
——————————————————————————————————————————
*/

/* HOME */
.entrance 											{ flex-direction: row; }


/* BLOCKS */
.block__col-left									{ grid-column: 1 / span 4; }
.block__col-left-cross								{ grid-column: 1 / span 4; grid-row: span 2; }
.block__col-right									{ grid-column: 6 / span 7; }
.block__col-right-top								{ grid-column: 6 / span 6; }
.block__col-single 									{ grid-column: 3 / span 8; }

.keywords-wrapper									{ justify-self: flex-start; }

/* UNITS */
.unit-layout 										{ width: 100%; height: auto; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--S04); }

.unit__gallery										{ width: 100%; height: auto; margin: 0; }

.unit__about 										{ width: 100%; height: auto; margin: 0; }
.unit__synopsis 									{ grid-column: 4 / span 6;  padding: var(--S08) 0 var(--S11) 0; }

.unit__info											{ width: 100%; height: auto; margin: 0; }
.unit__heading										{ width: 100%; height: auto; margin: 0; padding: var(--S01) 0; border-bottom: solid 1px var(--K01); background-color: var(--K00); }
.unit__plans .unit__heading 						{ position: sticky; top: 0; z-index: 1; }

.unit__specs 										{ grid-column: 1 / span 3; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--S04); position: sticky; top: 0; align-self: flex-start; }
.unit__datasheet 									{ width: 100%; height: auto; padding-top: var(--S01); display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--S00);  }
.unit__datasheet-label								{ grid-column: span 2; margin: 0; padding: 0; }
.unit__datasheet-value 								{ grid-column: span 3; margin: 0; padding: 0; }
.unit__facade										{ width: auto; height: var(--S06); }

.unit__plans										{ grid-column: 4 / span 9; display: flex; flex-direction: column; gap: var(--S06); }
.unit__plan 										{ width: 100%; height: auto; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--S04); }
.unit__floorplan									{ width: 100%; height: auto; margin: 0; padding: 0; position: relative; }
.unit__floorplan-image								{ width: 100%; height: auto; margin: 0; padding: 0; }
.unit__orientation									{ width: auto; height: var(--S05); position: absolute; top: 0; right: 0; }

.unit__disclaimer									{ width: 100%; height: auto; margin: 0; }
.unit__disclaimer-text								{ grid-column: 4 / span 9; padding: var(--S06) 0; }

/* COLOPHON */
.colophon__label 									{ grid-row: 1; grid-column: 1 / span 12; }
.colophon__list--1 									{ grid-row: 2; grid-column: 7 / span 6; }
.colophon__list--2 									{ grid-row: 2; grid-column: 1 / span 6; }

/*
——————————————————————————————————————————
FOOTER
——————————————————————————————————————————
*/

.site-footer 										{ height: 50vh; }
.site-footer__bottom 								{ gap: var(--S06); }

/* FOOTER NAVIGATION */
.footer-navigation > ul > li						{ grid-column: span 4; margin-top: 0; }

/* SITE INFO */
.site-info__copy									{ grid-row: 1; grid-column: span 4; }
.site-info__adrs									{ grid-row: 1; grid-column: span 8; }