/* ============================================================
   INVOLVED HOLIDAYS — /destinations/
   seventy9-child/blocks/css/destinations.css
   Paired with seventy9-child/pages/destinations.php

   Tokens live on the page wrapper, never :root, so the palette
   and type scale can't leak sitewide. Everything is prefixed.
   ============================================================ */

.ihh-destinations{
	--ihd-navy:#0a2f5c;
	--ihd-navy-deep:#0d2d50;
	--ihd-heading-blue:#0d478a;
	--ihd-blue-btn:#2f6cb5;
	--ihd-blue-btn-dark:#255a99;
	--ihd-gold:#c69a3f;
	--ihd-ink:#1c2b3a;
	--ihd-muted:#646a72;
}

/* ============================================================
   HERO — full-bleed photo, navy wash from the left
   ============================================================ */

.ihh-destinations .ihh-hero{
	position:relative;
	display:flex;
	align-items:center;
	width:100%;
	min-height:clamp(420px, 34vw, 620px);
	background:var(--ihd-navy-deep);
	overflow:hidden;
	isolation:isolate;
}

.ihh-destinations .ihh-hero__figure{
	position:absolute;
	inset:0;
	z-index:0;
	margin:0;
	padding:0;
	overflow:hidden;
}
.ihh-destinations .ihh-hero__img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center center;
	display:block;
	transform:scale(1.03);
	animation:ihh-hero-drift 22s ease-out forwards;
}

.ihh-destinations .ihh-hero__scrim{
	position:absolute;
	inset:0;
	z-index:1;
	pointer-events:none;
	background:
		linear-gradient(180deg, rgba(9,28,50,.30) 0%, rgba(9,28,50,.14) 40%, rgba(9,28,50,.34) 100%),
		linear-gradient(180deg, rgba(13,45,80,.88) 0%, rgba(13,45,80,.80) 100%);
}
@media (min-width:768px){
	.ihh-destinations .ihh-hero__scrim{
		background:
			linear-gradient(180deg, rgba(9,28,50,.30) 0%, rgba(9,28,50,.10) 45%, rgba(9,28,50,.36) 100%),
			linear-gradient(90deg, rgba(13,45,80,.92) 0%, rgba(13,45,80,.78) 26%, rgba(13,45,80,.42) 48%, rgba(13,45,80,.12) 68%, rgba(13,45,80,0) 86%);
	}
}

.ihh-destinations .ihh-hero__inner{
	position:relative;
	z-index:2;
	width:100%;
	max-width:1560px;
	margin:0 auto;
	padding:clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 6vw, 5.5rem);
	text-align:left;
}
.ihh-destinations .ihh-hero__copy{ max-width:600px; }

.ihh-destinations .ihh-hero__eyebrow{
	font-family:Lato, sans-serif;
	font-size:.8rem;
	font-weight:700;
	letter-spacing:.2em;
	text-transform:uppercase;
	color:var(--ihd-gold) !important;
	margin:0 0 1.15rem;
	opacity:0; transform:translateY(14px);
	animation:ihh-fade-up .8s ease forwards .1s;
}

.ihh-destinations .ihh-hero__title{
	font-family:Lato, sans-serif;
	color:#fff !important;
	font-size:clamp(2rem, 4.2vw, 3.5rem);
	font-weight:700;
	line-height:1.1;
	letter-spacing:.06em;
	text-transform:uppercase;
	margin:0 0 1.25rem;
	padding:0;
	opacity:0; transform:translateY(16px);
	animation:ihh-fade-up .9s ease forwards .2s;
}
.ihh-destinations .ihh-hero__dot{
	color:var(--ihd-gold) !important;
	margin:0 .22em;
	display:inline-block;
}

.ihh-destinations .ihh-hero__lede{
	font-family:Lato, sans-serif;
	max-width:520px;
	font-size:clamp(1rem, 1.35vw, 1.15rem);
	line-height:1.6;
	color:rgba(255,255,255,.92) !important;
	margin:0 0 2.1rem;
	opacity:0; transform:translateY(16px);
	animation:ihh-fade-up .9s ease forwards .35s;
}

