/*
 * Section: Hero — production stylesheet.
 *
 * This is the file the theme actually enqueues. Keep in sync with the
 * SCSS source at the same path (`_hero.scss`) until a build pipeline is
 * wired up.
 *
 * Driver values come in as CSS custom properties set inline by the
 * partial — see template-parts/sections/hero.php.
 */

/*
 * Hero is rendered at body level (page-templates/template-homepage.php
 * closes GP's #page/#content wrappers around it), so width:100% means
 * full viewport.
 */
body main.azuri-home__main {
	display: block;
	margin: 0;
	max-width: none;
	padding: 0;
	width: 100%;
}

.azuri-hero {
	--azuri-hero-focal: center 30%;
	--azuri-hero-gradient-color: var(--azuri-color-navy);
	--azuri-hero-gradient-start: 15.11%;
	--azuri-hero-gradient-end: 92.31%;
	--azuri-hero-text-align: center;
	--azuri-hero-content-max: 760px;

	box-sizing: border-box;
	color: var(--azuri-color-white);
	display: block;
	isolation: isolate;
	margin: 0;
	max-width: 100%;
	min-height: auto;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.azuri-hero__image,
.azuri-hero img.azuri-hero__image {
	display: block;
	height: 100%;
	left: 0;
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: var(--azuri-hero-focal);
	   object-position: var(--azuri-hero-focal);
	position: static;
	top: 0;
	width: 100%;
	max-width: none;
	z-index: 0;
}

body.page-template-template-homepage,
body.azuri-template-homepage {
	overflow-x: hidden;
}

.azuri-hero--align-left   { --azuri-hero-text-align: left;   }
.azuri-hero--align-center { --azuri-hero-text-align: center; }
.azuri-hero--align-right  { --azuri-hero-text-align: right;  }

/*.azuri-hero__overlay {
	background: linear-gradient(
		180deg,
		rgba(10, 22, 51, 0) var(--azuri-hero-gradient-start),
		var(--azuri-hero-gradient-color) var(--azuri-hero-gradient-end)
	);
	bottom: 0;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}*/

.azuri-hero__inner {
	align-items: center;        /* vertical centring */
	display: flex;
	height: 100%;
	justify-content: center;     /* horizontal centring */
	margin: 0;
    min-height: auto;
    padding: 64px 0;
	position: relative;
	width: 100%;
	z-index: 2;
    background: linear-gradient(90deg, #11143F 20%, #073D42 100%);
}
.azuri-hero__inner .azuri-container {
    max-width: 1472px !important;
}
.azuri-hero__inner .azuri-hero__text {
    width: 100% !important;
    margin: 0;
    text-align: left;
    gap: 20px;
}
.azuri-hero__inner .equal-height {
	align-items: center;         /* row centred */
	justify-content: center;
}

.azuri-hero__inner .azuri_inner.azuri-hero__content {
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    flex-direction: row;   
    align-items: start;
}

.azuri-hero__content {
	color: var(--azuri-color-white);
	display: flex;
	flex-direction: column;
	gap: var(--azuri-space-6);
	margin: 0 auto;              /* keep centred regardless of width */
	text-align: center;          /* always centred per request */
	width: 100%;
}

.azuri-hero__text {
	display: flex;
	flex-direction: column;
	gap: var(--azuri-space-3);
}

.azuri-hero__eyebrow {
    color: #99D6DB;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.5px;
    margin: 0;
    text-transform: uppercase;
}

.azuri-hero__heading {
    color: var(--azuri-color-white);
    font-size: 60px;
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.08;
    margin: 0;
    display: flex;
    column-gap: 16px;
}

.azuri-hero__heading-line {
	display: block;
}

.azuri-hero__heading-line--italic {
    font-style: italic;
    text-transform: lowercase;
    color: #99D6DB;
}

.azuri-hero__subheading {
    color: #FFFFFF;
    font-size: 16px;
    line-height: 1.75;
    width: auto;
    margin: 0;
}

.azuri-hero__actions {
    display: flex;
    gap: var(--azuri-space-3);
    justify-content: flex-start;
    width: 100%;
}
.azuri-hero__inner .azuri-hero__text.right_ {
    max-width: 460px;
    gap: 35px;
}
/* On the dark hero overlay, cosmetic button renders as ghost/white outline */



.azuri-hero--align-center .azuri-hero__content { margin-left: auto; margin-right: auto; }
.azuri-hero--align-right  .azuri-hero__content { margin-left: auto; }

@media only screen and ( min-width:240px) and (max-width:1023px) {
	.azuri-hero {
        min-height: auto;
    }
    .azuri-hero__inner {
        padding: 40px 0 !important;
    }
    .azuri-hero__inner .azuri-hero__text {
        width: 100% !important;
        margin: 0 !important;    
        gap: 10px;
    }
    .azuri-hero__eyebrow,
    .azuri-hero__subheading,
    .azuri-hero__heading{
        text-align: left;
    }
    .azuri-hero__inner .azuri-booking-buttons {
        justify-content: flex-start !important;
        flex-direction: row;
        flex-wrap: nowrap;
    }
	.azuri-hero__actions {
        justify-content: flex-start !important;
    }
    .azuri-hero__inner .azuri_inner.azuri-hero__content,
    .azuri-hero__inner .azuri-hero__heading{
        flex-direction: column !important;
    }
    .azuri-hero__inner .azuri-hero__eyebrow {
        font-size: 10px;
    }
    .azuri-hero__inner .azuri-hero__heading {
        font-size: 42px !important;
        display: block !important;
    }
    .azuri-hero__subheading {
        font-size: 14px;
    }
    .azuri-hero__inner .azuri-hero__actions .azuri-btn {
        min-width: 134px !important;
        padding: 0 10px !important;
        width: 134px !important;
    }
    .azuri-hero__inner .azuri-hero__actions .azuri-btn--cosmetic {
        background-color: #d4789a !important;
        border: 0 !important;
    }
    .azuri-hero__image, .azuri-hero img.azuri-hero__image {
        height: 240px;
    }
}
@media only screen and ( min-width:375px) and (max-width:1023px) {
    .azuri-hero__inner .azuri-hero__actions .azuri-btn {
        min-width: 160px !important;
        padding: 0 20px !important;
        width: 160px !important;
    }

}
@media only screen and ( min-width:768px) and (max-width:1023px) {
    p.azuri-hero__eyebrow {
        font-size: 12px;
    }
    h1.azuri-hero__heading {
        font-size: 58px !important;
    }
    .azuri-hero__inner .azuri-hero__text {
        width: 480px !important;
        margin: 0 auto !important;
    }
    .azuri-hero__eyebrow, .azuri-hero__subheading, .azuri-hero__heading {
        text-align: center;
    }
    .azuri-hero__actions {
        justify-content: center !important;
    }
	.azuri-hero--align-center .azuri-hero__content {
		margin-left: auto !important;
		margin-right: auto !important;
	}
    .azuri-hero__image, .azuri-hero img.azuri-hero__image {
        height: 450px;
    }
}
@media only screen and ( min-width:1024px) and (max-width:1199px) {
    .azuri-hero__inner .azuri_inner.azuri-hero__content {
        max-width: 100%;
    }
    .azuri-hero__inner .azuri-hero__heading {
        display: block;
    }

}