/*
 * TDMC Hotel SEO
 *
 * Breakpoints follow the Webnus theme: 960 is the small-viewport boundary,
 * not 767. Using 767 leaves 768-960 unstyled, which is where this theme breaks.
 *
 * The theme's #header is position:absolute and floats over the top of the page.
 * The hero is full-bleed and deliberately runs underneath it, with enough top
 * padding that the heading clears the nav - that turns the overlap into the
 * design instead of a collision.
 */

.tdmc-hseo {
	--tdmc-ink: #1b2430;
	--tdmc-body: #3a444f;
	--tdmc-muted: #6b7682;
	--tdmc-line: #e2e6ea;
	--tdmc-bg: #f6f8f9;
	--tdmc-brand: #16b4e0;
	--tdmc-brand-dark: #0f8fb4;
	--tdmc-star: #f0a202;
	--tdmc-radius: 12px;

	color: var(--tdmc-body);
	font-size: 16px;
	line-height: 1.7;
}

.tdmc-hseo *,
.tdmc-hseo *::before,
.tdmc-hseo *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------- hero */

.tdmc-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background: #16202b;
	display: flex;
	align-items: flex-end;
	min-height: 300px;
	overflow: hidden;
}

.tdmc-hero__media { position: absolute; inset: 0; }

.tdmc-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tdmc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12,20,28,.72) 0%, rgba(12,20,28,.30) 34%, rgba(12,20,28,.86) 100%);
}