.ihh-destinations .ihh-hero__actions{
	display:flex;
	flex-wrap:wrap;
	gap:.85rem;
	opacity:0; transform:translateY(16px);
	animation:ihh-fade-up .9s ease forwards .45s;
}
.ihh-destinations .ihh-hero__btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-family:Lato, sans-serif;
	font-size:1rem;
	font-weight:700;
	letter-spacing:.01em;
	text-decoration:none !important;
	padding:.9rem 2rem;
	border-radius:999px;
	border:1.5px solid transparent;
	transition:background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.ihh-destinations .ihh-hero__btn:focus-visible{
	outline:3px solid #fff;
	outline-offset:3px;
}
.ihh-destinations .ihh-hero__btn--primary{
	background:var(--ihd-blue-btn);
	color:#fff !important;
}
.ihh-destinations .ihh-hero__btn--primary:hover{
	background:var(--ihd-blue-btn-dark);
	color:#fff !important;
	transform:translateY(-2px);
}
.ihh-destinations .ihh-hero__btn--ghost{
	background:transparent;
	border-color:rgba(255,255,255,.85);
	color:#fff !important;
}
.ihh-destinations .ihh-hero__btn--ghost:hover{
	background:#fff;
	border-color:#fff;
	color:var(--ihd-navy) !important;
	transform:translateY(-2px);
}

@keyframes ihh-fade-up{ to{ opacity:1; transform:translateY(0); } }
@keyframes ihh-hero-drift{ from{ transform:scale(1.03); } to{ transform:scale(1.09); } }

/* ============================================================
   CHOOSE YOUR ADVENTURE — intro row, then the shortcode grid
   ============================================================ */

.ihh-destinations .ihh-picks{
	background:#fff;
	padding:clamp(3.25rem, 6vw, 5rem) 1.25rem clamp(3.5rem, 6vw, 5rem);
	scroll-margin-top:90px;
}
.ihh-destinations .ihh-picks__inner{
	width:100%;
	max-width:1320px;
	margin:0 auto;
}

.ihh-destinations .ihh-intro{
	display:grid;
	grid-template-columns:1fr;
	gap:clamp(2rem, 4vw, 3.5rem);
	align-items:center;
	margin:0 0 clamp(2.75rem, 5vw, 4rem);
}
@media (min-width:992px){
	.ihh-destinations .ihh-intro{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); }
}

.ihh-destinations .ihh-intro__content{ max-width:620px; }
.ihh-destinations .ihh-intro__rule{
	width:44px; height:3px;
	background:var(--ihd-gold);
	border-radius:2px;
	margin:0 0 1rem;
}
.ihh-destinations .ihh-intro__title{
	font-family:Lato, sans-serif;
	font-weight:700;
	font-size:clamp(1.7rem, 4vw, 2.2rem);
	line-height:1.2;
	color:var(--ihd-heading-blue) !important;
	margin:0 0 1rem;
	padding:0;
}
.ihh-destinations .ihh-intro__text{
	font-family:Lato, sans-serif;
	font-size:1rem;
	line-height:1.75;
	color:var(--ihd-muted);
	margin:0;
}

.ihh-destinations .ihh-ticks{
	all:unset;
	display:flex;
	flex-direction:column;
	gap:.7rem;
	margin-top:1.75rem;
}
.ihh-destinations .ihh-tick{
	all:unset;
	display:flex;
	align-items:flex-start;
	gap:.7rem;
	font-family:Lato, sans-serif;
	font-size:.98rem;
	line-height:1.5;
	font-weight:600;
	color:var(--ihd-ink);
}
.ihh-destinations .ihh-tick__icon{
	flex:0 0 auto;
	width:22px; height:22px;
	margin-top:1px;
	border-radius:50%;
	background:rgba(198,154,63,.14);
	display:inline-flex;
	align-items:center;
	justify-content:center;
}
.ihh-destinations .ihh-tick__icon svg{
	width:13px; height:13px;
	fill:var(--ihd-gold);
}

