/* footer — closing band and footer, measured off the approved design.
 *
 * Closing band: graphite, 80px block padding, copy left, one red button right.
 * Footer: deep graphite, 56px block padding, brand left, two columns right.
 *
 * Deep graphite exists only to separate two adjacent dark bands. It is not a
 * third background colour.
 */

/* ---- Closing band -------------------------------------------------------- */

/* The 104px of air before the dark band lives here, not as body padding: the
   band has to start where the bone ends. */
.tci-closing {
	background: var(--wp--preset--color--graphite);
	margin-top: var(--tci-section-space);
}

.tci-closing__inner {
	max-width: var(--tci-content-width);
	margin-inline: auto;
	padding: 80px var(--tci-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
}

.tci-closing__copy {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 620px;
}

.tci-closing h2 {
	font-size: 48px;
	line-height: 1.02;
	color: var(--wp--preset--color--bone);
}

.tci-closing p:not([class*="tci-eyebrow"]):not(.tci-label) {
	font-size: 17px;
	line-height: 1.65;
	color: var(--tci-on-graphite-2);
}

/* Contacto cierra un punto más bajo que el resto: 72px de aire y titular de
 * 44. La banda va justo debajo del formulario, y a 80/48 pesaba más que él. */
.tci-closing--contact .tci-closing__inner {
	padding-block: 72px;
}

.tci-closing--contact h2 {
	font-size: 44px;
}

/* The one red button on the screen. It must not wrap. */
.tci-closing .tci-button {
	font-size: 17px;
	padding: 20px 40px;
	white-space: nowrap;
}

/* wpautop wraps the shortcode in a paragraph; it is a flex item, not text. */
.tci-closing__inner > p {
	margin: 0;
	flex: none;
}

/* ---- Footer -------------------------------------------------------------- */

.tci-footer {
	background: var(--wp--preset--color--graphite-deep);
	color: var(--tci-on-graphite-2);
	border-top: var(--tci-hairline) solid var(--tci-hairline-dark);
}

.tci-footer__inner {
	max-width: var(--tci-content-width);
	margin-inline: auto;
	padding: 56px var(--tci-gutter);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 48px;
}

/* Brand: logo and address on one line. */
.tci-footer__brand {
	display: flex;
	align-items: center;
	gap: 16px;
}

.tci-footer__logo {
	display: block;
	flex: none;
	color: var(--wp--preset--color--bone);
}

.tci-footer__logo svg {
	width: 72px;
	height: 72px;
}

.tci-footer__address {
	font-size: var(--wp--preset--font-size--xs, 13px);
	line-height: 1.7;
	color: var(--tci-on-graphite-3);
	margin: 0;
}

/* Two columns, right aligned.
 *
 * `align-items: flex-start` is not optional: core's flex layout centres items
 * by default, so the shorter column would float halfway down against the
 * taller one and the two labels would stop sharing a baseline. */
.tci-footer__columns {
	display: flex;
	align-items: flex-start;
	gap: 64px;
}

/* gap: 0 — the label carries its own 8px and the list its line-height. Core's
   blockGap would add 24px on top and break the block apart. */
.tci-footer__column {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Column heading is a mono label, not a Rajdhani heading. */
.tci-footer__column .tci-label {
	margin: 0 0 8px;
	color: var(--tci-on-graphite-3);
}

.tci-footer__column ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--sm, 14px);
	line-height: 1.9;
	color: var(--tci-on-graphite-2);
}

.tci-footer__column li {
	margin: 0;
}

.tci-footer a {
	color: inherit;
	text-decoration: none;
}

.tci-footer a:hover {
	color: var(--wp--preset--color--brass);
}

/* ---- Small screens ------------------------------------------------------- */

@media (max-width: 1024px) {
	.tci-closing__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
		padding-block: 64px;
	}

	.tci-closing h2 {
		font-size: 38px;
	}
}

@media (max-width: 860px) {
	.tci-footer__inner {
		flex-direction: column;
		gap: 40px;
	}
}

@media (max-width: 640px) {
	.tci-closing__inner {
		padding-block: 48px;
	}

	.tci-closing h2 {
		font-size: 30px;
	}

	.tci-closing p:not([class*="tci-eyebrow"]):not(.tci-label) {
		font-size: var(--wp--preset--font-size--lg, 16px);
	}

	/* The one red button goes full width — at 360px a nowrap label would
	   otherwise push past the edge of the screen. */
	.tci-closing .tci-button {
		width: 100%;
		white-space: normal;
		text-align: center;
		font-size: var(--wp--preset--font-size--lg, 16px);
		padding: 18px 24px;
	}

	.tci-closing__inner > p {
		width: 100%;
	}

	/* Logo above the address rather than beside it. */
	.tci-footer__brand {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.tci-footer__logo svg {
		width: 60px;
		height: 60px;
	}

	.tci-footer__inner {
		padding-block: 40px;
		gap: 32px;
	}

	/* Two columns still fit at 360px at 14px, and stacking them would double
	   the height of the footer for no gain. */
	.tci-footer__columns {
		gap: 32px;
		width: 100%;
	}

	.tci-footer__column {
		flex: 1;
	}
}