/**
 * CloneMyKey FAQ — homepage replica styles.
 *
 * Reproduces the two hard-coded homepage FAQ presentations so the same content
 * can be driven from the FAQ repository (and therefore stay in sync with the
 * FAQPage schema) without any visual change.
 *
 *   .cmk-faq-tiles  — the blue-bordered tile grid   (was .quad-row / et_pb_row_12..24)
 *   .cmk-faq-cards  — the grey horizontal card strip (was .et_pb_row_70 / et_pb_text_42..50)
 *
 * Values below are lifted verbatim from the live Divi output.
 */

/* =======================================================================
 * 1. TILE STRIP  (blue border, one question per tile, horizontal scroll)
 *
 * The live homepage renders this as a SINGLE horizontally-scrolling row:
 * the section is `display:flex; overflow-x:scroll` and each tile is an
 * inline-block row with a fixed height, so the tiles never wrap onto a
 * second line. Reproduced verbatim below.
 *
 *   section  #faqtiles / .et_pb_section_3  -> .cmk-faq-tiles__strip
 *   row      .et_pb_row_12 .quad-row       -> .cmk-faq-tile
 *   header   .et_pb_blurb_16 h3            -> .cmk-faq-tile__q
 * ==================================================================== */

.cmk-faq-tiles {
	/* Full-bleed: break out of the Divi row/column that wraps the
	   shortcode so the strip spans the whole viewport, as it does today. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	position: relative;
	background-color: rgba(232, 232, 232, 0.57);
	border-top: 3px solid #e8e8e8;
	border-bottom: 3px solid #e8e8e8;
	box-sizing: border-box;
}

.cmk-faq-tiles__heading {
	text-align: center;
}

/* The scroller itself. `display:flex` with NO wrapping is what keeps every
   tile on one line; `overflow-x:scroll` provides the horizontal movement. */
.cmk-faq-tiles__strip {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	overflow-x: scroll;
	overflow-y: hidden;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding: 16px 10px 6px 0;
	box-sizing: border-box;
}

/* Hide the scrollbar, exactly as the theme does (`div::-webkit-scrollbar`). */
.cmk-faq-tiles__strip::-webkit-scrollbar {
	display: none;
}

.cmk-faq-tiles__strip {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* The big translucent "F A Q" watermark that sits at the head of the row.
   Divi renders it as an <h2> with three lines at 80px/800 weight. */
.cmk-faq-tiles__watermark {
	flex: 0 0 auto;
	align-self: center;
	margin: 0 0 0 -10px;
	padding: 0 15px 0 25px;
	font-size: 80px;
	font-weight: 800;
	line-height: 0.95em;
	text-align: center;
	color: rgba(52, 53, 53, 0.19);
	-webkit-user-select: none;
	user-select: none;
}

.cmk-faq-tile {
	flex: 0 0 auto;
	background-color: #ffffff;
	border: 2px solid #1a5a7f;
	/* The live tiles sit at their 400px min-width, not the 500px max. */
	height: 300px;
	max-width: 400px;
	min-width: 400px;
	width: 400px;
	/* Divi: padding 15px 5px 5px 5px on the row, but the blurb inside adds
	   its own horizontal breathing room. Slightly more side padding keeps
	   the copy off the border. */
	padding: 15px 18px 5px 20px;
	margin: 10px;
	overflow: hidden;
	box-sizing: border-box;
}

.cmk-faq-tile__q {
	font-size: 22px;
	line-height: 1.2em;
	color: #1a5a7f;
	font-weight: 600;
	margin: 0 0 10px 0;
	padding: 0;
	/* The live tiles display their questions in caps. Doing this in CSS means
	   the stored FAQ text stays normally cased (better for the schema and for
	   editing) while the visible result is identical to today. */
	text-transform: uppercase;
}

.cmk-faq-tile__a,
.cmk-faq-tile__a p {
	line-height: 1.6em;
}

.cmk-faq-tile__a p {
	margin: 0 0 1em 0;
	padding: 0;
}

.cmk-faq-tile__a p:last-child {
	margin-bottom: 0;
}

/* The NAVIGATE arrows beneath the strip (theme markup: .arrowfirst). */
.cmk-faq-tiles__nav {
	/* Flex centring guarantees the label sits on the same optical line as
	   the two rotated chevrons, which a plain text-align cannot do. */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 6px 0 10px 0;
}

.cmk-faq-tiles__nav-label {
	line-height: 1;
	font-size: 15px;
	opacity: 95%;
	color: #1a5a7f;
	font-weight: 700;
	margin: 0 10px;
}

.cmk-faq-tiles__arrow {
	border: solid gray;
	border-width: 0 4px 4px 0;
	display: inline-block;
	padding: 8px;
	cursor: pointer;
	opacity: 65%;
	background: none;
}

.cmk-faq-tiles__arrow--right {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.cmk-faq-tiles__arrow--left {
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
}

/* The trailing "SEE MORE FAQ" call to action that closes the strip. */
.cmk-faq-tiles__more {
	flex: 0 0 auto;
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 240px;
	padding: 0 30px;
	text-decoration: none;
	color: #1a5a7f;
}

.cmk-faq-tiles__more:hover .cmk-faq-tiles__more-icon {
	background-color: #1a5a7f;
	color: #ffffff;
}

.cmk-faq-tiles__more-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	border: 3px solid #1a5a7f;
	border-radius: 50%;
	color: #1a5a7f;
	transition: background-color 0.3s, color 0.3s;
}

.cmk-faq-tiles__more-icon svg {
	width: 34px;
	height: 34px;
	display: block;
}

.cmk-faq-tiles__more-label {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2em;
	text-align: center;
	text-transform: uppercase;
	color: #1a5a7f;
}

/* Tablet — taller tiles, tighter section padding (matches Divi's 980px rules). */
@media only screen and (max-width: 980px) {
	.cmk-faq-tiles__strip {
		padding: 12px 10px 10px 10px;
	}

	.cmk-faq-tile {
		height: 330px;
		padding: 25px 18px 5px 20px;
	}

	.cmk-faq-tiles__watermark {
		font-size: 64px;
		padding: 0 10px;
	}
}

/* Phone — narrower, taller tiles; the row keeps scrolling sideways. */
@media only screen and (max-width: 767px) {
	.cmk-faq-tiles__strip {
		padding: 10px;
	}

	.cmk-faq-tile {
		height: 405px;
	}
}

@media screen and (max-width: 599px) {
	.cmk-faq-tile {
		max-width: 300px;
		min-width: 280px;
		width: 300px;
		padding: 15px 13px 0 15px;
	}

	.cmk-faq-tiles__watermark {
		font-size: 48px;
		padding: 0 8px;
	}
}

/* =======================================================================
 * 2. TECHNICAL CARD STRIP  (grey border, horizontal scroll, 1–2 Q&As per card)
 * ==================================================================== */

.cmk-faq-cards {
	width: 100%;
	max-width: 1950px;
	margin: 0 auto;
}

.cmk-faq-cards__heading {
	text-align: center;
}

.cmk-faq-cards__strip {
	height: 375px;
	overflow-x: scroll;
	overflow-y: hidden;
	scroll-behavior: smooth;
	white-space: nowrap;
	padding: 0 25px 0 10px;
	-webkit-overflow-scrolling: touch;
}

.cmk-faq-card {
	display: inline-block;
	vertical-align: top;
	white-space: normal;
	width: 550px;
	background-color: #ffffff;
	border: 3px solid #e8e8e8;
	min-height: 370px;
	padding: 15px 29px 15px 32px;
	margin: 0 10px 20px 10px;
	box-sizing: border-box;
	overflow: hidden;
}

/* Cards holding two stacked Q&As are capped so the strip stays level. */
.cmk-faq-card--n2 {
	max-height: 370px;
}

.cmk-faq-card__item + .cmk-faq-card__item {
	margin-top: 14px;
}

.cmk-faq-card__q {
	font-size: 20px;
	line-height: 1.2em;
	margin: 0 0 8px 0;
	padding: 0;
	font-weight: 700;
	text-transform: uppercase;
}

.cmk-faq-card__icon {
	display: inline-block;
	vertical-align: middle;
	width: auto;
	max-height: 1.4em;
	margin-right: 8px;
}

.cmk-faq-card__a,
.cmk-faq-card__a p {
	line-height: 1.6em;
}

.cmk-faq-card__a p {
	margin: 0 0 1em 0;
	padding: 0;
}

.cmk-faq-card__a p:last-child {
	margin-bottom: 0;
}

/* Tablet — identical widths, tighter padding (matches Divi's 980px rules). */
@media only screen and (max-width: 980px) {
	.cmk-faq-cards__strip {
		height: 375px;
		padding: 0 25px 0 15px;
	}

	.cmk-faq-card {
		width: 550px;
		min-height: 370px;
		padding: 10px 22px 10px 24px;
		margin: 0 10px;
	}
}

/* Phone — narrower and taller cards, strip grows to fit. */
@media only screen and (max-width: 767px) {
	.cmk-faq-cards__strip {
		height: unset;
		padding: 0;
	}

	.cmk-faq-card {
		width: 350px;
		min-height: 515px;
		padding: 10px 18px 10px 20px;
		margin: 0 10px 15px 3px;
	}

	.cmk-faq-card--n2 {
		max-height: none;
	}
}