/* =========================================================
   HOME PRIVATE TOUR + VIDEO SECTIONS: TAT LICENCE BOX

   Section classes        : home-private-tour-section,
                            home-video-section
   Horizontal Wrapper     : tat-box
   Logo image             : tat-logo
   Text lines             : tat-text, tat-licence-number
   Link                   : third text in the wrapper

   Width  : max. one third of the site content width,
            in any column or section; shrinks on small screens
   Video section: box centred
   Desktop: logo left, text right
   Phones : logo on top, text below

   Spacing on the 8px scale (8 / 16 / 24px).
   No font sizes set here: theme sizes apply.
========================================================= */


/* =========================================================
   BOX
========================================================= */

:is(.home-private-tour-section, .home-video-section) .tat-box {
	--hwrapper-gap: 0 !important;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;
	max-width: calc(var(--site-content-width, 1140px) / 3);
	padding: 24px;
	box-sizing: border-box;
	border: 1px solid #e1e6ec;
	border-radius: 16px;
	background-color: #ffffff;
}

/* Centred in the video section */
.home-video-section .tat-box {
	margin-left: auto;
	margin-right: auto;
}


/* =========================================================
   LOGO
   Spacing to the text comes from the logo's own margin.
========================================================= */

:is(.home-private-tour-section, .home-video-section) .tat-box .tat-logo {
	flex-shrink: 0;
	width: 112px;
	margin: 0 24px 0 0 !important;
}

:is(.home-private-tour-section, .home-video-section) .tat-box .tat-logo img {
	display: block;
	width: 100%;
	height: auto;
}


/* =========================================================
   TEXT
========================================================= */

:is(.home-private-tour-section, .home-video-section) .tat-box .w-vwrapper {
	--vwrapper-gap: 8px !important;
	min-width: 0;
}

:is(.home-private-tour-section, .home-video-section) .tat-box .tat-text {
	margin: 0;
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-tertiary, #086788);
}

:is(.home-private-tour-section, .home-video-section) .tat-box .tat-licence-number {
	margin: 0;
	line-height: 1.4;
	color: var(--color-body-text, #4d5156);
}


/* =========================================================
   BOOKING TERMS LINK
   The arrow sits next to the first line if the text wraps.
========================================================= */

:is(.home-private-tour-section, .home-video-section) .tat-box a.w-text-h {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--color-tertiary, #086788);
	text-decoration: none;
}

:is(.home-private-tour-section, .home-video-section) .tat-box a.w-text-h svg {
	width: 1em;
	height: 1.4em;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

:is(.home-private-tour-section, .home-video-section) .tat-box a.w-text-h:hover {
	color: var(--color-secondary, #2cb8f6);
}

:is(.home-private-tour-section, .home-video-section) .tat-box a.w-text-h:hover svg {
	transform: translateX(3px);
}

:is(.home-private-tour-section, .home-video-section) .tat-box a.w-text-h:focus-visible {
	outline: 2px solid var(--color-secondary, #2cb8f6);
	outline-offset: 3px;
}


/* =========================================================
   PHONES
   Logo stacked above the text.
========================================================= */

@media (max-width: 600px) {
	:is(.home-private-tour-section, .home-video-section) .tat-box {
		flex-direction: column;
		align-items: flex-start;
		padding: 16px;
	}

	:is(.home-private-tour-section, .home-video-section) .tat-box .tat-logo {
		width: 88px;
		margin: 0 0 16px 0 !important;
	}

	:is(.home-private-tour-section, .home-video-section) .tat-box .w-vwrapper {
		width: 100%;
	}
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
	:is(.home-private-tour-section, .home-video-section) .tat-box a.w-text-h svg {
		transition: none;
	}

	:is(.home-private-tour-section, .home-video-section) .tat-box a.w-text-h:hover svg {
		transform: none;
	}
}