/*
 * Catalogue styles.
 *
 * Tokens come from the child theme, this file only lays out the catalogue and
 * the product page.
 */

.upc-shell {
	width: min(1200px, 100% - 40px);
	margin-inline: auto;
}

/* The theme spaces .content-area away from the header, the catalogue opens with
   a full width black band instead and has to sit flush under it. */
.upc-page.content-area {
	margin-top: 0;
	margin-bottom: 0;
}

.upc-section {
	padding-block: var(--ukrp-section-y, 72px);
}

.upc-section__title {
	margin: 0 0 32px;
}

/* --------------------------------------------------------------------------
 * Hero
 * -------------------------------------------------------------------------- */

.upc-hero {
	background: var(--ukrp-black, #000);
	color: #eceee9;
	padding-block: 72px;
}

.upc-hero__title {
	color: #fff;
	margin: 0 0 18px;
}

.upc-hero__text {
	max-width: 52ch;
	color: #c6cfc9;
}

.upc-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}

.upc-hero__media img {
	width: 100%;
	height: auto;
}

.upc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

/* --------------------------------------------------------------------------
 * Buttons
 * -------------------------------------------------------------------------- */

/* The theme styles every button and capitalises its label, both are reset here
   so the buttons match the layout. */
.upc-btn,
button.upc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 22px;
	border-radius: var(--ukrp-radius, 2px);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	border: 1px solid transparent;
	box-shadow: none;
	cursor: pointer;
}

.upc-btn:hover,
button.upc-btn:hover {
	box-shadow: none;
}

