/* =============================================================================
   11-homepage.css — template_homepage.php
   The four reveal cards, and the blog row's settings.
   ============================================================================= */

#home_services_cards {
	padding: 0 0 2.5rem;
}

/* --- Reveal cards ---------------------------------------------------------
   A coloured card whose second half (.fade_back) is hidden until hover, then
   the card inverts to beige with the brand colour as text. On touch screens
   there is no hover, so both halves simply sit one under the other — that is
   the DEFAULT below, and the hover behaviour is added inside a
   @media (hover: hover) query rather than the other way round.
   -------------------------------------------------------------------------- */
.fade_cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: stretch;
	gap: 1.5rem;
	margin-top: 1.8rem;
}

.fade_card {
	display: block;
	position: relative;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: 20px;
	text-decoration: none;
	color: var(--js-white);
	background-color: var(--js-grey);
	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: 0.9375rem 1.25rem;
	height: 100%;
}

.fade_card h3 {
	font-size: 2rem;
	line-height: 1.15;
	color: var(--js-white);
	border-bottom: 2px solid currentColor;
	padding-bottom: 2px;
	margin: 0 0 1rem;
	letter-spacing: -0.01em;
	transition: color 0.3s ease-in-out;
}

.fade_card p {
	font-size: 1.25rem;
	line-height: 1.45;
	color: var(--js-white);
	margin: 0;
	transition: color 0.3s ease-in-out;
}

.fade_back {
	margin-top: 0.625rem;
}

.fade_back .card_cta {
	display: inline-block;
	font-family: var(--js-font-bold);
	font-size: 1.25rem;
	line-height: 1.35;
	margin-top: 0.625rem;
	color: var(--js-white);
	border-bottom: 2px solid currentColor;
	padding-bottom: 2px;
	transition: color 0.3s ease-in-out;
}

/* Every card carries this row, empty or not, so the headings below it line up
   across the four cards whether or not a card has a badge. */
.card_flags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-height: 26px;
	margin-bottom: 3px;
}

/* =============================================================================
   STAY IN THE LOOP (#socials-box)
   A tinted band holding two columns: what the mailing list is on the left, the
   things to click on the right. The tint is doing real work - it marks the
   section as an ask rather than more body copy, and it gives the white chips
   something to sit on.

   The band is the layout, not the section: keeping the padding and background
   on .socials_band means the rounded panel stays inside the 1200px container
   instead of running edge to edge.
   ============================================================================= */
#socials-box {
	padding: 0 0 1rem;
}

.socials_band {
	display: grid;
	/* auto, not a fraction, for the second column: the buttons only need to be
	   as wide as their widest row, and an auto track is exactly that wide - so
	   the chips finish flush with the band's padding instead of trailing a
	   column's worth of empty tint after them. The text column takes whatever
	   is left. */
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 3rem;
	align-items: center;
	padding: 1.5rem;
	border-radius: 14px;
	background-color: var(--js-purple-tint);
}

.socials_intro h3 {
	margin-top: 0;
	margin-bottom: 0.5rem;
}

/* THE FIX THAT MATTERS MOST HERE. Before this the paragraph ran the full
   1200px - about 140 characters a line, where comfortable reading is 60-75.
   ch units are the right tool: 1ch is the width of a "0" in the current font,
   so the cap tracks the font size instead of being a pixel guess that only
   holds at one size. */
.socials_intro p {
	max-width: 60ch;
	/* margin-bottom: 0.4rem; */
}

.socials_intro .callout_label {
	color: #434647;
	/* margin-top: 0.3rem; */
	font-size: 0.5rem;
}

.socials_actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}

/* --- The mailing list button ----------------------------------------------
   Solid purple, because it is the one thing this section is asking for. The
   social links below are outline chips, so the eye gets an order to read them
   in - before this they were all the same chip and nothing led.
   -------------------------------------------------------------------------- */
.socials_mailing {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem;
	font-size: 1.125rem;
	margin-bottom: 0.25rem;
}

.socials_mailing i {
	font-size: 1.25rem;
	line-height: 1;
}

.socials_follow {
	margin: 0;
	color: var(--js-grey);
	font-size: 1.2rem;
	line-height: 1.4;
}