.ihh-destinations .ihh-intro__media{
	position:relative;
	margin:0;
	padding:0;
	border-radius:22px;
	overflow:hidden;
	aspect-ratio:4 / 3;
	background:rgb(190,198,206);
	box-shadow:0 22px 48px rgba(12,30,52,.14);
}
@media (min-width:992px){
	.ihh-destinations .ihh-intro__media{ aspect-ratio:5 / 4; }
}
.ihh-destinations .ihh-intro__media img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transform:scale(1);
	transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.ihh-destinations .ihh-intro__media:hover img{ transform:scale(1.06); }

/* ============================================================
   [ihd_destinations] SHORTCODE OUTPUT
   Unchanged from the live page — the cards already look right.
   ============================================================ */

.ihh-destinations .ihd-destinations-grid{
	all:unset;
	display:grid;
	grid-template-columns:repeat(1, 1fr);
	gap:1.75rem;
	width:100%;
}
@media (min-width:576px){ .ihh-destinations .ihd-destinations-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:992px){ .ihh-destinations .ihd-destinations-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (min-width:1400px){ .ihh-destinations .ihd-destinations-grid{ grid-template-columns:repeat(4, 1fr); } }

.ihh-destinations .ihd-card{
	all:unset;
	position:relative;
	display:block;
	width:100%;
	aspect-ratio:9 / 10;
	border-radius:22px;
	overflow:hidden;
	cursor:pointer;
	text-decoration:none;
	color:inherit;
}
.ihh-destinations .ihd-card-bg{
	position:absolute;
	inset:0;
	background:rgb(190,198,206);
	overflow:hidden;
}
.ihh-destinations .ihd-card-bg img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transform:scale(1);
	transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.ihh-destinations .ihd-card:hover .ihd-card-bg img{
	transform:scale(1.1);
}
.ihh-destinations .ihd-card-overlay{
	position:absolute;
	inset:0;
	background:linear-gradient(180deg, rgba(8,16,26,0) 45%, rgba(8,16,26,.7) 100%);
	transition:background .4s ease;
}
.ihh-destinations .ihd-card:hover .ihd-card-overlay{
	background:linear-gradient(180deg, rgba(8,16,26,.05) 0%, rgba(8,16,26,.85) 100%);
}
.ihh-destinations .ihd-card-label{
	position:absolute;
	left:20px; right:20px; bottom:18px;
	z-index:1;
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.ihh-destinations .ihd-card-name{
	font-family:Lato, sans-serif;
	font-weight:800;
	font-size:1.05rem;
	letter-spacing:.03em;
	text-transform:uppercase;
	color:#fff;
}
.ihh-destinations .ihd-card-arrow{
	width:28px; height:28px;
	border-radius:50%;
	background:rgba(255,255,255,.16);
	border:1px solid rgba(255,255,255,.4);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:13px;
	opacity:0;
	transform:translateX(-6px);
	transition:opacity .35s ease, transform .35s ease, background .2s ease;
}
.ihh-destinations .ihd-card:hover .ihd-card-arrow{
	opacity:1;
	transform:translateX(0);
}

/* ============================================================
   SMALL SCREENS + MOTION
   ============================================================ */

@media (max-width:575.98px){
	.ihh-destinations .ihh-hero{ min-height:clamp(400px, 82vh, 520px); }
	.ihh-destinations .ihh-hero__btn{ width:100%; }
	.ihh-destinations .ihh-hero__actions{ width:100%; max-width:320px; }
}

@media (prefers-reduced-motion: reduce){
	.ihh-destinations .ihh-hero__eyebrow,
	.ihh-destinations .ihh-hero__title,
	.ihh-destinations .ihh-hero__lede,
	.ihh-destinations .ihh-hero__actions{ animation:none; opacity:1; transform:none; }
	.ihh-destinations .ihh-hero__img{ animation:none; transform:scale(1); }
	.ihh-destinations .ihh-hero__btn:hover{ transform:none; }
	.ihh-destinations .ihh-intro__media:hover img{ transform:none; }
}
