/* =========================================================
   UAE GOLF ONLINE
   ABOUT — BEHIND THE COVERAGE SLIDER
   Page 14 only
   ========================================================= */


/* =========================================================
   SLIDER SHELL
   ========================================================= */

.ugo-about-slider{
	position:relative;
	width:100%;
	max-width:1280px;
	margin:34px auto 0;
}


/* =========================================================
   TRACK
   ========================================================= */

.ugo-about-slider-track{
	position:relative;
	overflow:hidden;
	touch-action:pan-y pinch-zoom;
}


/* =========================================================
   SLIDES
   ========================================================= */

.ugo-about-slider-slide{
	position:relative;
	margin:0;
	display:none;
}

.ugo-about-slider-slide:first-child{
	display:block;
}

.ugo-about-slider.is-enhanced .ugo-about-slider-slide{
	display:block;
}

.ugo-about-slider .ugo-about-slider-slide[hidden]{
	display:none !important;
}


/*
 * Gutenberg puts the image and caption inside this wrapper.
 * This becomes the actual visual slide.
 */
.ugo-about-slider-slide > .wp-block-group__inner-container{
	position:relative;
	width:100%;
	margin:0;
}


/* =========================================================
   IMAGE
   ========================================================= */

.ugo-about-slider-image{
	position:relative;
	margin:0 !important;
	width:100%;
	overflow:hidden;
	border-radius:6px;
	background:#e8e8e1;
}

.ugo-about-slider-image img{
	display:block;
	width:100%;
	aspect-ratio:16 / 7;
	object-fit:cover;
	object-position:center;
	border-radius:6px;
	filter:saturate(.78);
}


/* Subtle edge only */

.ugo-about-slider-image:after{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	border-radius:6px;
	box-shadow:inset 0 0 0 1px rgba(23,73,54,.08);
}


/* =========================================================
   CAPTION
   Integrated into bottom of image
   ========================================================= */

.ugo-about-slider-caption{
	position:absolute;
	z-index:3;
	left:0;
	right:0;
	bottom:0;
	margin:0;
	padding:90px 300px 30px 32px;

	background:linear-gradient(
		to bottom,
		rgba(8,36,27,0) 0%,
		rgba(8,36,27,.32) 32%,
		rgba(8,36,27,.82) 72%,
		rgba(8,36,27,.94) 100%
	);

	color:#fff;
	pointer-events:none;
}

.ugo-about .ugo-about-slider-year{
	font-family:var(--global-body-font-family,Arial,sans-serif);
	font-size:11px;
	font-weight:600;
	line-height:1.4;
	letter-spacing:.15em;
	text-transform:uppercase;
	color:#e7ede7;
	margin:0 0 10px;
}

.ugo-about .ugo-about-slider-year:empty{
	display:none;
}

.ugo-about .ugo-about-slider-caption h3{
	font-family:Georgia,serif;
	font-size:clamp(25px,2.5vw,35px);
	font-weight:400;
	line-height:1.18;
	letter-spacing:-.02em;
	color:#fff;
	margin:0 0 9px;
}

.ugo-about .ugo-about-slider-caption p:last-child{
	font-size:14px;
	line-height:1.6;
	color:rgba(255,255,255,.86);
	max-width:650px;
	margin:0;
}


/* =========================================================
   CONTROLS
   Sit directly over the image
   ========================================================= */

.ugo-about-slider-controls{
	display:none;
	position:absolute;
	z-index:6;
	right:28px;
	bottom:50px;
	align-items:center;
	gap:8px;
	margin:0;
	padding:0;
}

.ugo-about-slider.is-enhanced .ugo-about-slider-controls{
	display:flex;
}


/* Previous / next */

.ugo-about-slider-prev,
.ugo-about-slider-next{
	display:grid;
	place-items:center;
	width:44px;
	height:44px;
	padding:0;

	border:1px solid rgba(255,255,255,.52);
	border-radius:50%;

	background:rgba(8,36,27,.36);
	color:#fff;

	font-size:21px;
	line-height:1;

	cursor:pointer;

	-webkit-backdrop-filter:blur(5px);
	backdrop-filter:blur(5px);

	transition:
		background .2s ease,
		border-color .2s ease,
		transform .2s ease;
}

.ugo-about-slider-prev:hover,
.ugo-about-slider-next:hover{
	background:rgba(8,36,27,.72);
	border-color:#fff;
	transform:translateY(-1px);
}

/* Pause / play button */

