/* Heart UK VOD - front-end styles */

:root{
	--huk-primary:#1d3557;
	--huk-secondary:#c8102e;
	--huk-accent:#1d3557;
	--huk-text:#222222;
	--huk-background:#f2f2f2;
	--huk-button-text:#ffffff;
}

* { box-sizing: border-box; }

.huk-vod-body{
	margin:0;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	color:var(--huk-text);
	background:var(--huk-background);
	-webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--huk-secondary); }

.huk-btn{
	display:inline-block;
	background:var(--huk-secondary);
	color:var(--huk-button-text) !important;
	border:none;
	padding:13px 28px;
	border-radius:4px;
	font-weight:600;
	font-size:15px;
	text-decoration:none;
	cursor:pointer;
	transition:opacity .15s ease;
}
.huk-btn:hover{ opacity:.88; }
.huk-btn-secondary{ background:var(--huk-primary); }

/* ---------------- Nav ---------------- */
.huk-nav{
	background:var(--huk-primary);
	position:sticky;
	top:0;
	z-index:1000;
}
.huk-nav-inner{
	max-width:1200px;
	margin:0 auto;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:14px 24px;
}
.huk-nav-logo img{ max-height:42px; }
.huk-nav-logo{ color:#fff; font-weight:700; font-size:18px; text-decoration:none; }
.huk-nav-links{ display:flex; align-items:center; gap:26px; }
.huk-nav-links a{
	color:#fff;
	text-decoration:none;
	font-size:15px;
	font-weight:500;
	opacity:.85;
	padding:6px 0;
	border-bottom:2px solid transparent;
}
.huk-nav-links a:hover, .huk-nav-links a.is-active{ opacity:1; border-bottom-color:var(--huk-secondary); }
.huk-nav-logout{ background:var(--huk-secondary); padding:8px 16px !important; border-radius:4px; opacity:1 !important; border-bottom:none !important; }

.huk-nav-toggle{
	display:none;
	flex-direction:column;
	gap:5px;
	background:none;
	border:none;
	cursor:pointer;
	padding:6px;
}
.huk-nav-toggle span{ width:26px; height:3px; background:#fff; border-radius:2px; }

@media (max-width: 820px){
	.huk-nav-toggle{ display:flex; }
	.huk-nav-links{
		position:absolute;
		top:100%;
		left:0;
		right:0;
		background:var(--huk-primary);
		flex-direction:column;
		align-items:flex-start;
		padding:10px 24px 20px;
		gap:14px;
		display:none;
	}
	.huk-nav-links.is-open{ display:flex; }
	.huk-nav-inner{ position:relative; flex-wrap:wrap; }
}

/* ---------------- Login page ---------------- */
.huk-login-wrap{
	min-height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px;
	background-size:cover;
	background-position:center;
}
.huk-login-card{
	background:#fff;
	border-radius:8px;
	padding:40px 36px;
	max-width:440px;
	width:100%;
	box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.huk-login-logo{ max-height:64px; margin:0 auto 18px; }
.huk-login-card h1{ font-size:22px; text-align:center; margin:0 0 8px; color:var(--huk-primary); }
.huk-login-subtext{ text-align:center; color:#555; margin:0 0 24px; font-size:14px; }

.huk-tabs{ display:flex; margin-bottom:22px; border-bottom:1px solid #e2e2e2; }
.huk-tab-btn{
	flex:1; background:none; border:none; padding:10px 0; font-size:15px; font-weight:600;
	color:#999; cursor:pointer; border-bottom:3px solid transparent;
}
.huk-tab-btn.is-active{ color:var(--huk-primary); border-bottom-color:var(--huk-secondary); }

.huk-form p{ margin:0 0 14px; }
.huk-form label{ display:block; font-size:13px; font-weight:600; color:#333; margin-bottom:5px; }
.huk-optional-note{ font-weight:400; color:#999; text-transform:none; }
.huk-form input[type=text], .huk-form input[type=email], .huk-form input[type=password], .huk-form input[type=url]{
	width:100%; padding:11px 12px; border:1px solid #ccc; border-radius:4px; font-size:15px;
}
.huk-form input[disabled]{ background:#f0f0f0; color:#777; cursor:not-allowed; }
.huk-form .huk-btn{ width:100%; text-align:center; margin-top:6px; }
.huk-login-card-narrow{ max-width:400px; }
.huk-setpass-intro{ background:#e8f3ff; border:1px solid #b8d9f5; border-radius:5px; padding:12px 16px; margin-bottom:20px; color:#1d3557; font-size:14px; }

.huk-link-btn{
	display:block; margin:14px auto 0; background:none; border:none; color:var(--huk-secondary);
	font-size:13px; cursor:pointer; text-decoration:underline; text-align:center; width:100%;
}
.huk-forgot-panel{ margin-top:18px; padding-top:18px; border-top:1px solid #eee; }

.huk-notice{ padding:11px 14px; border-radius:4px; font-size:14px; margin-bottom:18px; }
.huk-notice-success{ background:#e6f6ea; color:#1c6b35; border:1px solid #b7e3c2; }
.huk-notice-error{ background:#fdeaea; color:#a31c1c; border:1px solid #f3bcbc; }

/* ---------------- Banner ---------------- */
.huk-banner{
	background-size:cover; background-position:center; color:#fff; text-align:center;
	padding:90px 24px; background-color:var(--huk-primary);
}
.huk-banner-inner h1{ font-size:38px; margin:0 0 14px; font-weight: 700; }
.huk-banner-inner p{ font-size:18px; opacity:.92; max-width:640px; margin:0 auto; font-weight: 700; }

.huk-banner-text-block{ text-align:center; padding:40px 24px; }
.huk-banner-text-block h1{ font-size:32px; margin:0 0 12px; color:var(--huk-primary); }
.huk-banner-text-block p{ font-size:17px; max-width:640px; margin:0 auto; color:var(--huk-text); }
.huk-banner-image-only{ min-height:140px; }

@media (max-width: 600px){
	.huk-banner{ padding:56px 20px; }
	.huk-banner-inner h1{ font-size:27px; }
	.huk-banner-inner p{ font-size:15px; }
	.huk-banner-text-block h1{ font-size:24px; }
}

/* ---------------- Intro / generic page section ---------------- */
.huk-intro, .huk-page-section{ padding:64px 24px; }
.huk-intro-inner, .huk-page-section-inner{ max-width:760px; margin:0 auto; text-align:center; }
.huk-page-section-inner{ text-align:left; }
.huk-intro-inner h2, .huk-page-section-inner h1{ color:var(--huk-primary); margin-top:0; }
.huk-intro-text{ margin-bottom:24px; line-height:1.7; }
.huk-intro-inner .huk-btn{ margin-top:6px; }

/* ---------------- Sponsors carousel & grid ---------------- */
.huk-sponsors{ background:#fff; padding:50px 24px; }
.huk-sponsors-inner{ max-width:1100px; margin:0 auto; text-align:center; }
.huk-sponsors-inner h2{ color:var(--huk-primary); margin-top:0; }
.huk-sponsors-text{ max-width:680px; margin:0 auto 10px; line-height:1.7; }

/* Carousel */
.huk-sponsors-carousel{ overflow:hidden; margin-top:24px; }
.huk-sponsors-track{
	display:flex; align-items:center; gap:50px; width:max-content;
	animation:huk-scroll 30s linear infinite;
}
.huk-sponsors-carousel:hover .huk-sponsors-track{ animation-play-state:paused; }
@keyframes huk-scroll{
	from{ transform:translateX(0); }
	to{ transform:translateX(-50%); }
}

/* Static grid — organised into rows, each its own line */
.huk-sponsors-rows{
	display:flex; flex-direction:column; gap:26px; margin-top:28px;
}
.huk-sponsors-row{
	display:flex; flex-wrap:wrap; align-items:center;
	justify-content:center; gap:28px 40px;
}

/* Shared logo size */
.huk-sponsor-logo img{ max-height:54px; width:auto; }

/* ---------------- On Demand intro bar + view toggle ---------------- */
.huk-ondemand-intro{ padding:50px 24px 18px; }
.huk-ondemand-intro-inner{
	max-width:1200px; margin:0 auto;
	display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.huk-ondemand-intro-text h1{ color:var(--huk-primary); margin:0 0 6px; }
.huk-ondemand-intro-text p{ margin:0; color:#555; }

.huk-view-toggle{ display:flex; gap:4px; flex-shrink:0; }
.huk-view-btn{
	display:flex; align-items:center; gap:6px; padding:8px 14px;
	background:#fff; border:1.5px solid #ccc; border-radius:5px;
	font-size:13px; font-weight:600; color:#555; cursor:pointer; transition:all .15s;
}
.huk-view-btn svg{ width:18px; height:18px; }
.huk-view-btn:hover{ border-color:var(--huk-primary); color:var(--huk-primary); }
.huk-view-btn.is-active{ background:var(--huk-primary); border-color:var(--huk-primary); color:#fff; }

@media (max-width:520px){
	.huk-ondemand-intro-inner{ flex-direction:column; align-items:flex-start; }
	.huk-view-btn span{ display:none; }
	.huk-view-btn{ padding:8px 10px; }
}

/* ---------------- Video grid (card view — default) ---------------- */
.huk-video-grid-section{ padding:30px 24px 70px; }
.huk-video-category-group{ max-width:1200px; margin:0 auto 50px; }
.huk-video-category-heading{ color:var(--huk-primary); font-size:24px; margin:0 0 20px; padding-bottom:10px; border-bottom:2px solid var(--huk-secondary); }
.huk-video-category-group .huk-video-grid{ margin:0; }
.huk-video-grid{
	max-width:1200px; margin:0 auto; display:grid;
	grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:28px;
}
.huk-video-card{ background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.08); display:flex; flex-direction:column; position:relative; transition:box-shadow .15s, transform .15s; cursor:pointer; }
.huk-video-card:hover{ box-shadow:0 6px 20px rgba(0,0,0,.14); transform:translateY(-2px); }
.huk-video-thumb{ aspect-ratio:16/9; background:#ddd; overflow:hidden; }
.huk-video-thumb img{ width:100%; height:100%; object-fit:cover; }
.huk-video-thumb-link{ display:block; position:relative; z-index:1; }
.huk-video-card-body{ padding:18px 20px 22px; flex:1; display:flex; flex-direction:column; }
.huk-video-card-text{ flex:1; }
.huk-video-card-body h3{ margin:0 0 8px; color:var(--huk-primary); font-size:17px; }
.huk-video-card-desc{ font-size:14px; color:#555; margin-bottom:16px; line-height:1.5; }
.huk-video-thumb-placeholder{ width:100%; height:100%; background:#ddd; }

/* Stretched link — h3 <a> covers the whole card; thumb link + button sit above via z-index */
.huk-card-link{ color:inherit; text-decoration:none; display:block; }
.huk-card-link::after{ content:''; position:absolute; inset:0; z-index:0; }
.huk-video-card:hover .huk-card-link{ color:var(--huk-secondary); }
.huk-watch-btn{ position:relative; z-index:1; margin-top:auto; }

/* ---------------- List view ---------------- */
#huk-library.huk-is-list .huk-video-grid{
	grid-template-columns:1fr;
	gap:10px;
}
#huk-library.huk-is-list .huk-video-card{
	flex-direction:row;
	align-items:stretch;
	max-width:100%;
	border-radius:6px;
	transform:none !important; /* disable the card hover lift on list rows */
}
#huk-library.huk-is-list .huk-video-thumb-link{
	flex-shrink:0; width:200px;
}
#huk-library.huk-is-list .huk-video-thumb{
	width:200px; height:100%; aspect-ratio:auto; min-height:90px;
}
#huk-library.huk-is-list .huk-video-thumb img{
	width:100%; height:100%; object-fit:cover;
}
/* List card-body: text on left, button pinned right */
#huk-library.huk-is-list .huk-video-card-body{
	flex-direction:row;
	align-items:center;
	padding:14px 20px;
	gap:20px;
}
#huk-library.huk-is-list .huk-video-card-text{
	flex:1; min-width:0;
}
#huk-library.huk-is-list .huk-video-card-body h3{
	font-size:17px; margin-bottom:4px;
}
#huk-library.huk-is-list .huk-video-card-desc{
	margin-bottom:0; display:block;
}
/* Watch Now button compact on right */
#huk-library.huk-is-list .huk-watch-btn{
	flex-shrink:0;
	width:auto;
	white-space:nowrap;
	margin-top:0;
	padding:11px 22px;
}
#huk-library.huk-is-list .huk-video-category-group{
	margin-bottom:30px;
}

@media (max-width:680px){
	#huk-library.huk-is-list .huk-video-card{ flex-direction:column; }
	#huk-library.huk-is-list .huk-video-thumb-link,
	#huk-library.huk-is-list .huk-video-thumb{ width:100%; aspect-ratio:16/9; height:auto; }
	#huk-library.huk-is-list .huk-video-card-body{ flex-direction:column; align-items:flex-start; }
	#huk-library.huk-is-list .huk-watch-btn{ margin-top:12px; width:100%; text-align:center; }
}

/* ---------------- Watch page ---------------- */
.huk-watch-section{ padding:30px 24px 70px; }
.huk-watch-inner{ max-width:980px; margin:0 auto; }
.huk-back-link{
	display:inline-flex;
	align-items:center;
	gap:7px;
	margin-bottom:22px;
	padding:10px 20px;
	background:#fff;
	color:var(--huk-primary) !important;
	border:2px solid var(--huk-primary);
	border-radius:4px;
	font-size:14px;
	font-weight:600;
	text-decoration:none;
	transition:background .15s, color .15s;
}
.huk-back-link:hover{
	background:var(--huk-primary);
	color:#fff !important;
}
.huk-watch-inner h1{ color:var(--huk-primary); margin-top:0; }
.huk-video-frame-wrap{ position:relative; width:100%; padding-top:56.25%; background:#000; border-radius:6px; overflow:hidden; }
.huk-video-frame-wrap iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
.huk-video-description{ margin-top:24px; line-height:1.7; }

/* ---------------- Profile ---------------- */
.huk-profile-inner{ max-width:520px; }
.huk-profile-inner h2{ margin-top:36px; color:var(--huk-primary); }
.huk-profile-details{ background:#fff; padding:20px 24px; border-radius:6px; margin-bottom:30px; }
.huk-profile-details p{ margin:6px 0; }
.huk-locked-note{ color:#999; font-size:13px; }
.huk-profile-form .huk-btn{ width:auto; }

/* ---------------- Live Event ---------------- */
.huk-live-banner{
	background-size:cover; background-position:center; color:#fff; text-align:center;
	padding:56px 24px; background-color:var(--huk-primary);
}
.huk-live-banner-inner h1{ font-size:32px; margin:0 0 10px; }
.huk-live-banner-inner p{ font-size:16px; opacity:.92; max-width:640px; margin:0 auto 10px; }
.huk-live-round-badge{
	display:inline-block; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.4);
	padding:5px 14px; border-radius:20px; font-size:13px; font-weight:600;
}

.huk-live-main{ padding:34px 24px 70px; }
.huk-live-layout{
	max-width:1300px; margin:0 auto; display:flex; align-items:flex-start; gap:24px;
}
.huk-live-layout-no-vevox{ display:block; }
.huk-live-video-col{ flex:1; min-width:0; }

.huk-live-video-frame-wrap{
	position:relative; width:100%; padding-top:56.25%; background:#000;
	border-radius:6px; overflow:hidden;
}
.huk-live-video-frame-wrap iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
.huk-live-no-video{
	position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
	color:#aaa; font-size:15px; text-align:center; padding:24px;
}

.huk-live-disclaimer{
	margin:14px 0 0; padding:10px 14px; background:#fff8e6; border:1px solid #f0dca0;
	border-radius:5px; font-size:13px; color:#7a5b00; line-height:1.5;
}
.huk-live-description{ margin-top:22px; line-height:1.7; }

/* Thin, mobile-width Vevox pane to the right of the video */
.huk-live-vevox-col{
	flex:0 0 380px; width:380px; max-width:100%;
	background:#fff; border-radius:6px; overflow:hidden;
	box-shadow:0 2px 10px rgba(0,0,0,.08);
	display:flex; flex-direction:column;
	height:600px;
}
.huk-live-vevox-header{
	background:var(--huk-primary); color:#fff; font-weight:600; font-size:14px;
	padding:12px 16px; flex-shrink:0;
}
.huk-live-vevox-col iframe{ flex:1; width:100%; border:0; }

@media (max-width:960px){
	.huk-live-layout{ flex-direction:column; }
	.huk-live-vevox-col{ width:100%; flex:0 0 auto; height:520px; }
}

/* Agenda "Live Page" cards (reuses huk-video-card/huk-video-grid) */
.huk-live-thumb{
	background-size:cover; background-position:center;
	display:flex; align-items:flex-end; justify-content:flex-start; padding:12px;
}
.huk-live-badge{
	background:rgba(0,0,0,.55); color:#fff; font-size:11px; font-weight:700;
	padding:4px 10px; border-radius:20px; letter-spacing:.03em;
}
.huk-video-thumb{ position:relative; }
.huk-live-badge-overlay{
	position:absolute; left:12px; bottom:12px;
}

/* ---------------- Footer ---------------- */
.huk-footer{ background:var(--huk-primary); color:#fff; padding:50px 24px 0; }
.huk-footer-inner{
	max-width:1100px; margin:0 auto; display:flex; gap:40px; align-items:center;
	justify-content:space-between; flex-wrap:wrap; padding-bottom:30px;
}
.huk-footer-contact{ font-size:14px; line-height:1.8; opacity:.9; }
.huk-footer-contact p{ margin:0 0 10px; }
.huk-footer-contact a, .huk-footer-right-text a{ color:#fff; text-decoration:underline; }
.huk-footer-right{ display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
.huk-footer-right-text{ font-size:14px; line-height:1.8; opacity:.9; text-align:right; }
.huk-footer-right-text p{ margin:0 0 10px; }
.huk-footer-image img{ max-height:90px; border-radius:4px; }
.huk-footer-bottom{ border-top:1px solid rgba(255,255,255,.15); text-align:center; padding:16px 0; font-size:12px; opacity:.7; }

@media (max-width: 600px){
	.huk-footer-inner{ flex-direction:column; text-align:center; }
	.huk-footer-right{ align-items:center; }
	.huk-footer-right-text{ text-align:center; }
}