/*
 * aSS — a Ernesto Child Theme
 */

:root {
  /* Showcase & news polygon colour — mirrors --color-primary set in Customizer */
	--ps-accent: var(--color-primary);
}


/* ============================================================
   3. GLOBAL RESETS / SITE TWEAKS
   ============================================================ */

body {
	font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 300;
	letter-spacing: -0.02em;
}

/* Crisp sticky header — always white */
.site-header {
	background: #fff;
	border-bottom: 1px solid var(--border-light, #eee);
}

/* Remove default .container padding when sections go full-bleed */
#content {
	overflow-x: hidden;
}


/* ============================================================
   HERO SLIDER — aSS layout
   ============================================================ */

/* TODO */


/* ============================================================
   HP TILES — featured product + 2 content tiles
   Left col:  skyscraper product image
   Right col: bikini-contest tile (top) + gallery tile (bottom)
   ============================================================ */

.hp-tiles {
	padding: 2rem 0 3rem;
	background: var(--bg-alt, #f5f5f5);
}

/* 2-col grid, both columns span the same 2 implicit row tracks */
.hp-tiles__grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows:    1fr 1fr;
	gap:                   1rem;
	height:                65vh;
	min-height:            480px;
	max-height:            700px;
}

/* ── Left: product — spans both row tracks ──────────────── */

.hp-tiles__product {
	grid-column: 1;
	grid-row:    1 / 3;
	position:    relative;
	overflow:    hidden;
	border-radius: var(--radius, 4px);
	background:  var(--bg-body);
}

.hp-tiles__product-link {
	display:         block;
	height:          100%;
	position:        relative;
	text-decoration: none;
}

.hp-tiles__product-link img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.4s ease;
}

.hp-tiles__product-link:hover img {
	transform: scale(1.03);
}

/* Gradient scrim + caption at the bottom of the product tile */
.hp-tiles__product-caption {
	position:   absolute;
	bottom:     0;
	left:       0;
	right:      0;
	padding:    2rem 1.25rem 1.25rem;
	background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
	display:    flex;
	flex-direction: column;
	gap:        0.2rem;
}

.hp-tiles__product-name {
	font-family:    var(--font-heading);
	font-size:      clamp(1rem, 1.6vw, 1.3rem);
	font-weight:    600;
	letter-spacing: -0.01em;
	color:          #fff;
	text-shadow:    0 1px 3px rgba(0,0,0,0.35);
}

.hp-tiles__product-price {
	font-size: 0.875rem;
	color:     rgba(255,255,255,0.82);
}

