/* ------------------------------------------------------------------
   Guides, Webinars and the gate.  (v4.4.0)

   The hubs reuse the Blog hub's card, so only the "New" flag is new here.
   The gate is a two-column band on the light section: what's inside on the
   left, the form on the right, swapped for the asset once it is submitted.
   ------------------------------------------------------------------ */

/* "New" flag on a resource card. */
.pimg { position: relative; }
.res-flag {
	position: absolute; top: 12px; left: 12px; z-index: 2;
	font-family: 'Sora', sans-serif; font-size: 11px; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
	color: #fff; background: #C62F34; border-radius: 999px; padding: 5px 11px;
	box-shadow: 0 6px 18px -8px rgba(0,0,0,.6);
}

/* ---- the gate ---- */
.gatewrap { display: grid; grid-template-columns: 1fr 460px; gap: 52px; align-items: start; }

.gateinfo h3 { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 700;
	color: var(--l-ink); margin: 0 0 18px; }
.gateinfo ul { list-style: none; margin: 0 0 22px; padding: 0; }
.gateinfo li { position: relative; padding-left: 26px; margin-bottom: 13px;
	color: #3B342E; line-height: 1.65; }
.gateinfo li::before { content: ''; position: absolute; left: 0; top: 9px;
	width: 9px; height: 9px; border-radius: 50%; border: 2px solid #C62F34; }
.gatemeta { font-family: 'Sora', sans-serif; font-size: 13px; letter-spacing: .04em;
	color: var(--l-muted); }

.gatebox { background: #FFFFFF; border: 1px solid var(--l-line); border-radius: 22px;
	padding: 34px 34px 30px; box-shadow: 0 30px 70px -50px rgba(40,28,24,.45); }
.gatebox h3 { font-family: 'Sora', sans-serif; font-size: 21px; font-weight: 700;
	color: var(--l-ink); margin: 0 0 8px; }
.gatesub { font-size: 15px; color: var(--l-muted); margin: 0 0 20px; line-height: 1.6; }

/* Contact Form 7 renders plain inputs; these give them the design's shape. */
.gatebox input[type=text], .gatebox input[type=email] {
	width: 100%; box-sizing: border-box; font: inherit; font-size: 15.5px;
	color: var(--l-ink); background: #FBF9F8; border: 1px solid var(--l-line);
	border-radius: 12px; padding: 13px 15px; margin-bottom: 14px;
}
.gatebox input[type=text]:focus, .gatebox input[type=email]:focus {
	outline: none; border-color: #C62F34; background: #fff;
	box-shadow: 0 0 0 3px rgba(198,47,52,.12);
}
.gatebox .wpcf7-list-item { margin: 0 0 18px; display: block; }
.gatebox .wpcf7-list-item-label { font-size: 14px; color: #3B342E; line-height: 1.55; }
.gatebox input[type=checkbox] { margin-right: 9px; accent-color: #C62F34; }
.gatebox input[type=submit] {
	width: 100%; font-family: 'Sora', sans-serif; font-size: 15.5px; font-weight: 600;
	color: #fff; background: #C62F34; border: 0; border-radius: 12px;
	padding: 14px 18px; cursor: pointer;
}
.gatebox input[type=submit]:hover { background: #A82428; }
.gatebox .wpcf7-not-valid-tip { color: #C62F34; font-size: 13.5px; margin: -8px 0 12px; }
.gatebox .wpcf7-response-output { font-size: 14px; border-radius: 10px; padding: 10px 13px;
	border-color: var(--l-line); margin: 14px 0 0; }

/* ---- unlocked state ---- */
.gateopen { text-align: center; }
.gatetick { width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%;
	background: #EAF6EE; color: #1E7A42; font-size: 24px; line-height: 46px; }
.gatevideo video, .gatevideo iframe { width: 100%; aspect-ratio: 16/9; border: 0;
	border-radius: 14px; display: block; }

@media (max-width: 900px) {
	.gatewrap { grid-template-columns: 1fr; gap: 34px; }
	.gatebox { padding: 26px 22px 24px; }
}