/* ============================================================
   RESOURCE PAGES — what the owner of a table comes looking for: the
   documents to download, and the support form to fill in.
   Loaded on the pages that use them (see custom-wwg-theme-setup.php).
   Light (Classic) pages: colours come from the semantic tokens, so a
   Signature page would recolour without touching this file.
   ============================================================ */

.wwg-resources {
	padding: var(--wwg-space-11) 0 var(--wwg-space-12);
	color: var(--wwg-color-text-primary);
}
.wwg-resources-inner {
	width: 80%;
	max-width: 1448px;
	margin: 0 auto;
}
.wwg-resources-title {
	margin: 0 0 var(--wwg-space-6);
}

/* Two across, as the builder had them: the first document beside the video, the other two
   under it. One column once two would be narrower than a comfortable reading measure. */
.wwg-resources-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wwg-space-11) var(--wwg-space-6);
	align-items: start;
}

/* ── A document ── */
.wwg-resource {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wwg-space-4);
}
.wwg-resource-cover {
	display: block;
	width: 100%;
	border-radius: var(--wwg-radius-lg);
	overflow: hidden;  /* the cover's own corners follow the card's */
	line-height: 0;    /* no descender gap under the image */
}
.wwg-resource-cover img {
	display: block;
	width: 100%;
	height: auto;
}
.wwg-resource-cover:focus-visible {
	outline: 2px solid var(--wwg-color-accent-focus);
	outline-offset: 2px;
}
.wwg-resource-btn {
	min-width: 208px;
}

/* ── The video ── */
.wwg-resource-video-frame {
	position: relative;
	padding-bottom: 56.25%;  /* 16:9 */
	height: 0;
	overflow: hidden;
	border-radius: var(--wwg-radius-lg);
	background: var(--wwg-color-bg-secondary);  /* while the embed loads */
}
.wwg-resource-video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 900px) {
	.wwg-resources {
		padding: var(--wwg-space-7) 0 var(--wwg-space-9);
	}
	.wwg-resources-inner {
		width: auto;
		margin: 0 var(--wwg-space-4);
	}
	.wwg-resources-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wwg-space-9);
	}
}

/* ── Support form pages ── */
/* A form is easier to fill in when the eye does not have to travel the full page width;
   the copy above it reads at the same measure. */
.wwg-support {
	padding: var(--wwg-space-11) 0 var(--wwg-space-12);
	color: var(--wwg-color-text-primary);
}
.wwg-support-inner {
	max-width: 840px;
	margin: 0 auto;
	padding: 0 var(--wwg-space-4);
}
.wwg-support-title {
	margin: 0 0 var(--wwg-space-5);
}
.wwg-support p {
	font-size: var(--wwg-text-md-size);
	line-height: var(--wwg-text-md-line);
	margin: 0 0 var(--wwg-space-4);
}
.wwg-support-form {
	margin-top: var(--wwg-space-7);
}

@media (max-width: 900px) {
	.wwg-support {
		padding: var(--wwg-space-7) 0 var(--wwg-space-9);
	}
}

/* These three forms are set to Gravity Forms' legacy markup, which the theme's form rules
   (written for its modern markup) do not reach, and whose reset leaves the file-picker as a
   raw browser button. Dressed as the small neutral button it should be. */
.wwg-support-form .gform_button_select_files {
	padding: calc(var(--wwg-btn-padding-y) - var(--wwg-btn-border-width)) calc(var(--wwg-btn-padding-x) - var(--wwg-btn-border-width));
	border: var(--wwg-btn-border-width) solid var(--wwg-btn-neutral-ink);
	border-radius: var(--wwg-btn-radius);
	background: none;
	color: var(--wwg-btn-neutral-ink);
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-btn-sm-size);
	line-height: var(--wwg-btn-sm-line);
	font-weight: var(--wwg-btn-weight);
	letter-spacing: var(--wwg-btn-tracking);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.wwg-support-form .gform_button_select_files:hover {
	background: var(--wwg-btn-neutral-fill);
	color: var(--wwg-btn-neutral-on-fill);
}