/* Placeholder — shown when no featured product or no image */
.hp-tiles__placeholder {
	width:           100%;
	height:          100%;
	background:      linear-gradient(
		145deg,
		var(--color-primary,   #cc3366) 0%,
		var(--color-secondary, #9966cc) 100%
	);
	display:         flex;
	align-items:     center;
	justify-content: center;
}

/* ── Right: two stacked tiles ───────────────────────────── */

.hp-tiles__col {
	grid-column:    2;
	grid-row:       1 / 3;
	display:        flex;
	flex-direction: column;
	gap:            1rem;
}

.hp-tiles__tile {
	flex:         1;
	position:     relative;
	overflow:     hidden;
	border-radius: var(--radius, 4px);
	transition:   filter 0.25s ease;
}

.hp-tiles__tile:hover {
	filter: brightness(1.07);
}

.hp-tiles__tile-link {
	display:         flex;
	height:          100%;
	align-items:     flex-end;
	padding:         1.5rem;
	text-decoration: none;
}

.hp-tiles__tile-body {
	display:        flex;
	flex-direction: column;
	gap:            0.25rem;
}

.hp-tiles__tile-label {
	font-family:    var(--font-heading);
	font-size:      0.7rem;
	font-weight:    700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color:          rgba(255,255,255,0.7);
}

.hp-tiles__tile-title {
	font-family:    var(--font-heading);
	font-size:      clamp(1.4rem, 2.2vw, 1.9rem);
	font-weight:    300;
	letter-spacing: -0.02em;
	line-height:    1.1;
	color:          #fff;
	margin:         0;
}

.hp-tiles__tile-cta {
	display:        block;
	margin-top:     0.6rem;
	font-family:    var(--font-heading);
	font-size:      0.8rem;
	letter-spacing: 0.04em;
	color:          rgba(255,255,255,0.75);
}

/* Contest tile: primary → secondary */
.hp-tiles__tile--contest {
	background: linear-gradient(
		145deg,
		var(--color-primary,   #cc3366) 0%,
		var(--color-secondary, #9966cc) 100%
	);
}

/* Gallery tile: secondary → primary (inverted) */
.hp-tiles__tile--gallery {
	background: linear-gradient(
		145deg,
		var(--color-secondary, #9966cc) 0%,
		var(--color-primary,   #cc3366) 100%
	);
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 768px) {
	.hp-tiles__grid {
		grid-template-columns: 1fr;
		grid-template-rows:    auto auto auto;
		height:                auto;
		min-height:            0;
		max-height:            none;
	}

	.hp-tiles__product {
		grid-column: 1;
		grid-row:    1;
		height:      70vw;
		min-height:  260px;
	}

	.hp-tiles__col {
		grid-column:    1;
		grid-row:       2;
		flex-direction: row; /* side-by-side on tablet */
	}

	.hp-tiles__tile {
		min-height: 180px;
	}
}

@media (max-width: 480px) {
	.hp-tiles__col {
		flex-direction: column; /* stack on small phone */
	}

	.hp-tiles__tile {
		min-height: 150px;
	}
}

/* ── High-contrast overrides ────────────────────────────── */

body.high-contrast .hp-tiles__tile--contest,
body.high-contrast .hp-tiles__tile--gallery {
	background:  #000                          !important; /* !important: defeats gradient */
	border:      2px solid #fff               !important;
}

body.high-contrast .hp-tiles__tile-title,
body.high-contrast .hp-tiles__tile-label,
body.high-contrast .hp-tiles__tile-cta {
	color: #fff !important;
}

body.high-contrast .hp-tiles__product-caption {
	background: rgba(0,0,0,0.85) !important; /* !important: defeats gradient scrim */
}

/* ── Reduced motion ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.hp-tiles__product-link img {
		transition: none;
	}
	.hp-tiles__tile {
		transition: none;
	}
}


/* ============================================================
   HP NEWSLETTER — inline signup between hero and tiles
   Description text left · form fields right (desktop)
   ============================================================ */

.hp-newsletter {
	padding:    3rem 0 3.5rem;
	background: var(--bg-body);
	border-top: 3px solid var(--color-primary, #cc3366);
}

/* Strip card chrome from parent newsletter.css */
.hp-newsletter .ernesto-newsletter-form,
.hp-newsletter .ernesto-newsletter-shortcode {
	background: transparent !important; /* !important: overrides newsletter.css .ernesto-newsletter-form */
	border:     none        !important;
	box-shadow: none        !important;
	padding:    0           !important;
	margin:     0           !important;
}

/* Two-column: description (2fr) left, form (3fr) right */
@media (min-width: 768px) {
	.hp-newsletter .ernesto-newsletter-form {
		display:               grid;
		grid-template-columns: 2fr 3fr;
		gap:                   2rem 4rem;
		align-items:           center;
	}
}

/* ── Description: left column ──────────────────────────── */

.hp-newsletter .newsletter-description {
	font-family:    var(--font-heading);
	font-size:      clamp(1rem, 1.5vw, 1.15rem);
	font-weight:    300;
	letter-spacing: -0.01em;
	line-height:    1.65;
	color:          var(--text-main);
	margin:         0;
}

/* Brand label injected above the description */
.hp-newsletter .newsletter-description::before {
	content:        'aSS Newsletter';
	display:        block;
	font-family:    var(--font-heading);
	font-size:      0.68rem;
	font-weight:    700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color:          var(--color-primary, #cc3366);
	margin-bottom:  0.75rem;
}

/* ── Form: right column ─────────────────────────────────── */

.hp-newsletter .newsletter-form {
	display:        flex;
	flex-direction: column;
	gap:            0.75rem;
}

.hp-newsletter .newsletter-form .newsletter-label {
	font-family:    var(--font-heading);
	font-size:      0.78rem;
	font-weight:    600;
	letter-spacing: 0.04em;
	color:          var(--text-muted, #777);
	margin-bottom:  0.2rem;
}

.hp-newsletter .newsletter-form input[type="text"],
.hp-newsletter .newsletter-form input[type="email"] {
	background:    var(--bg-body);
	border:        1px solid var(--border-color, rgba(128,128,128,0.3));
	border-radius: var(--radius, 4px);
	padding:       0.6rem 0.875rem;
	font-family:   var(--font-body);
	font-size:     0.95rem;
	color:         var(--text-main);
	width:         100%;
	transition:    border-color 0.2s ease, box-shadow 0.2s ease;
}

.hp-newsletter .newsletter-form input[type="text"]:focus,
.hp-newsletter .newsletter-form input[type="email"]:focus {
	outline:      none;
	border-color: var(--color-primary, #cc3366);
	box-shadow:   0 0 0 3px rgba(204, 51, 102, 0.12);
}

/* Button — pill style matching tile CTAs */
.hp-newsletter .newsletter-submit {
	background:    var(--color-secondary, #9966cc) !important; /* !important: overrides newsletter.css --color-primary button */
	color:         var(--text-on-brand, #fff)      !important;
	border:        none                            !important;
	border-radius: 2rem                            !important;
	padding:       0.55rem 1.5rem                  !important;
	font-family:   var(--font-heading);
	font-size:     0.9rem                          !important;
	font-weight:   500                             !important;
	min-width:     0                               !important;
	box-shadow:    none                            !important;
	text-shadow:   none;
	cursor:        pointer;
	align-self:    flex-start;
	transition:    background 0.2s ease, transform 0.15s ease !important;
}

.hp-newsletter .newsletter-submit:hover {
	background: var(--color-secondary-hover, var(--color-secondary, #9966cc)) !important;
	transform:  translateY(-1px);
	box-shadow: none !important;
}

.hp-newsletter .newsletter-submit:disabled {
	opacity:   0.5    !important;
	transform: none   !important;
	cursor:    not-allowed;
}

/* Consent checkbox */
.hp-newsletter .consent-label {
	font-size: 0.8rem;
	color:     var(--text-muted, #888);
	gap:       0.5rem;
}

.hp-newsletter .consent-label a {
	color: var(--color-primary, #cc3366);
}

.hp-newsletter .consent-label input[type="checkbox"] {
	accent-color: var(--color-primary, #cc3366);
}

/* Status messages */
.hp-newsletter .newsletter-message {
	font-size:     0.875rem;
	border-radius: var(--radius, 4px);
}

/* ── Mobile ─────────────────────────────────────────────── */

@media (max-width: 767px) {
	.hp-newsletter {
		padding: 2rem 0 2.5rem;
	}

	.hp-newsletter .newsletter-description {
		margin-bottom: 1.5rem;
	}

	.hp-newsletter .newsletter-submit {
		align-self: stretch !important; /* !important: overrides flex-start on mobile */
		text-align: center;
	}
}

/* ── High-contrast overrides ────────────────────────────── */

body.high-contrast .hp-newsletter {
	border-top-color: #000 !important; /* !important: overrides --color-primary */
}

body.high-contrast .hp-newsletter .newsletter-description::before {
	color: #000 !important;
}

body.high-contrast .hp-newsletter .newsletter-submit {
	background:    #000 !important;
	color:         #fff !important;
	border:        2px solid #fff !important;
	border-radius: 0              !important;
}

body.high-contrast .hp-newsletter .newsletter-form input[type="text"],
body.high-contrast .hp-newsletter .newsletter-form input[type="email"] {
	border:     2px solid #000 !important;
	background: #fff           !important;
	color:      #000           !important;
}

/* ── Reduced motion ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.hp-newsletter .newsletter-submit {
		transition: none !important;
	}
}


/* ============================================================
   4. HP SHOWCASE — 3-column strip below the hero
   Col 1: orange polygon card (post 1)
   Col 2-3: plain text teasers (posts 2 & 3)
   ============================================================ */

/* ── Overlap the hero's bottom edge ─────────────────── */

.hp-showcase {
	width:      100%;
	position:   relative;
	z-index:    10;
	max-width:  1600px;
	margin-left:  auto;
	margin-right: auto;
	padding-left:  1rem;
	padding-right: 1rem;
}

.hp-showcase__grid {
	display: grid;
	grid-template-columns: 6fr 3fr 3fr;
	min-height: 360px;
	max-height: 420px;
	background: var(--bg-body, #fff);
}

/* ── Featured card (left) ────────────────────────────── */

.hp-showcase__primary {
	position:        relative;
	overflow:        hidden;
	display:         block;
	text-decoration: none;
	background-color: var(--ps-accent);
	background-size: cover;
	background-position: center right;
	/* rise above the grid's white background */
	margin-top: -80px;
	padding-top: 80px;
}

/* Smooth SVG-curve colour overlay — gentle S-curve right edge */
.hp-showcase__primary::before {
	content:    '';
	position:   absolute;
	inset:      0;
	background: var(--ps-accent);
	z-index:    1;
	clip-path:  url(#ps-leaf);
	/* mouse-out: plain ease-out — no overshoot, left edge stays put */
	transition: transform 0.45s ease-out;
	transform-origin: right center;
}

/* Hover: breathe the curve outward — spring only on the way IN */
.hp-showcase__primary:hover::before {
	transform:  scaleX(1.03);
	transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hp-showcase__primary-content {
	position:        relative;
	z-index:         2;
	width:           62%;        /* stay inside the polygon */
	height:          100%;
	padding:         0 2rem 2.5rem 2.5rem;
	display:         flex;
	flex-direction:  column;
	justify-content: space-between;
	color:           #fff;
}

.hp-showcase__arrow {
	display:     block;
	line-height: 1;
	flex-shrink: 0;
}

.hp-showcase__primary-title {
	font-family:   var(--font-heading);
	font-size:     clamp(1.15rem, 2vw, 1.75rem);
	font-weight:   300;
	line-height:   1.35;
	color:         #fff;
	margin:        auto 0;   /* vertically centres within flex-grow space */
	padding:       1.5rem 0;
	overflow-wrap: break-word;
	hyphens:       auto;
}

/* ── Shared "Read more" link ─────────────────────────── */

.hp-showcase__readmore {
	display:         inline-flex;
	align-items:     center;
	gap:             0.4rem;
	font-size:       0.875rem;
	font-weight:     500;
	text-decoration: none;
	color:           #fff;
	transition:      gap 0.2s ease;
}

.hp-showcase__primary:hover .hp-showcase__readmore,
.hp-showcase__secondary:hover .hp-showcase__readmore {
	gap: 0.7rem;
}

.hp-showcase__readmore-chevron {
	font-size: 1.1rem;
	line-height: 1;
}

/* ── Secondary text teasers (posts 2 & 3) ───────────── */

.hp-showcase__secondary {
	display:         flex;
	flex-direction:  column;
	justify-content: flex-end;
	padding:         2rem 2rem 2.5rem;
	text-decoration: none;
	color:           var(--text-main, #1a1a1b);
	border-left:     1px solid var(--border-light, #e0e0e0);
	transition:      background 0.2s ease;
}

/* Inline text-highlight on hover — follows each line's width */
.hp-showcase__secondary-title span {
	display:                  inline;
	background-color:         transparent;
	color:                    var(--text-heading, #000);
	padding:                  3px 8px;
	-webkit-box-decoration-break: clone;
	box-decoration-break:     clone;
	transition:               background-color 0.25s ease, color 0.25s ease;
}

.hp-showcase__secondary:hover .hp-showcase__secondary-title span {
	background-color: var(--ps-accent);
	color:            #fff;
}

a.hp-showcase__secondary:hover {
	text-decoration: none;
}

.hp-showcase__secondary-title {
	font-size:   clamp(0.95rem, 1.4vw, 1.15rem);
	font-weight: 300;
	line-height: 1.45;
	margin:      0 0 1.5rem;
	color:       var(--text-heading, #000);
}

.hp-showcase__secondary .hp-showcase__readmore {
	color: var(--text-main, #1a1a1b);
}


/* ============================================================
   5. HP NEWS — skyscraper + 2×2 card grid
   ============================================================ */

.hp-news {
	padding: 4rem 0 5rem;
}

/* ── Section header ──────────────────────────────────── */

.hp-news__header {
	display:         flex;
	align-items:     baseline;
	justify-content: space-between;
	margin-bottom:   2rem;
}

.hp-news__heading {
	font-family:    var(--font-heading);
	font-size:      clamp(2rem, 4.5vw, 3.25rem);
	font-weight:    300;
	letter-spacing: -0.03em;
	color:          var(--text-heading, #000);
	margin:         0;
}

.hp-news__seeall {
	display:         flex;
	align-items:     center;
	gap:             0.3rem;
	font-size:       0.9rem;
	font-weight:     500;
	text-decoration: none;
	color:           var(--text-main, #1a1a1b);
	white-space:     nowrap;
	transition:      color 0.2s ease;
}

.hp-news__seeall:hover {
	color: var(--ps-accent);
}

/* ── Main grid wrapper ───────────────────────────────── */

.hp-news__grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   3px;
	align-items:           stretch;
}

/* ── Skyscraper (left column) ────────────────────────── */

.hp-news__skyscraper {
	position:        relative;
	overflow:        hidden;
	display:         block;
	text-decoration: none;
	background:      var(--bg-alt, #e9ecef);
	min-height:      480px;
}

.hp-news__skyscraper > img {
	width:       100%;
	height:      100%;
	object-fit:  cover;
	display:     block;
	transition:  transform 0.55s ease;
}

.hp-news__skyscraper:hover > img {
	transform: scale(1.04);
}

/* Wave SVG — your exact path, closed into filled shape, sweeps up on hover */
.hp-news__skyscraper-wave {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     110%;   /* overshoot so the wave top clears the card edge */
	fill:       var(--ps-accent);
	z-index:    1;
	transform:  translateY(65%);
	transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.hp-news__skyscraper:hover .hp-news__skyscraper-wave {
	transform: translateY(-5%);  /* push past top edge — fully filled */
}

/* Text overlay — sits above the wave (z-index 2) */
.hp-news__skyscraper-overlay {
	position:        absolute;
	bottom:          0;
	left:            0;
	right:           0;
	padding:         2rem 2rem 1.75rem;
	background:      transparent;
	color:           #fff;
	z-index:         2;
}

.hp-news__date {
	display:     block;
	font-size:   0.78rem;
	font-weight: 400;
	opacity:     0.9;
	margin-bottom: 0.4rem;
	letter-spacing: 0.03em;
}

.hp-news__skyscraper-title {
	font-family: var(--font-heading);
	font-size:   clamp(1rem, 1.6vw, 1.4rem);
	font-weight: 300;
	line-height: 1.35;
	color:       #fff;
	margin:      0;
}

/* ── Side grid — 2×3 smaller cards ──────────────────── */

.hp-news__side-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   3px;
}

.hp-news__card {
	position:        relative;
	overflow:        hidden;
	display:         block;
	text-decoration: none;
	background:      var(--bg-alt, #e9ecef);
	aspect-ratio:    4 / 3;
}

.hp-news__card > img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.45s ease;
}

.hp-news__card:hover > img {
	transform: scale(1.06);
}

/* Gradient overlay + text at the bottom of each card */
.hp-news__card-overlay {
	position:   absolute;
	inset:      0;
	display:    flex;
	flex-direction: column;
	justify-content: flex-end;
	padding:    1rem 1rem 0.9rem;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.85) 0%,
		rgba(0, 0, 0, 0.55) 40%,
		rgba(0, 0, 0, 0.10) 70%,
		transparent         100%
	);
	color: #fff;
}

.hp-news__card-date {
	display:      block;
	font-size:    0.7rem;
	font-weight:  400;
	opacity:      0.85;
	margin-bottom: 0.25rem;
	letter-spacing: 0.03em;
}

.hp-news__card-title {
	font-family: var(--font-heading);
	font-size:   clamp(0.8rem, 1.1vw, 0.95rem);
	font-weight: 400;
	line-height: 1.35;
	color:       #fff;
	margin:      0;
}

/* Placeholder when no featured image is available */
.hp-news__img-placeholder {
	width:      100%;
	height:     100%;
	background: var(--bg-alt, #e9ecef);
}


/* ============================================================
   6. RESPONSIVE
   ============================================================ */

/* ── Tablet (≤ 1024px) ───────────────────────────────── */
@media (max-width: 1024px) {
	.hp-showcase__grid {
		grid-template-columns: 3fr 2fr 2fr;
	}

	.hp-showcase__primary-content {
		width: 70%;
	}
}

/* ── Small tablet / large phone (≤ 768px) ───────────── */
@media (max-width: 768px) {
	/* Stack showcase vertically */
	.hp-showcase__grid {
		grid-template-columns: 1fr;
		max-height: none;
	}

	.hp-showcase__primary {
		min-height: 280px;
	}

	/* On mobile the curve covers the full card — no right-edge cutoff */
	.hp-showcase__primary::before {
		clip-path: none;
		transition: none;
	}

	.hp-showcase {
		margin-top: 0;
	}

	.hp-showcase__primary {
		margin-top: 0;
		padding-top: 0;
	}

	.hp-showcase__primary-content {
		width:         100%;
		padding-top:   1.5rem;
		padding-bottom: 1.5rem;
	}

	.hp-showcase__secondary {
		border-left:  none;
		border-top:   1px solid var(--border-light, #e0e0e0);
		min-height:   120px;
	}

	/* Stack news grid */
	.hp-news__grid {
		grid-template-columns: 1fr;
	}

	.hp-news__skyscraper {
		aspect-ratio: 16 / 9;
		min-height:   260px;
	}
}

/* ── Phone (≤ 480px) ─────────────────────────────────── */
@media (max-width: 480px) {
	.hp-news__side-grid {
		grid-template-columns: 1fr;
	}

	.hp-news__card {
		aspect-ratio: 16 / 9;
	}
}


/* ============================================================
   7. PARENT THEME OVERRIDES
   ============================================================ */

/* Slider arrow button positions (belt-and-suspenders over parent theme) */
.slider-arrow-prev {
	left:  1.5rem !important;
	right: auto  !important;
}

.slider-arrow-next {
	right: 1.5rem !important;
	left:  auto  !important;
}

/* Custom logo-link is replaced by .ass-brand in header.php; these guards are
   retained as a fallback in case the Customizer logo upload is ever used. */
.custom-logo-link img,
.custom-logo-link:hover img,
.custom-logo-link:focus img {
	transform:  none !important;
	box-shadow: none !important;
	filter:     none !important;
	opacity:    1    !important;
	transition: none !important;
}


/* ══════════════════════════════════════════════════════════════
   HIGH CONTRAST — ernesto-pf specific
   Hero slider layout is handled by shared-child-a11y.css.
   These rules convert hp-showcase and hp-news grids into plain
   vertical lists of horizontal cards (text left, image right).
   ══════════════════════════════════════════════════════════════ */

/* Description highlight: remove coloured background; underline instead */
body.high-contrast .slide-desc-hl {
	background-color: transparent     !important;
	color:            #000066         !important;
	text-decoration:  underline solid #000066 2px !important;
	padding:          0               !important;
}

/* ── hp-showcase → horizontal card list ────────────────────── */

/* Reset the showcase grid to a flex column */
body.high-contrast .hp-showcase__grid {
	display:               flex   !important;
	flex-direction:        column !important;
	gap:                   1rem   !important;
	grid-template-columns: none   !important;
}

/* Primary card: horizontal (text left, image right) */
body.high-contrast .hp-showcase__primary {
	display:        flex          !important;
	flex-direction: row           !important;
	min-height:     200px;
	background:     #FFF9E5       !important;
	border:         2px solid #000066 !important;
	clip-path:      none          !important;   /* remove polygon clip */
}

/* Primary card image → right 42% */
body.high-contrast .hp-showcase__primary::before {
	display: none !important;   /* remove polygon pseudo-element */
}

body.high-contrast .hp-showcase__primary-content {
	flex:       1       !important;
	order:      1       !important;
	position:   relative !important;
	color:      #000066 !important;
	padding:    1.5rem  !important;
}

body.high-contrast .hp-showcase__primary-title,
body.high-contrast .hp-showcase__primary .hp-showcase__readmore,
body.high-contrast .hp-showcase__primary .hp-showcase__arrow {
	color: #000066 !important;  /* now on light bg — navy text */
}

/* Secondary cards (right column) → each becomes a horizontal row */
body.high-contrast a.hp-showcase__secondary {
	display:        flex          !important;
	flex-direction: row           !important;
	min-height:     160px;
	background:     #FFF9E5       !important;
	border:         2px solid #000066 !important;
	box-shadow:     none          !important;
}

body.high-contrast .hp-showcase__secondary-title {
	flex:    1   !important;
	order:   1   !important;
	padding: 1.5rem !important;
}

/* Remove the hover highlight span background */
body.high-contrast .hp-showcase__secondary-title span,
body.high-contrast .hp-showcase__secondary:hover .hp-showcase__secondary-title span {
	background-color: transparent !important;
	color:            #000066     !important;
	padding:          0           !important;
}

/* ── hp-news → horizontal card list ────────────────────────── */

/* Reset the news grid to flex column */
body.high-contrast .hp-news__skyscraper,
body.high-contrast [class*="hp-news__grid"] {
	display:               flex   !important;
	flex-direction:        column !important;
	gap:                   1rem   !important;
	grid-template-columns: none   !important;
}

/* News/skyscraper cards: horizontal */
body.high-contrast [class*="hp-news__card"],
body.high-contrast [class*="hp-card"],
body.high-contrast .hp-news__skyscraper-card {
	display:        flex          !important;
	flex-direction: row           !important;
	min-height:     160px;
	box-shadow:     none          !important;
	outline:        2px solid #000066 !important;
	background:     #FFF9E5       !important;
}

body.high-contrast [class*="hp-news__card"] [class*="__img"],
body.high-contrast [class*="hp-card"] [class*="__img"],
body.high-contrast .hp-news__skyscraper-card [class*="__img"] {
	flex:         0 0 42% !important;
	order:        2       !important;
	aspect-ratio: auto    !important;
}

body.high-contrast [class*="hp-news__card"] [class*="__img"] img,
body.high-contrast [class*="hp-card"] [class*="__img"] img,
body.high-contrast .hp-news__skyscraper-card [class*="__img"] img {
	height:     100%;
	object-fit: cover;
}

body.high-contrast [class*="hp-news__card"] [class*="__body"],
body.high-contrast [class*="hp-card"] [class*="__body"] {
	flex:  1 !important;
	order: 1 !important;
}

/* @media (prefers-contrast: high) — mirrors body.high-contrast */
@media (prefers-contrast: high) {
	.slide-desc-hl {
		background-color: transparent !important;
		color:            #000066     !important;
		text-decoration:  underline solid #000066 2px !important;
		padding:          0 !important;
	}

	.hp-showcase__grid {
		display: flex !important;
		flex-direction: column !important;
		gap: 1rem !important;
	}

	.hp-showcase__primary {
		display: flex !important;
		flex-direction: row !important;
		background: #FFF9E5 !important;
		border: 2px solid #000066 !important;
		clip-path: none !important;
	}

	.hp-showcase__primary::before { display: none !important; }

	.hp-showcase__primary-title { color: #000066 !important; }

	a.hp-showcase__secondary {
		display: flex !important;
		flex-direction: row !important;
		background: #FFF9E5 !important;
		border: 2px solid #000066 !important;
		box-shadow: none !important;
	}

	.hp-showcase__secondary-title span,
	.hp-showcase__secondary:hover .hp-showcase__secondary-title span {
		background-color: transparent !important;
		color: #000066 !important;
		padding: 0 !important;
	}

	[class*="hp-news__card"],
	[class*="hp-card"] {
		display: flex !important;
		flex-direction: row !important;
		box-shadow: none !important;
		outline: 2px solid #000066 !important;
	}

	[class*="hp-news__card"] [class*="__img"],
	[class*="hp-card"] [class*="__img"] {
		flex: 0 0 42% !important;
		order: 2 !important;
		aspect-ratio: auto !important;
	}

	[class*="hp-news__card"] [class*="__body"],
	[class*="hp-card"] [class*="__body"] {
		flex: 1 !important;
		order: 1 !important;
	}
}