/* No photo: a flat brand panel rather than an empty box. */
.tdmc-hero:not(.tdmc-hero--image)::after {
	background: linear-gradient(135deg, #16202b 0%, #1d3murky 100%);
	background: linear-gradient(135deg, #16202b 0%, #204053 100%);
}

.tdmc-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	/* clears the floating header */
	padding: 118px 1.15rem 1.9rem;
	color: #fff;
}

.tdmc-hero__crumbs {
	font-size: .82rem;
	line-height: 1.6;
	color: rgba(255,255,255,.78);
	margin-bottom: .7rem;
}

.tdmc-hero__crumbs a,
.tdmc-hero__crumbs a:visited { color: rgba(255,255,255,.78); text-decoration: none; }
.tdmc-hero__crumbs a:hover,
.tdmc-hero__crumbs a:focus { color: #fff; text-decoration: underline; }
.tdmc-hero__sep { margin: 0 .4rem; opacity: .55; }
.tdmc-hero__crumbs span[aria-current] { color: #fff; }

.tdmc-hero__title {
	margin: 0 0 .5rem;
	color: #fff;
	font-size: 1.85rem;
	line-height: 1.18;
	letter-spacing: -.01em;
	text-shadow: 0 1px 18px rgba(0,0,0,.35);
}

.tdmc-hero__meta,
.tdmc-hero__lede {
	margin: 0;
	color: rgba(255,255,255,.92);
	font-size: .98rem;
	line-height: 1.6;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem .75rem;
}

.tdmc-hero__lede { max-width: 42rem; display: block; }
.tdmc-hero__addr { color: rgba(255,255,255,.9); }

.tdmc-stars { color: #ffc23d; letter-spacing: .08em; white-space: nowrap; }

@media only screen and (min-width: 768px) {
	.tdmc-hero { min-height: 380px; }
	.tdmc-hero__inner { padding: 150px 1.5rem 2.4rem; }
	.tdmc-hero__title { font-size: 2.5rem; }
}

@media only screen and (min-width: 961px) {
	.tdmc-hero { min-height: 440px; }
	.tdmc-hero__inner { padding: 175px 1.5rem 2.9rem; }
	.tdmc-hero__title { font-size: 3rem; }
	.tdmc-hero__meta { font-size: 1.05rem; }
}

/* ------------------------------------------------------------------ layout */

.tdmc-hseo__wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 2rem 1.15rem 1rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
}

.tdmc-hseo__wrap--full { display: block; }

@media only screen and (min-width: 961px) {
	.tdmc-hseo__wrap {
		grid-template-columns: minmax(0, 1fr) 330px;
		gap: 3rem;
		padding: 2.75rem 1.5rem 1rem;
	}
	.tdmc-hseo__wrap--full { display: block; }
	.tdmc-hseo__side { position: sticky; top: 2rem; }
}

.tdmc-sec { margin: 0 0 2.5rem; }
.tdmc-prose { max-width: 46rem; }

.tdmc-hseo h2 {
	margin: 2rem 0 .7rem;
	color: var(--tdmc-ink);
	font-size: 1.45rem;
	line-height: 1.3;
	letter-spacing: -.005em;
}

.tdmc-sec > h2:first-child { margin-top: 0; }

.tdmc-hseo h3 {
	margin: 0 0 .45rem;
	color: var(--tdmc-ink);
	font-size: 1rem;
	line-height: 1.35;
}

.tdmc-hseo p { margin: 0 0 1rem; }

.tdmc-lede {
	font-size: 1.12rem;
	line-height: 1.72;
	color: var(--tdmc-ink);
}

.tdmc-link,
.tdmc-link:visited { color: var(--tdmc-brand-dark); font-weight: 600; text-decoration: none; }
.tdmc-link:hover,
.tdmc-link:focus { color: var(--tdmc-brand-dark); text-decoration: underline; }

/* --------------------------------------------------------------- at a glance */

.tdmc-facts__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	padding: 1.4rem;
	background: var(--tdmc-bg);
	border: 1px solid var(--tdmc-line);
	border-radius: var(--tdmc-radius);
}

@media only screen and (min-width: 768px) {
	.tdmc-facts__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; }
}

.tdmc-facts__col ul { margin: 0; padding-left: 1.1rem; }
.tdmc-facts__col li { margin-bottom: .35rem; font-size: .94rem; line-height: 1.6; }

/* ------------------------------------------------------------------ gallery */

.tdmc-gallery,
.tdmc-grid {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media only screen and (min-width: 480px) {
	.tdmc-gallery, .tdmc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media only screen and (min-width: 768px) {
	.tdmc-gallery { grid-template-columns: repeat(3, 1fr); }
	.tdmc-grid    { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

@media only screen and (min-width: 961px) {
	.tdmc-grid--wide { grid-template-columns: repeat(4, 1fr); }
}

.tdmc-gallery li {
	margin: 0;
	border-radius: var(--tdmc-radius);
	overflow: hidden;
	background: #eceff1;
}

.tdmc-gallery img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .4s ease;
}

@media (hover: hover) {
	.tdmc-gallery li:hover img { transform: scale(1.045); }
}

@media (prefers-reduced-motion: reduce) {
	.tdmc-gallery img { transition: none; }
	.tdmc-gallery li:hover img { transform: none; }
}

/* -------------------------------------------------------------------- cards */

.tdmc-card {
	background: #fff;
	border: 1px solid var(--tdmc-line);
	border-radius: var(--tdmc-radius);
	overflow: hidden;
}

.tdmc-card--hotel { margin: 0; transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; }

.tdmc-card--hotel > a,
.tdmc-card--hotel > a:visited,
.tdmc-card__static {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.tdmc-card__media { display: block; background: #eceff1; }

.tdmc-card__media img,
.tdmc-card__noimg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.tdmc-card__noimg { background: linear-gradient(135deg, #e3e6ea, #f2f4f6); }

.tdmc-card__body {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	padding: .85rem .95rem 1rem;
}

.tdmc-card__name {
	font-weight: 600;
	line-height: 1.35;
	color: var(--tdmc-ink);
	font-size: .98rem;
}

.tdmc-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem .6rem;
	font-size: .85rem;
	color: var(--tdmc-muted);
}

.tdmc-card__more { color: var(--tdmc-brand-dark); font-weight: 600; }

@media (hover: hover) {
	.tdmc-card--hotel:hover {
		border-color: var(--tdmc-brand);
		box-shadow: 0 6px 22px rgba(22,40,56,.10);
		transform: translateY(-2px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tdmc-card--hotel { transition: none; }
	.tdmc-card--hotel:hover { transform: none; }
}

.tdmc-card--dest > a { padding: 1.25rem; }

/* --------------------------------------------------------------- sidebar */

.tdmc-card--facts,
.tdmc-card--cta { padding: 1.25rem 1.35rem 1.4rem; margin-bottom: 1.25rem; }

.tdmc-card--facts h2,
.tdmc-card--cta h2 { margin: 0 0 .8rem; font-size: 1.12rem; }

.tdmc-card--facts dl { margin: 0; }

.tdmc-card--facts dl > div {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: .75rem;
	padding: .5rem 0;
	border-bottom: 1px solid var(--tdmc-line);
	align-items: baseline;
}

.tdmc-card--facts dl > div:last-child { border-bottom: 0; }

.tdmc-card--facts dt {
	font-size: .74rem;
	font-weight: 600;
	color: var(--tdmc-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
}

.tdmc-card--facts dd { margin: 0; color: var(--tdmc-ink); font-size: .94rem; line-height: 1.5; }

.tdmc-card--cta { background: var(--tdmc-bg); border-left: 4px solid var(--tdmc-brand); }
.tdmc-card--cta p { font-size: .94rem; }
.tdmc-card--wide { max-width: 46rem; }

.tdmc-btn,
.tdmc-btn:visited {
	display: inline-block;
	padding: .65rem 1.3rem;
	background: var(--tdmc-brand);
	color: #fff;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	font-size: .95rem;
	transition: background .18s ease;
}

.tdmc-btn:hover,
.tdmc-btn:focus,
.tdmc-btn:active { background: var(--tdmc-brand-dark); color: #fff; }

/* --------------------------------------------------------------- filters */

.tdmc-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }

.tdmc-chip,
.tdmc-chip:visited {
	display: inline-block;
	padding: .42rem 1rem;
	border: 1px solid var(--tdmc-line);
	border-radius: 999px;
	background: #fff;
	color: var(--tdmc-body);
	text-decoration: none;
	font-size: .88rem;
	font-weight: 500;
	transition: border-color .15s ease, background .15s ease;
}

.tdmc-chip:hover,
.tdmc-chip:focus { border-color: var(--tdmc-brand); color: var(--tdmc-brand-dark); }
.tdmc-chip.is-on { background: var(--tdmc-ink); border-color: var(--tdmc-ink); color: #fff; }

/* ------------------------------------------------------------- pagination */

.tdmc-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	margin: 2rem 0 0;
	flex-wrap: wrap;
}

.tdmc-pager__link,
.tdmc-pager__link:visited {
	padding: .55rem 1.1rem;
	border: 1px solid var(--tdmc-line);
	border-radius: 6px;
	text-decoration: none;
	color: var(--tdmc-ink);
	font-weight: 600;
	font-size: .92rem;
}

.tdmc-pager__link:hover,
.tdmc-pager__link:focus { border-color: var(--tdmc-brand); color: var(--tdmc-brand-dark); }
.tdmc-pager__count { color: var(--tdmc-muted); font-size: .9rem; }

/* -------------------------------------------------------------------- FAQ */

.tdmc-faq__item {
	border: 1px solid var(--tdmc-line);
	border-radius: 10px;
	margin-bottom: .6rem;
	background: #fff;
	overflow: hidden;
}

.tdmc-faq__item summary {
	cursor: pointer;
	padding: .9rem 1.1rem;
	font-weight: 600;
	color: var(--tdmc-ink);
	list-style: none;
	position: relative;
	padding-right: 2.6rem;
	line-height: 1.5;
}

.tdmc-faq__item summary::-webkit-details-marker { display: none; }

.tdmc-faq__item summary::after {
	content: "+";
	position: absolute;
	right: 1.1rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.3rem;
	font-weight: 400;
	color: var(--tdmc-brand);
	line-height: 1;
}

.tdmc-faq__item[open] summary::after { content: "\2212"; }
.tdmc-faq__item[open] summary { border-bottom: 1px solid var(--tdmc-line); }
.tdmc-faq__item p { margin: 0; padding: .9rem 1.1rem 1.05rem; font-size: .95rem; }

/* ------------------------------------------------------- destination cards */

.tdmc-grid--dest { gap: 1.15rem; }

@media only screen and (min-width: 768px) {
	.tdmc-grid--dest { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
}

@media only screen and (min-width: 961px) {
	.tdmc-grid--dest { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
}

.tdmc-dest {
	position: relative;
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	background: #16202b;
	box-shadow: 0 2px 10px rgba(20,32,44,.08);
	transition: box-shadow .22s ease, transform .22s ease;
}

.tdmc-dest > a,
.tdmc-dest > a:visited {
	display: block;
	position: relative;
	text-decoration: none;
	color: #fff;
	min-height: 230px;
}

.tdmc-dest__media { display: block; position: absolute; inset: 0; }

.tdmc-dest__media img,
.tdmc-dest__noimg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

.tdmc-dest__noimg { background: linear-gradient(135deg, #1d3242, #2b4c62); }

.tdmc-dest > a::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,17,24,.10) 30%, rgba(10,17,24,.82) 100%);
}

.tdmc-dest__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: .18rem;
	min-height: 230px;
	justify-content: flex-end;
	padding: 1.1rem 1.15rem 1.15rem;
}

.tdmc-dest__name {
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
	text-shadow: 0 1px 10px rgba(0,0,0,.4);
}

.tdmc-dest__count {
	font-size: .87rem;
	color: rgba(255,255,255,.86);
	letter-spacing: .01em;
}

.tdmc-dest__go {
	margin-top: .45rem;
	font-size: .87rem;
	font-weight: 600;
	color: #7fdcf5;
}

@media (hover: hover) {
	.tdmc-dest:hover { box-shadow: 0 10px 30px rgba(20,32,44,.20); transform: translateY(-3px); }
	.tdmc-dest:hover .tdmc-dest__media img { transform: scale(1.06); }
	.tdmc-dest:hover .tdmc-dest__go { color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
	.tdmc-dest, .tdmc-dest__media img { transition: none; }
	.tdmc-dest:hover { transform: none; }
	.tdmc-dest:hover .tdmc-dest__media img { transform: none; }
}

@media only screen and (min-width: 961px) {
	.tdmc-dest > a, .tdmc-dest__body { min-height: 260px; }
	.tdmc-dest__name { font-size: 1.42rem; }
}

/* Image credit: required by the CC BY licences these photos carry. */
.tdmc-credit {
	position: absolute;
	right: .55rem;
	top: .5rem;
	z-index: 3;
	font-size: .62rem;
	line-height: 1.25;
	color: rgba(255,255,255,.7);
	max-width: 58%;
	text-align: right;
	text-shadow: 0 1px 4px rgba(0,0,0,.6);
	pointer-events: auto;
}

.tdmc-credit a,
.tdmc-credit a:visited { color: rgba(255,255,255,.7); text-decoration: none; }
.tdmc-credit a:hover { color: rgba(255,255,255,.9); text-decoration: underline; }


/* ---------------------------------------------------------- link states

   The theme sets `a, a:visited { color: #0099ff }` at specificity (0,0,1,1),
   which beats a single class like .tdmc-btn (0,0,1,0). On the cyan button that
   rendered as blue-on-cyan once the target had been visited. These rules are
   scoped under .tdmc-hseo so they outrank it in every state.
                                                                          */

.tdmc-hseo a.tdmc-btn,
.tdmc-hseo a.tdmc-btn:link,
.tdmc-hseo a.tdmc-btn:visited,
.tdmc-hseo a.tdmc-btn:hover,
.tdmc-hseo a.tdmc-btn:focus,
.tdmc-hseo a.tdmc-btn:active { color: #fff; }

.tdmc-hseo a.tdmc-link,
.tdmc-hseo a.tdmc-link:link,
.tdmc-hseo a.tdmc-link:visited,
.tdmc-hseo a.tdmc-link:hover,
.tdmc-hseo a.tdmc-link:focus { color: var(--tdmc-brand-dark); }

.tdmc-hseo .tdmc-dest > a,
.tdmc-hseo .tdmc-dest > a:link,
.tdmc-hseo .tdmc-dest > a:visited,
.tdmc-hseo .tdmc-dest > a:hover,
.tdmc-hseo .tdmc-dest > a:focus { color: #fff; }

.tdmc-hseo .tdmc-card--hotel > a,
.tdmc-hseo .tdmc-card--hotel > a:link,
.tdmc-hseo .tdmc-card--hotel > a:visited,
.tdmc-hseo .tdmc-card--hotel > a:hover,
.tdmc-hseo .tdmc-card--hotel > a:focus { color: inherit; }

.tdmc-hseo .tdmc-hero__crumbs a,
.tdmc-hseo .tdmc-hero__crumbs a:link,
.tdmc-hseo .tdmc-hero__crumbs a:visited { color: rgba(255,255,255,.78); }
.tdmc-hseo .tdmc-hero__crumbs a:hover,
.tdmc-hseo .tdmc-hero__crumbs a:focus { color: #fff; }

.tdmc-hseo a.tdmc-chip,
.tdmc-hseo a.tdmc-chip:link,
.tdmc-hseo a.tdmc-chip:visited { color: var(--tdmc-body); }
.tdmc-hseo a.tdmc-chip.is-on,
.tdmc-hseo a.tdmc-chip.is-on:visited { color: #fff; }
.tdmc-hseo a.tdmc-chip:hover,
.tdmc-hseo a.tdmc-chip:focus { color: var(--tdmc-brand-dark); }

.tdmc-hseo a.tdmc-pager__link,
.tdmc-hseo a.tdmc-pager__link:link,
.tdmc-hseo a.tdmc-pager__link:visited { color: var(--tdmc-ink); }
.tdmc-hseo a.tdmc-pager__link:hover,
.tdmc-hseo a.tdmc-pager__link:focus { color: var(--tdmc-brand-dark); }

.tdmc-hseo .tdmc-credit a,
.tdmc-hseo .tdmc-credit a:link,
.tdmc-hseo .tdmc-credit a:visited { color: rgba(255,255,255,.7); }
.tdmc-hseo .tdmc-credit a:hover,
.tdmc-hseo .tdmc-credit a:focus { color: #fff; }

/* The CTA body links sit on a light panel and must not inherit theme blue. */
.tdmc-hseo .tdmc-card--cta a:not(.tdmc-btn),
.tdmc-hseo .tdmc-card--cta a:not(.tdmc-btn):visited { color: var(--tdmc-brand-dark); font-weight: 600; }