/* =============================================================================
   11-homepage.css
   Homepage (template_homepage.php): reveal cards, mailing list, blog cards.

   Split out of style.css, which had grown to 3,647 lines. Loaded via
   wp_enqueue_style() in inc/enqueue.php - the load ORDER there matches the
   numeric filename order, and matches the order these rules appeared in the
   original file, so the cascade is unchanged.
   ============================================================================= */
/* ==========================================================================
   || HOMEPAGE 
   (template_homepage.php) 
========================================================================== */

/* ==========================================================================
   REVEAL CARDS
   Default state (and all touch devices): everything visible.

   How it works: .fade_front and .fade_back sit one after the other in normal
   flow, so the card's height always accounts for BOTH — it is already big
   enough for the revealed copy at rest. .fade_front never hides; it only
   recolours to grey when the card inverts to beige. Hover just fades
   .fade_back in. Opacity is a paint-only property, so nothing reflows, no
   neighbours move, and it behaves identically going in and coming out.

   Put anything you want revealed on hover inside .fade_back — extra copy,
   the CTA, both. Anything in .fade_front stays visible the whole time.
   ========================================================================== */

/* IMPORTANT — the theme sets `.container { position: relative; z-index: 99 }`,
   so every section's container is its own stacking context, all sitting at the
   same level. An expanded card's z-index only applies *inside* its own
   container, so it can never rise above a later section — it renders behind
   "Never miss a job". Lifting this one container above the rest fixes it. */

#home_services_cards {
	padding: 20px 0px 40px;
}
#home_services_cards>.container::before {
	content: "";
	display: block;
	height: 1px;
	background-color: var(--js-purple);
	margin-bottom: 30px;
}
#home_services_cards>.container>h1 {
	margin-bottom: 38px;
}

.fade_cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: stretch;
	gap: 15px;
}
.fade_card {
	display: block;
	position: relative;
	border-radius: 20px;
	border: 2px solid transparent;
	text-decoration: none;
	color: var(--js-white);
	background-color: var(--js-grey);
	overflow: hidden;
	transition:
		background-color 0.3s ease-in-out,
		border-color 0.3s ease-in-out,
		box-shadow 0.3s ease-in-out;
}
.fade_card_inner {
	padding: 15px 20px;
	height: 100%;
}
.fade_card h3 {
	font-family: "effrabold";
	font-size: 24pt;
	line-height: 28pt;
	color: var(--js-white);
	border-bottom: 2px solid currentColor;
	padding-bottom: 2px;
	margin: 0px 0 16px;
	letter-spacing: -0.01em;
	transition: color 0.3s ease-in-out;
}
.fade_card p {
	font-family: "effraregular";
	font-size: 15pt;
	line-height: 22pt;
	color: var(--js-white);
	margin: 0;
	transition: color 0.3s ease-in-out;
}
.fade_card p strong {
	font-family: "effrabold";
}

/* --- Badge row -----------------------------------------------------------
   Every card carries a .card_flags row, even when it holds no badge. The row
   reserves a fixed height, so headings sit at the same y-position right across
   the grid whether a card is badged or not — add or remove a badge later and
   nothing else shifts.
   -------------------------------------------------------------------------- */
.card_flags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-height: 26px;
	/* height of one .badge_sm — this is what aligns the headings */
	margin-bottom: 3px;
}
.fade_back .card_cta {
	display: inline-block;
	font-family: "effrabold";
	font-size: 14.5pt;
	line-height: 20pt;
	margin-top: 10px;
	color: var(--js-white);
	border-bottom: 2px solid currentColor;
	padding-bottom: 2px;
	transition: color 0.3s ease-in-out;
}
/* Touch / no-hover default: the two blocks simply follow each other */
.fade_back {
	margin-top: 10px;
}
/* Card colours */
.fade_card.fade_purple {
	background-color: var(--js-purple);
}
.fade_card.fade_blue {
	background-color: var(--js-blue);
}
.fade_card.fade_orange {
	background-color: var(--js-orange);
}
.fade_card.fade_yellow {
	background-color: var(--js-yellow);
}

/* --- Reveal on hover — pointer devices only -----------------------------
   .fade_front stays visible at all times; it just recolours to grey when the
   card inverts to beige. .fade_back sits BELOW it in normal flow and holds
   its space permanently — it is only ever faded in and out, never added to
   or removed from the layout. So the card is already tall enough for both
   blocks at rest, nothing reflows on hover, and the behaviour is identical
   going in and coming out.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
	.fade_back {
		opacity: 0;
		transition: opacity 0.3s ease-in-out;
	}
	.fade_card:hover .fade_back,
	.fade_card:focus-within .fade_back {
		opacity: 1;
	}
	/* Invert to beige */
	.fade_card:hover,
	.fade_card:focus-within {
		background-color: var(--js-beige);
		box-shadow: 0 14px 32px rgba(0, 0, 0, 0.13);
	}
	.fade_card:hover p,
	.fade_card:focus-within p {
		color: var(--js-grey);
	}
	.fade_purple:hover,
	.fade_purple:focus-within {
		border-color: var(--js-purple);
	}
	.fade_purple:hover h3,
	.fade_purple:focus-within h3,
	.fade_purple:hover .card_cta,
	.fade_purple:focus-within .card_cta {
		color: var(--js-purple);
	}
	.fade_blue:hover,
	.fade_blue:focus-within {
		border-color: var(--js-blue);
	}
	.fade_blue:hover h3,
	.fade_blue:focus-within h3,
	.fade_blue:hover .card_cta,
	.fade_blue:focus-within .card_cta {
		color: var(--js-blue);
	}
	.fade_orange:hover,
	.fade_orange:focus-within {
		border-color: var(--js-orange);
	}
	.fade_orange:hover h3,
	.fade_orange:focus-within h3,
	.fade_orange:hover .card_cta,
	.fade_orange:focus-within .card_cta {
		color: var(--js-orange);
	}
	.fade_yellow:hover,
	.fade_yellow:focus-within {
		border-color: var(--js-yellow);
	}
	.fade_yellow:hover h3,
	.fade_yellow:focus-within h3,
	.fade_yellow:hover .card_cta,
	.fade_yellow:focus-within .card_cta {
		color: var(--js-yellow);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fade_card,
	.fade_card h3,
	.fade_card p,
	.fade_front,
	.fade_back,
	.fade_back .card_cta {
		transition: none;
	}
}

