/* ==========================================================================
   Club Homepage v2 — scoped "chv2-" namespace, safe to load alongside the
   legacy club_pages stylesheet bundle without colliding with it.
   ========================================================================== */

:root{
	--chv2-bg: #f5f6f8;
	--chv2-card-bg: #ffffff;
	--chv2-border: #e5e8ee;
	--chv2-text: #22262b;
	--chv2-text-muted: #6b7280;
	--chv2-accent: #ff8a00;
	--chv2-accent-dark: #d97400;
	--chv2-accent-soft: #fff3e2;
	--chv2-secondary: #2f5ea8;
	--chv2-secondary-dark: #24487f;
	--chv2-secondary-soft: #eaf1fb;
	--chv2-green: #2fa84f;
	--chv2-red: #e0483e;
	--chv2-radius: 12px;
	--chv2-radius-sm: 8px;
	--chv2-shadow: 0 2px 10px rgba(20, 24, 33, 0.06);
	--chv2-shadow-hover: 0 10px 26px rgba(20, 24, 33, 0.14);
	--chv2-gap: 22px;
}

.chv2-container{
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.chv2-section{
	padding: 44px 0;
	background: var(--chv2-bg);
}
.chv2-section + .chv2-section{
	border-top: 1px solid var(--chv2-border);
}

/* Three columns (spacer | title | action) instead of a plain flex row, so the
   title always sits dead-center of the section regardless of whether a
   sibling "More Events" link / edit actions exist next to it - a flex
   space-between only centers when both sides are balanced, which a lone
   title or a lone action never is. The empty first column exists purely to
   mirror the width of the action column so the title can't drift off-center. */
.chv2-section-head{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
}
.chv2-section-title{
	grid-column: 2;
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	color: var(--chv2-text);
	text-align: center;
}
.chv2-section-link{
	grid-column: 3;
	justify-self: end;
	font-size: 14px;
	font-weight: 600;
	color: var(--chv2-accent-dark);
	text-decoration: none;
	white-space: nowrap;
}
.chv2-section-link:hover{ color: var(--chv2-accent); text-decoration: underline; }
.chv2-section-actions{ grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 14px; }
.chv2-section-actions a{ color: var(--chv2-text-muted); cursor: pointer; font-size: 17px; }
.chv2-section-actions a:hover{ color: var(--chv2-accent); }

.chv2-empty-msg{
	width: 100%;
	text-align: center;
	padding: 30px 10px;
	color: var(--chv2-text-muted);
	background: var(--chv2-card-bg);
	border: 1px dashed var(--chv2-border);
	border-radius: var(--chv2-radius);
}

/* ---------- Hero (Home_Layout: video / grid / banner) ---------- */

.chv2-hero{ background: #fff; }

.chv2-hero-video{ position: relative; background:#000; }
.chv2-hero-media{ position: relative; line-height: 0; }
.chv2-hero-video-el{ width: 100%; max-height: 560px; object-fit: cover; display:block; }

.chv2-edit-fab{
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 5;
	background: rgba(255,255,255,0.92);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--chv2-shadow);
}
.chv2-edit-fab a{ color: var(--chv2-text); }
.chv2-edit-fab a:hover{ color: var(--chv2-accent); }

.chv2-hero-edit-form{
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

/* Grid tiles */
.chv2-hero-grid{ padding: 36px 0; }
.chv2-grid-tiles{
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	box-sizing: border-box;
}
.chv2-tile{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 150px;
	border-radius: var(--chv2-radius);
	color: #fff;
	text-align: center;
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}
.chv2-tile:hover{ transform: translateY(-4px); box-shadow: var(--chv2-shadow-hover); color:#fff; text-decoration:none; }
.chv2-tile i{ font-size: 34px; }
.chv2-tile-1{ background:#4f7cb0; }
.chv2-tile-2{ background:#6f9c46; }
.chv2-tile-3{ background:#e0a020; }
.chv2-tile-4{ background:#c2554a; }
.chv2-tile-5{ background:#3c8f95; }
.chv2-tile-6{ background:#5c5f7a; }

@media (max-width: 767px){
	.chv2-grid-tiles{ grid-template-columns: repeat(2, 1fr); }
}

/* Banner layout */
.chv2-hero-banner-grid{
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	display: grid;
	grid-template-columns: 3fr 1fr;
	gap: var(--chv2-gap);
	box-sizing: border-box;
}
.chv2-banner-carousel-wrap{ position: relative; }
.chv2-carousel .carousel-inner{ border-radius: var(--chv2-radius); overflow: hidden; }
.chv2-carousel .item img{
	width: 100%;
	height: 420px;
	object-fit: cover;
	background: #f0f0f0;
}

.chv2-hero-pom{ min-width: 0; }
.chv2-pom-card{
	background: var(--chv2-card-bg);
	border: 1px solid var(--chv2-border);
	border-radius: var(--chv2-radius);
	box-shadow: var(--chv2-shadow);
	padding: 16px;
	height: 100%;
	box-sizing: border-box;
}
.chv2-pom-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--chv2-text-muted);
	margin-bottom: 12px;
}
.chv2-pom-head a{ color: var(--chv2-text-muted); cursor: pointer; }
.chv2-pom-head a:hover{ color: var(--chv2-accent); }
.chv2-pom-body{ text-align: center; }
.chv2-pom-photo img{
	width: 100%;
	max-width: 190px;
	height: 190px;
	object-fit: cover;
	border-radius: var(--chv2-radius-sm);
	margin: 0 auto;
	display: block;
}
.chv2-pom-name{ font-weight: 700; color: var(--chv2-text); }
.chv2-pom-desc{ margin-top: 10px; }
.chv2-pom-meta{ font-size: 13px; color: var(--chv2-text-muted); margin-top: 4px; }
.chv2-pom-empty{ color: var(--chv2-text-muted); padding: 20px 0; }

@media (max-width: 900px){
	.chv2-hero-banner-grid{ grid-template-columns: 1fr; }
	.chv2-carousel .item img{ height: 260px; }
}

/* ---------- Alert bar ---------- */
.chv2-alert-bar{ background: var(--chv2-accent-soft); border-bottom: 1px solid var(--chv2-border); }
.chv2-alert-inner{
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 20px;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--chv2-accent-dark);
	font-weight: 600;
}

/* ---------- Card grid (events / recplay / leagues / news) ---------- */
.chv2-card-grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--chv2-gap);
}
@media (max-width: 1024px){ .chv2-card-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px){ .chv2-card-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .chv2-card-grid{ grid-template-columns: 1fr; } }

.chv2-card{
	background: var(--chv2-card-bg);
	border: 1px solid var(--chv2-border);
	border-radius: var(--chv2-radius);
	overflow: hidden;
	box-shadow: var(--chv2-shadow);
	transition: transform .2s ease, box-shadow .2s ease;
	display: flex;
	flex-direction: column;
}
.chv2-card:hover{ transform: translateY(-4px); box-shadow: var(--chv2-shadow-hover); }
.chv2-card-img-link{ position: relative; display: block; line-height: 0; }
.chv2-card-img{ width: 100%; height: 150px; object-fit: contain; background: #8b55e4; }
.chv2-badge{
	position: absolute;
	top: 10px;
	right: 10px;
	background: var(--chv2-green);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 20px;
}
.chv2-card-body{ padding: 14px 16px 16px; flex: 1; }
.chv2-card-title{ margin: 0 0 8px; font-size: 15px; line-height: 1.3; }
.chv2-card-title a{ color: var(--chv2-text); text-decoration: none; }
.chv2-card-title a:hover{ color: var(--chv2-accent-dark); }
.chv2-card-meta{ margin: 0; font-size: 12.5px; color: var(--chv2-text-muted); display: flex; flex-direction: column; gap: 4px; }
.chv2-card-meta i{ width: 14px; text-align: center; margin-right: 4px; color: var(--chv2-accent); }

/* ---------- Partners & Sponsors ----------
   Section backgrounds below are tinted from the club's own logo colors
   (see get_logo_theme_colors() / --chv2-accent-soft & --chv2-secondary-soft)
   instead of the flat page background, so a club's page reads as its own
   brand rather than every club sharing one look. */
.chv2-ps-section{ background: var(--chv2-accent-soft); }
.chv2-ps-wrap{ min-height: 40px; }
/* Flex + wrap instead of a grid: with a CSS grid's auto-fill, a couple of
   sponsor logos sit in the first columns and leave the rest of the row as
   dead empty space on the right. Flex-wrap with justify-content:center lets
   each row's actual cards (however many there are) center as a group. */
.chv2-ps-grid{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--chv2-gap);
}
.chv2-ps-card{
	flex: 1 1 110px;
	max-width: 130px;
	text-align: center;
	padding: 10px;
	background: var(--chv2-card-bg);
	border: 1px solid var(--chv2-border);
	border-radius: var(--chv2-radius);
	box-shadow: var(--chv2-shadow);
	transition: box-shadow .2s ease, transform .2s ease;
}
.chv2-ps-card:hover{ box-shadow: var(--chv2-shadow-hover); transform: translateY(-3px); }
.chv2-ps-checkbox{ display: block; margin: 0 auto 8px; }
/* Square, not a wide rectangle: a wide box favors wide-aspect logos and
   shrinks near-square ones (object-fit:contain fits to the tighter
   dimension), which is exactly the "some logos bigger than others" effect
   reported. A fixed square gives every logo, whatever its own aspect ratio,
   the same footprint to fit into. Sized close to the card's own width so the
   logo fills most of the box instead of floating in a lot of padding. */
.chv2-ps-img{ width: 90px; height: 90px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
/* Owl Carousel's own core CSS ships ".owl-carousel .owl-item img{width:100%}" (same
   specificity as the rule below - two classes + a tag), which has previously won the
   cascade tie and force-stretched these deliberately-sized logos/avatars into distorted
   ovals. !important is the one reliable way to guarantee OUR sizing wins regardless of
   stylesheet load order - this is not a general reset, just a targeted override for the
   two image containers Owl Carousel is known to wrap on this page. */
.chv2-ps-img img{ width: 100% !important; height: 100% !important; object-fit: contain; margin: 0 auto; display: block; }
.chv2-ps-body{ margin-top: 10px; }
.chv2-ps-body h3{ font-size: 16px; margin: 0 0 2px; }
.chv2-ps-select-bar{ margin-top: 10px; }
.chv2-ps-add-card{ display: flex; flex-direction: column; gap: 8px; max-width: 320px; margin: 0 auto 14px; text-align: center; }

/* Partners & Sponsors as an Owl Carousel (clubs with many logos) - the cards need a fixed
   slide width since Owl sizes each .owl-item explicitly rather than letting them wrap.
   .owl-stage is flex (default align-items:stretch), so every .owl-item already gets
   stretched to the height of the tallest one in the row - but that stretch stops at the
   .owl-item itself unless its child is told to fill it too. Without the two rules below,
   a card with more text under the logo (name/role/description) is visibly taller than a
   card with none, since the plain white .chv2-ps-card box only ever grows to fit its own
   content, not its stretched siblings. */
.chv2-ps-section .owl-carousel .chv2-ps-card{ margin: 0 5px; }
.chv2-ps-section .owl-stage{ display: flex; }
.chv2-ps-section .owl-item{ min-width: 130px; display: flex; }
.chv2-ps-section .owl-item .chv2-ps-card{ width: 100%; }

/* ---------- Testimonials ---------- */
.chv2-testimonials-section{ background: var(--chv2-secondary-soft); }
.chv2-testi-card{ text-align: center; padding: 20px; }
/* See the .chv2-ps-img img comment above - same Owl Carousel width:100% conflict, same fix. */
.chv2-testi-img img{ width: 84px !important; height: 84px !important; border-radius: 50%; object-fit: cover; margin: 0 auto 14px; display: block; }
.chv2-testi-text{ font-style: italic; color: var(--chv2-text); }

/* ---------- Owl Carousel nav (Partners & Sponsors / Testimonials) ----------
   Owl Carousel ships no button styling of its own - without this the prev/next
   controls render as bare "‹"/"›" text with no click target or position logic. */
.chv2-ps-section .owl-carousel,
.chv2-testimonials-section .owl-carousel{ position: relative; }
.chv2-ps-section .owl-nav,
.chv2-testimonials-section .owl-nav{
	position: absolute;
	top: 50%;
	left: -18px;
	right: -18px;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	pointer-events: none;
}
.chv2-testimonials-section .owl-nav{ top: 40%; }
.chv2-ps-section .owl-nav .owl-prev,
.chv2-ps-section .owl-nav .owl-next,
.chv2-testimonials-section .owl-nav .owl-prev,
.chv2-testimonials-section .owl-nav .owl-next{
	pointer-events: auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--chv2-card-bg);
	border: 1px solid var(--chv2-border);
	box-shadow: var(--chv2-shadow);
	color: var(--chv2-text);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.chv2-ps-section .owl-nav .owl-prev:hover,
.chv2-ps-section .owl-nav .owl-next:hover,
.chv2-testimonials-section .owl-nav .owl-prev:hover,
.chv2-testimonials-section .owl-nav .owl-next:hover{
	background: var(--chv2-accent);
	color: #fff;
	box-shadow: var(--chv2-shadow-hover);
}
.chv2-ps-section .owl-dots,
.chv2-testimonials-section .owl-dots{ text-align: center; margin-top: 16px; }
.chv2-ps-section .owl-dot,
.chv2-testimonials-section .owl-dot{ display: inline-block; }
.chv2-ps-section .owl-dot span,
.chv2-testimonials-section .owl-dot span{
	width: 8px;
	height: 8px;
	margin: 0 3px;
	background: var(--chv2-border);
	border-radius: 50%;
	display: inline-block;
	transition: background .15s ease;
}
.chv2-ps-section .owl-dot.active span,
.chv2-testimonials-section .owl-dot.active span{ background: var(--chv2-accent); }

@media (max-width: 600px){
	.chv2-ps-section .owl-nav,
	.chv2-testimonials-section .owl-nav{ left: -6px; right: -6px; }
}
.chv2-testi-author{ color: var(--chv2-text-muted); font-weight: 600; }

/* ---------- News ---------- */
.chv2-news-section{ background: var(--chv2-accent-soft); }
.chv2-news-card{
	display: flex;
	gap: 14px;
	background: var(--chv2-card-bg);
	border: 1px solid var(--chv2-border);
	border-radius: var(--chv2-radius);
	box-shadow: var(--chv2-shadow);
	padding: 16px;
}
.chv2-news-date{
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	border-radius: var(--chv2-radius-sm);
	background: var(--chv2-accent-soft);
	color: var(--chv2-accent-dark);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	line-height: 1.1;
}
.chv2-news-day{ font-size: 18px; }
.chv2-news-month{ font-size: 11px; text-transform: uppercase; }
.chv2-news-body h3{ margin: 0 0 6px; font-size: 15px; }
.chv2-news-body h3 a{ color: var(--chv2-text); text-decoration: none; }
.chv2-news-body h3 a:hover{ color: var(--chv2-accent-dark); }
.chv2-news-body p{ margin: 0 0 8px; font-size: 13px; color: var(--chv2-text-muted); }
.chv2-read-more{ font-size: 12.5px; font-weight: 600; color: var(--chv2-accent-dark); text-decoration: none; }
.chv2-read-more:hover{ text-decoration: underline; }

/* ---------- Shared forms / buttons ---------- */
.chv2-form-panel{
	background: var(--chv2-card-bg);
	border: 1px solid var(--chv2-border);
	border-radius: var(--chv2-radius);
	box-shadow: var(--chv2-shadow);
	padding: 18px;
	margin-top: 16px;
}
.chv2-form-panel h3{ margin-top: 0; }
.chv2-input, .chv2-form input[type="text"], .chv2-form input[type="file"]{
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid var(--chv2-border);
	border-radius: var(--chv2-radius-sm);
	margin-bottom: 10px;
	font-size: 13.5px;
}
.chv2-file-row{ margin-bottom: 10px; }
.chv2-form-actions{ display: flex; gap: 10px; margin-top: 6px; }
.chv2-btn{
	display: inline-block;
	padding: 8px 20px;
	border-radius: var(--chv2-radius-sm);
	border: 1px solid transparent;
	font-weight: 600;
	font-size: 13.5px;
	cursor: pointer;
}
.chv2-btn-primary{ background: var(--chv2-accent); color: #fff; }
.chv2-btn-primary:hover{ background: var(--chv2-accent-dark); }
.chv2-btn-ghost{ background: #fff; border-color: var(--chv2-border); color: var(--chv2-text); }
.chv2-btn-ghost:hover{ border-color: var(--chv2-text-muted); }
.chv2-btn-danger{ background: var(--chv2-red); color: #fff; }
.chv2-btn-danger:hover{ background: #c23a31; }