.upc-btn--primary,
button.upc-btn--primary {
	background: var(--ukrp-accent, #e4fe66);
	border-color: var(--ukrp-accent, #e4fe66);
	color: var(--ukrp-ink, #071b38);
}

.upc-btn--primary:hover,
button.upc-btn--primary:hover {
	background: var(--ukrp-accent-hover, #d6f23f);
	border-color: var(--ukrp-accent-hover, #d6f23f);
}

.upc-btn--ghost,
button.upc-btn--ghost {
	border-color: rgba(255, 255, 255, .28);
	color: #eceee9;
}

.upc-btn--ghost:hover,
button.upc-btn--ghost:hover {
	border-color: var(--ukrp-accent, #e4fe66);
	color: var(--ukrp-accent, #e4fe66);
}

/* --------------------------------------------------------------------------
 * Catalogue grid
 * -------------------------------------------------------------------------- */

.upc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.upc-grid--compact {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.upc-card {
	display: flex;
	flex-direction: column;
	background: var(--ukrp-surface, #f4f6f4);
	border-radius: var(--ukrp-radius, 2px);
	box-shadow: 0 0 0 1px rgba(7, 27, 56, .10);
	overflow: hidden;
}

.upc-card__media {
	display: block;
	aspect-ratio: 3 / 2;
	background: #d0d8d3;
}

.upc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.upc-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	flex: 1;
}

.upc-card__title {
	margin: 0;
	font-size: 22px;
}

.upc-card__title a {
	color: inherit;
	text-decoration: none;
}

.upc-card__text {
	margin: 0;
	color: var(--ukrp-ink-soft, #47556a);
	font-size: 14px;
}

.upc-card__specs {
	margin-top: auto;
	padding-top: 8px;
}

.upc-card__link {
	align-self: flex-start;
	font-size: 14px;
	color: var(--ukrp-ink, #071b38);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.upc-card__link:hover {
	color: var(--ukrp-ink-soft, #47556a);
}

/* --------------------------------------------------------------------------
 * Specification rows
 * -------------------------------------------------------------------------- */

.upc-specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 48px;
}

.upc-spec {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(7, 27, 56, .08);
}

.upc-spec__label {
	color: var(--ukrp-muted, #6b7683);
}

.upc-spec__value {
	text-align: right;
}

/* --------------------------------------------------------------------------
 * Modules and scenarios
 * -------------------------------------------------------------------------- */

.upc-modules {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.upc-module {
	padding: 24px;
	background: var(--ukrp-surface, #f4f6f4);
	border-radius: var(--ukrp-radius, 2px);
}

.upc-module__title {
	margin: 0 0 8px;
	font-size: 18px;
}

.upc-module__text {
	margin: 0;
	color: var(--ukrp-ink-soft, #47556a);
	font-size: 14px;
}

.upc-band {
	background: var(--ukrp-black, #000);
	color: #eceee9;
}

.upc-band .upc-section__title,
.upc-band .upc-step__title {
	color: #fff;
}

.upc-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.upc-step__num {
	font-size: 13px;
	letter-spacing: .1em;
	color: var(--ukrp-accent, #e4fe66);
	margin: 0 0 10px;
}

.upc-step__title {
	margin: 0 0 8px;
	font-size: 18px;
}

.upc-step__text {
	margin: 0;
	font-size: 14px;
	color: #b7c0ba;
}

/* --------------------------------------------------------------------------
 * Mobile
 * -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.upc-grid,
	.upc-grid--compact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.upc-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.upc-hero__grid,
	.upc-grid,
	.upc-grid--compact,
	.upc-specs,
	.upc-modules,
	.upc-steps {
		grid-template-columns: minmax(0, 1fr);
	}

	.upc-hero {
		padding-block: 48px;
	}
}

/* --------------------------------------------------------------------------
 * Quote request
 * -------------------------------------------------------------------------- */

.upc-quote__text {
	max-width: 60ch;
	color: #c6cfc9;
}

.upc-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(7, 27, 56, .72);
}

body.upc-modal-open {
	overflow: hidden;
}

.upc-modal__dialog {
	position: relative;
	width: min(520px, 100%);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 32px;
	background: var(--ukrp-paper, #fff);
	border-radius: var(--ukrp-radius, 2px);
	box-shadow: 0 18px 44px rgba(7, 27, 56, .30);
}

.upc-modal__title {
	margin: 0 0 20px;
	font-size: 26px;
}

.upc-modal__close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 36px;
	height: 36px;
	font-size: 26px;
	line-height: 1;
	color: var(--ukrp-muted, #6b7683);
	background: none;
	border: 0;
	cursor: pointer;
}

.upc-modal__close:hover {
	color: var(--ukrp-ink, #071b38);
}

/* --------------------------------------------------------------------------
 * Form
 * -------------------------------------------------------------------------- */

.upc-form__row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 16px;
}

.upc-form__row label {
	font-size: 13px;
	color: var(--ukrp-muted, #6b7683);
}

.upc-form__row input,
.upc-form__row textarea {
	width: 100%;
	padding: 12px 14px;
	font: inherit;
	font-size: 15px;
	color: var(--ukrp-ink, #071b38);
	background: var(--ukrp-surface, #f4f6f4);
	border: 1px solid rgba(7, 27, 56, .16);
	border-radius: var(--ukrp-radius, 2px);
}

.upc-form__row input:focus,
.upc-form__row textarea:focus {
	outline: 2px solid var(--ukrp-accent, #e4fe66);
	outline-offset: 1px;
}

/* The honeypot stays in the DOM for bots but never reaches a real visitor. */
.upc-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.upc-form__actions {
	margin: 20px 0 0;
}

.upc-form__note {
	margin: 12px 0 0;
	font-size: 14px;
	min-height: 1.2em;
}

.upc-form__note.is-ok {
	color: #13612e;
}

.upc-form__note.is-error {
	color: #b82105;
}

/* --------------------------------------------------------------------------
 * Shortcode output on ordinary pages
 * -------------------------------------------------------------------------- */

.upc-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.upc-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.upc-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* A wide table has to scroll inside its own box, never push the page sideways.
   Without the explicit width the box grows to the table and drags the whole
   layout past the viewport on narrow screens. */
.upc-compare-wrap {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
}

.upc-compare {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.upc-compare th,
.upc-compare td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid rgba(7, 27, 56, .10);
	white-space: nowrap;
}

.upc-compare thead th {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ukrp-muted, #6b7683);
	font-weight: 400;
}

.upc-compare tbody th a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.upc-band .upc-compare th,
.upc-band .upc-compare td {
	border-bottom-color: rgba(255, 255, 255, .16);
	color: #eceee9;
}

.upc-band .upc-compare thead th {
	color: #949c9a;
}

@media (max-width: 1024px) {
	.upc-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.upc-grid--cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.upc-grid--cols-2,
	.upc-grid--cols-3,
	.upc-grid--cols-4 { grid-template-columns: minmax(0, 1fr); }
}