.ugo-about-slider-auto-toggle{
	display:inline-flex !important;
	align-items:center;
	justify-content:center;

	width:48px !important;
	height:48px !important;
	min-width:48px;
	min-height:48px;

	margin-left:8px;
	padding:0 !important;

	border:1px solid rgba(255,255,255,.55);
	border-radius:999px !important;

	background:rgba(8,36,27,.42) !important;
	color:#fff !important;

	font-size:0;
	line-height:1;
	box-shadow:none;
	cursor:pointer;

	-webkit-appearance:none;
	appearance:none;
	-webkit-backdrop-filter:blur(6px);
	backdrop-filter:blur(6px);

	transition:
		background .2s ease,
		border-color .2s ease,
		transform .2s ease;
}

.ugo-about-slider-auto-toggle:hover{
	background:rgba(8,36,27,.72) !important;
	border-color:#fff;
	transform:translateY(-1px);
}

.ugo-about-slider-auto-toggle::before{
	content:"Ⅱ";
	font-size:16px;
	font-weight:700;
	line-height:1;
	letter-spacing:-2px;
	color:#fff;
}

.ugo-about-slider-auto-toggle[aria-pressed="true"]::before{
	content:"▶";
	font-size:15px;
	letter-spacing:0;
	transform:translateX(1px);
}

.ugo-about-slider-auto-toggle[hidden]{
	display:none !important;
}
.ugo-about-slider-counter{
	color:rgba(255,255,255,.88) !important;
}

/* =========================================================
   ABOUT — THEN / NOW STORY EVOLUTION
   ========================================================= */

.ugo-about .ugo-story-evolution{
	position:relative;
	background:#fafaf6;
	padding:88px 24px 94px;
	margin:0;
}

.ugo-about .ugo-story-evolution-inner{
	width:100%;
	max-width:1280px;
	margin:0 auto;
}

/* Two-column structure */

.ugo-about .ugo-story-evolution-inner > .kt-row-column-wrap{
	position:relative;
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:92px;
	align-items:start;
}

/* Central editorial divider */

.ugo-about .ugo-story-evolution-inner > .kt-row-column-wrap:after{
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	left:50%;
	width:1px;
	background:rgba(23,73,54,.13);
	transform:translateX(-.5px);
	pointer-events:none;
}

/* Columns */

.ugo-about .ugo-evolution-then,
.ugo-about .ugo-evolution-now{
	min-width:0;
}

/* Small THEN / NOW label */