/* --- The social chips ------------------------------------------------------ */
.socials_list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.socials_item {
	margin: 0;
	padding: 0;
	list-style: none;
	/* Switches off the ul.special tick graphic from 02-base.css. */
	background-image: none;
}

/* inline-flex, not the three-track grid this used to be. That grid had an
   arrow column which the markup never filled, so every chip carried a column's
   worth of dead space after its label - which is what made the row look
   badly fitted. Flex sizes each chip to its own contents. */
.socials_link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.75rem 0.4rem 0.4rem;
	border: 1px solid var(--js-purple);
	border-radius: 10px;
	background-color: var(--js-white);
	color: var(--js-grey);
	font-size: 1.0625rem;
	line-height: 1.3;
	text-decoration: none;
	transition: transform 0.15s ease-in-out, border-color 0.15s ease-in-out,
		box-shadow 0.15s ease-in-out, color 0.15s ease-in-out;
}

.socials_link:hover,
.socials_link:focus-visible {
	transform: translateY(-2px);
	color: var(--js-black);
	border-color: var(--js-purple-ink);
	box-shadow: 0 8px 18px rgba(147, 88, 163, 0.18);
}

.socials_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background-color: var(--js-purple-tint);
	color: var(--js-purple-ink);
	font-size: 1.125rem;
	line-height: 1;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.socials_link:hover .socials_icon,
.socials_link:focus-visible .socials_icon {
	background-color: var(--js-purple-ink);
	color: var(--js-white);
}

.socials_label {
	font-family: var(--js-font-bold);
}

/* --- 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); }

/* --- The hover reveal -----------------------------------------------------
   (hover: hover) and (pointer: fine) means "a real pointing device", which
   keeps this off phones and tablets. :focus-within does the same job for
   keyboard users, since the card contains a link.
   -------------------------------------------------------------------------- */
@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;
	}

	.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-ink);
	}

	.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-ink);
	}

	.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-ink);
	}
}

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

/* --- Blog row -------------------------------------------------------------
   Only variables: the card styling itself is in 07-blog-cards.css.
   -------------------------------------------------------------------------- */
#home_blogs {
	padding: 1.875rem 0;
	--blog_cols: 4;
	--blog_thumb_ratio: 16 / 9;
	--blog_body_pad: 16px 18px 20px;
	--blog_text_lines: 2;
	--read_more_colour: var(--js-purple);
}

/* ============================================================================= */

@media (max-width: 1000px) {
	/* One column: the buttons drop under the text rather than being squeezed
	   into half a narrow screen. */
	.socials_band {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.75rem;
		padding: 2rem;
	}

	/* The cap is only there to stop a long line on a wide screen; at this width
	   the column is already narrower than 58ch and the cap would just strand
	   space on the right. */
	.socials_intro p {
		max-width: none;
	}

	.fade_cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.fade_card h3 {
		font-size: 1.75rem;
		line-height: 1.2;
	}
}

@media (max-width: 750px) {
	#socials-box {
		padding: 2rem 0;
	}

	.socials_band {
		padding: 1.5rem;
		border-radius: 12px;
	}

	/* Full width so the main action is a comfortable tap target, and so it
	   doesn't sit looking stranded beside the edge of a phone screen. */
	.socials_cta {
		width: 100%;
		justify-content: center;
	}

	.fade_cards {
		grid-template-columns: 1fr;
		gap: 1.125rem;
	}

	#home_services_cards {
		padding: 0.625rem 0 3.75rem;
	}

	#home_blogs {
		padding: 3.4375rem 0;
	}

	.fade_card_inner {
		padding: 1.625rem 1.5rem 1.75rem;
	}

	.fade_card h3 {
		font-size: 1.5rem;
		line-height: 1.2;
		margin-bottom: 0.75rem;
	}

	.fade_card p {
		font-size: 1.125rem;
		line-height: 1.5;
	}

	/* A narrow desktop window still matches (hover: hover), so force both
	   halves visible here — nothing should hide behind a hover that a
	   phone-width visitor may not be able to trigger. */
	.fade_back {
		opacity: 1 !important;
		margin-top: 1rem;
	}
}