/* --- Cards responsive --- */

@media only screen and (max-width: 1100px) {
	.fade_cards {
		grid-template-columns: repeat(2, 1fr);
	}
	.fade_card h3 {
		font-size: 22pt;
		line-height: 26pt;
	}
}

@media only screen and (max-width: 650px) {
	.fade_cards {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	#home_services_cards {
		padding: 10px 0 60px;
	}
	.fade_card_inner {
		padding: 26px 24px 28px;
	}
	.fade_card h3 {
		font-size: 20pt;
		line-height: 24pt;
		margin-bottom: 12px;
	}
	.fade_card p {
		font-size: 14pt;
		line-height: 21pt;
	}
	/* Narrow desktop windows still match (hover: hover) — show everything so
	   nothing is hidden behind a hover a phone-width visitor may never trigger */
	.fade_front,
	.fade_back {
		opacity: 1 !important;
	}
	.fade_back {
		margin-top: 16px;
	}
}

/* --- Mailing list --- */
#home_mailing {
	position: relative;
	padding: 5px 0;
	margin: 5px 0px;
}
/* The separator line — sits inside the container so it lines up with the
   content above and below rather than running the full window width. 
#home_mailing > .container::before, 
#home_mailing > .container::after { 
	content: "";
	display: block;
	height: 1px;
	background-color: var(--js-purple);
	margin: 10px 0px;
}
*/
/* --- Blogs --- */
#home_blogs {
	padding: 30px 0;
	/* background-color: var(--js-beige); */
}
/* #home_blogs > .container::before, 
#home_blogs > .container::after { 
	content: "";
	display: block;
	height: 1px;
	background-color: var(--js-purple);
	margin: 30px 0px;
} */
.blogs_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 35px;
}
.blogs_head h1 {
	margin-bottom: 0;
}
.blogs_head .blogs_all {
	font-size: 13pt;
	line-height: 18pt;
	padding: 10px 18px;
	margin-bottom: 0;
	white-space: nowrap;
}
.blog_cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.blog_card {
	display: block;
	border: 1px solid #e4e0d9;
	border-radius: 18px;
	overflow: hidden;
	text-decoration: none;
	background-color: #fff;
	transition:
		box-shadow 0.2s ease-in-out,
		transform 0.2s ease-in-out;
}
.blog_card:hover,
.blog_card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.1);
}
.blog_thumb {
	background-color: var(--js-beige);
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.blog_thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.blog_body {
	padding: 22px 24px 26px;
}
.blog_date {
	font-family: "effraregular";
	font-size: 11pt;
	color: var(--js-grey);
}
.blog_body h3 {
	font-family: "effrabold";
	font-size: 17pt;
	line-height: 22pt;
	color: #000;
	margin: 8px 0 10px;
}
.blog_body p {
	font-size: 13pt;
	line-height: 18pt;
	color: var(--js-grey);
	margin: 0;
}
.blog_read {
	display: inline-block;
	font-family: "effrabold";
	font-size: 13pt;
	color: var(--js-blue);
	margin-top: 14px;
	border-bottom: 2px solid currentColor;
}

/* --- Homepage responsive ------------------------------------------------- */

/* Tablet landscape / small laptop — 2 columns */
@media only screen and (max-width: 1100px) {
	.service_cards {
		grid-template-columns: repeat(2, 1fr);
	}
	.blog_cards {
		grid-template-columns: repeat(2, 1fr);
	}
	#home_intro h2,
	#home_services .services_title {
		font-size: 26pt;
		line-height: 30pt;
	}
}

/* Tablet portrait */
@media only screen and (max-width: 850px) {
	.mailing_inner {
		flex-direction: column;
		align-items: flex-start;
	}
	.blogs_head {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Phones — single column, cards fully expanded */
@media only screen and (max-width: 650px) {
	.service_cards,
	.blog_cards {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	#home_intro {
		padding: 45px 0 20px;
	}
	#home_services {
		padding: 25px 0 60px;
	}
	#home_blogs {
		padding: 55px 0;
	}
	#home_intro h2,
	#home_services .services_title {
		font-size: 22pt;
		line-height: 26pt;
	}
	.service_card_inner {
		padding: 24px 22px;
	}
	.service_card h3 {
		font-size: 18pt;
		line-height: 22pt;
		margin-bottom: 12px;
	}
	.social_links {
		flex-direction: column;
	}
	.social_link {
		justify-content: center;
	}
}