.ugo-about .ugo-evolution-label{
	font-family:var(--global-body-font-family,Arial,sans-serif);
	font-size:11px;
	font-weight:700;
	line-height:1.4;
	letter-spacing:.18em;
	color:var(--global-palette1,#174936);
	margin:0 0 18px;
}

/* Main headings */

.ugo-about .ugo-story-evolution h2{
	font-family:Georgia,serif;
	font-size:clamp(32px,3vw,46px);
	font-weight:400;
	line-height:1.15;
	letter-spacing:-.025em;
	color:var(--global-palette3,#17382d);
	margin:0 0 26px;
	max-width:520px;
}

/* Body copy */

.ugo-about .ugo-story-evolution p:not(.ugo-evolution-label){
	font-size:17px;
	line-height:1.8;
	color:var(--global-palette4,#405049);
	margin:0 0 19px;
	max-width:560px;
}

/* Shared image treatment */

.ugo-about .ugo-evolution-image{
	margin-top:34px;
	overflow:hidden;
}

.ugo-about .ugo-evolution-image img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:4px;
}

/* THEN - NOW image wider + brighter */

.ugo-about .ugo-evolution-image-old,
.ugo-about .ugo-evolution-image-now{
	width:100%;
}

.ugo-about .ugo-evolution-image-old img,
.ugo-about .ugo-evolution-image-now img{
	display:block;
	width:100%;
	height:clamp(220px,24vw,320px);
	object-fit:cover;
	border-radius:6px;
}

/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1024px){

	.ugo-about .ugo-story-evolution{
		padding:74px 24px 80px;
	}

	.ugo-about .ugo-story-evolution-inner > .kt-row-column-wrap{
		gap:58px;
	}

	.ugo-about .ugo-story-evolution h2{
		font-size:clamp(30px,4vw,40px);
	}

	.ugo-about .ugo-story-evolution p:not(.ugo-evolution-label){
		font-size:16px;
	}
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:600px){

	.ugo-about .ugo-story-evolution{
		padding:60px 22px 64px;
	}

	.ugo-about .ugo-story-evolution-inner > .kt-row-column-wrap{
		grid-template-columns:minmax(0,1fr);
		gap:58px;
	}

	.ugo-about .ugo-story-evolution-inner > .kt-row-column-wrap:after{
		display:none;
	}

	/* Give NOW a subtle separator on mobile */

	.ugo-about .ugo-evolution-now{
		padding-top:48px;
		border-top:1px solid rgba(23,73,54,.14);
	}

	.ugo-about .ugo-story-evolution h2{
		font-size:31px;
		margin-bottom:22px;
	}

	.ugo-about .ugo-story-evolution p:not(.ugo-evolution-label){
		font-size:16px;
		line-height:1.75;
	}

	.ugo-about .ugo-evolution-image{
		margin-top:28px;
	}

	.ugo-about .ugo-evolution-image-old{
		width:82%;
	}

	.ugo-about .ugo-evolution-image-now{
		width:100%;
	}
}

/* =========================================================
   TRANSITION
   ========================================================= */

.ugo-about-slider-slide.is-entering{
	animation:ugo-about-slider-enter 420ms cubic-bezier(.2,.7,.2,1) both;
}

@keyframes ugo-about-slider-enter{

	from{
		opacity:.12;
		transform:translateX(12px);
	}

	to{
		opacity:1;
		transform:translateX(0);
	}
}


/* =========================================================
   FOCUS
   ========================================================= */

.ugo-about-slider button:focus-visible,
.ugo-about-slider:focus-visible{
	outline:2px solid #fff;
	outline-offset:3px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1024px){

	.ugo-about-slider{
		max-width:100%;
	}

	.ugo-about-slider-image img{
		aspect-ratio:16 / 8;
	}

	.ugo-about-slider-caption{
		padding:
			80px
			260px
			26px
			28px;
	}

	.ugo-about-slider-controls{
		right:24px;
		bottom:24px;
	}

	.ugo-about-slider-auto-toggle{
		display:none;
	}
}


/* =========================================================
   MOBILE
   Caption moves below image
   Controls return below component
   ========================================================= */

@media(max-width:600px){

	.ugo-about-slider{
		margin-top:26px;
	}

	.ugo-about-slider-image{
		border-radius:5px 5px 0 0;
	}

	.ugo-about-slider-image img{
		aspect-ratio:4 / 3;
		border-radius:5px 5px 0 0;
	}

	.ugo-about-slider-image:after{
		border-radius:5px 5px 0 0;
	}


	/* Caption is no longer overlayed on small screens */

	.ugo-about-slider-caption{
		position:relative;
		left:auto;
		right:auto;
		bottom:auto;

		padding:22px 22px 24px;

		background:#f2f1ea;
		color:var(--global-palette3,#17382d);

		border-radius:0 0 5px 5px;

		pointer-events:auto;
	}

	.ugo-about .ugo-about-slider-year{
		font-size:10px;
		color:var(--global-palette1,#174936);
		margin-bottom:10px;
	}

	.ugo-about .ugo-about-slider-caption h3{
		font-size:25px;
		color:var(--global-palette3,#17382d);
		margin-bottom:10px;
	}

	.ugo-about .ugo-about-slider-caption p:last-child{
		font-size:14px;
		line-height:1.65;
		color:var(--global-palette4,#405049);
		max-width:none;
	}


	/* Controls below on mobile */

	.ugo-about-slider-controls{
		position:relative;
		right:auto;
		bottom:auto;
		transform:translateY(-30px) !important;
		display:none;
		width:100%;

		padding-top:15px;
		gap:8px;
	}

	.ugo-about-slider.is-enhanced .ugo-about-slider-controls{
		display:flex;
	}

	.ugo-about-slider-prev,
	.ugo-about-slider-next{
		width:44px;
		height:44px;

		background:transparent;
		border-color:rgba(23,73,54,.20);
		color:var(--global-palette1,#174936);

		-webkit-backdrop-filter:none;
		backdrop-filter:none;
	}

	.ugo-about-slider-prev:hover,
	.ugo-about-slider-next:hover{
		background:#f2f3ed;
		border-color:rgba(23,73,54,.42);
	}

	.ugo-about-slider-counter{
		margin-left:5px;
		color:var(--global-palette5,#66716b);
	}

	.ugo-about-slider-auto-toggle{
		display:block;
		margin-left:auto;
		color:var(--global-palette5,#66716b);
		border-bottom-color:rgba(23,73,54,.22);
	}
}


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

@media(prefers-reduced-motion:reduce){

	.ugo-about-slider-slide.is-entering{
		animation:none;
	}

	.ugo-about-slider-prev,
	.ugo-about-slider-next{
		transition:none;
	}
}

/* =========================================================
   WHY BRING IT BACK — EDITORIAL 2009 / 2026
   ADD AT VERY BOTTOM OF MAIN ABOUT CSS
   ========================================================= */

.ugo-about .ugo-about-why{
	background:#f7f7f2;
	padding:78px 24px 82px;
}

.ugo-about .ugo-why-editorial{
	width:100%;
	max-width:1280px;
	margin:0 auto;
}

.ugo-about .ugo-why-editorial > .kt-row-column-wrap{
	display:grid;
	grid-template-columns:minmax(0,1.35fr) minmax(0,.95fr) minmax(220px,.7fr);
	gap:58px;
	align-items:center;
}

/* LEFT STATEMENT */

.ugo-about .ugo-why-statement{
	min-width:0;
}

.ugo-about .ugo-why-statement .ugo-about-eyebrow{
	margin-bottom:18px;
}

.ugo-about .ugo-why-statement h2{
	font-family:Georgia,serif;
	font-size:clamp(38px,4vw,58px);
	line-height:1.08;
	font-weight:400;
	letter-spacing:-.03em;
	margin:0;
	max-width:660px;
}

/* CENTRE COPY */

.ugo-about .ugo-why-copy{
	min-width:0;
	padding-top:34px;
}

.ugo-about .ugo-why-copy p{
	font-size:16px;
	line-height:1.78;
	color:var(--global-palette4,#405049);
	margin:0 0 18px;
	max-width:470px;
}

.ugo-about .ugo-why-copy p:last-child{
	margin-bottom:0;
}

/* RIGHT YEARS */

.ugo-about .ugo-why-years{
	min-width:0;
	text-align:center;
}

.ugo-about .ugo-why-yearline{
	font-family:Georgia,serif;
	font-size:clamp(42px,5vw,68px) !important;
	line-height:1;
	font-weight:400;
	letter-spacing:-.04em;
	color:rgba(23,73,54,.20);
	margin:0 0 18px !important;
	white-space:nowrap;
}

.ugo-about .ugo-why-yearlabels{
	font-family:var(--global-body-font-family,Arial,sans-serif);
	font-size:10px !important;
	line-height:1.65 !important;
	font-weight:600;
	letter-spacing:.16em;
	color:rgba(23,73,54,.55);
	margin:0 !important;
	text-transform:uppercase;
	white-space:pre-line;
}

/* TABLET */

@media(max-width:1024px){

	.ugo-about .ugo-about-why{
		padding:70px 24px 74px;
	}

	.ugo-about .ugo-why-editorial > .kt-row-column-wrap{
		grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
		gap:44px 50px;
	}

	.ugo-about .ugo-why-years{
		grid-column:1 / -1;
		text-align:left;
		display:flex;
		align-items:center;
		gap:24px;
		padding-top:6px;
	}

	.ugo-about .ugo-why-yearline{
		margin:0 !important;
	}

	.ugo-about .ugo-why-copy{
		padding-top:28px;
	}
}

/* MOBILE */

@media(max-width:600px){

	.ugo-about .ugo-about-why{
		padding:56px 22px 60px;
	}

	.ugo-about .ugo-why-editorial > .kt-row-column-wrap{
		grid-template-columns:minmax(0,1fr);
		gap:30px;
	}

	.ugo-about .ugo-why-statement h2{
		font-size:36px;
		line-height:1.1;
	}

	.ugo-about .ugo-why-copy{
		padding-top:0;
	}

	.ugo-about .ugo-why-copy p{
		font-size:16px;
		line-height:1.72;
		max-width:none;
	}

	.ugo-about .ugo-why-years{
		grid-column:auto;
		display:block;
		text-align:left;
		padding-top:10px;
		border-top:1px solid rgba(23,73,54,.12);
	}

	.ugo-about .ugo-why-yearline{
		font-size:42px !important;
		margin-bottom:12px !important;
		white-space:normal;
	}

	.ugo-about .ugo-why-yearlabels{
		font-size:9px !important;
	}
}

/* =========================================================
   WHY BRING IT BACK — FINAL ALIGNMENT
   ADD AT BOTTOM OF MAIN ABOUT CSS
   ========================================================= */

.ugo-about .ugo-why-editorial > .kt-row-column-wrap{
	align-items:start !important;
}

/*
 * Eyebrow sits above the headline.
 * Centre copy and years align with the headline itself.
 */
.ugo-about .ugo-why-copy,
.ugo-about .ugo-why-years{
	padding-top:58px !important;
	align-self:start;
}

/* Remove previous vertical centering */
.ugo-about .ugo-why-years{
	display:block;
	text-align:center;
}

/* Keep the year treatment compact */
.ugo-about .ugo-why-yearline{
	margin-top:0 !important;
	margin-bottom:22px !important;
}

/* Slightly refine supporting labels */
.ugo-about .ugo-why-yearlabels{
	line-height:1.8 !important;
}

/* Tighten the overall section slightly */
.ugo-about .ugo-about-why{
	padding-top:68px;
	padding-bottom:68px;
}


/* TABLET */
@media(max-width:1024px){

	.ugo-about .ugo-why-copy,
	.ugo-about .ugo-why-years{
		padding-top:48px !important;
	}
}


/* MOBILE */
@media(max-width:600px){

	.ugo-about .ugo-why-copy,
	.ugo-about .ugo-why-years{
		padding-top:0 !important;
	}

	.ugo-about .ugo-about-why{
		padding-top:54px;
		padding-bottom:56px;
	}
}