/**
 * Card component styles — Thula Theme
 *
 * All card variants live here. New card types should be added to this file
 * rather than style.css.
 *
 * Loaded on front-end and editor via enqueue_block_assets.
 */


/* -------------------------------------------------------------------------- */
/* Contact Card                                                                */
/* -------------------------------------------------------------------------- */

.thula-contact-card {
	height: 100%;
	align-items: center !important;
	text-align: center;
	gap: var(--wp--preset--spacing--10) !important;
}

.thula-contact-card .wp-block-heading,
.thula-contact-card p {
	text-align: center;
}

.thula-contact-card p:not(.thula-contact-card__cta) {
	margin-top: 8px; /* extra breathing room between heading and paragraph */
	color: var(--wp--preset--color--black);
}

.thula-contact-card .wp-block-heading {
	margin-top: -4px; /* tighten icon-to-heading gap from 10px to ~6px */
}

/* Centre the button(s) within the buttons row. */
.thula-contact-card .wp-block-buttons {
	justify-content: center;
}

/* gap (spacing|10) + margin-top (spacing|20) = spacing|30 between paragraph and CTA. */
.thula-contact-card > .wp-block-buttons,
.thula-contact-card > .thula-contact-card__cta {
	margin-top: var(--wp--preset--spacing--20);
}

/* Match the font size and vertical padding of an outline-teal button so the text link
   sits at the same visual baseline as button text in neighbouring equal-height cards. */
.thula-contact-card__cta {
	font-size: var(--wp--preset--font-size--base) !important;
	padding-block: 0.6em; /* mirrors WP default button padding-block */
}

.thula-contact-card__cta a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.thula-contact-card__cta a:hover {
	color: var(--wp--preset--color--thula-teal);
}

/* Tighten button horizontal padding at narrower viewports so text stays on one line
   in 3-column and 2-column grid layouts. */
@media ( max-width: 1100px ) {
	.thula-contact-card .wp-block-button__link {
		padding-inline: 1em;
	}
}

/* Icon box: inline-flex shrinks to content size naturally; align-self centres it in the card column. */
.thula-contact-card-icon-box {
	display: inline-flex !important;
	align-self: center;
}

.thula-contact-card__icon {
	width: 40px !important;
	height: 40px !important;
}


/* -------------------------------------------------------------------------- */
/* Contact Cards Grid                                                          */
/* -------------------------------------------------------------------------- */

.thula-contact-cards-grid {
	align-items: stretch;
	gap: var(--wp--preset--spacing--30) !important;
	padding-inline: clamp(0px, calc(20vw - 180px), var(--wp--preset--spacing--60));
}

@media ( max-width: 900px ) {
	.thula-contact-cards-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media ( max-width: 600px ) {
	.thula-contact-cards-grid {
		grid-template-columns: 1fr !important;
	}
}


/* -------------------------------------------------------------------------- */
/* Location Card                                                               */
/* -------------------------------------------------------------------------- */

.thula-location-card {
	overflow: hidden;
	width: min(400px, calc(50% - var(--wp--preset--spacing--30) / 2));
	max-width: 400px;
	gap: 0 !important;
}

@media ( max-width: 800px ) {
	.thula-location-card {
		width: 100%;
		max-width: 400px;
	}

	.thula-location-card__head,
	.thula-location-card__rows {
		padding-inline: clamp(2.5rem, calc(2.5vw + 1.875rem), 3.125rem); /* fluid spacing|40→spacing|50; 40px at ~400px, 50px at 800px */
	}
}

.thula-location-card__head {
	align-self: stretch; /* WP vertical flex defaults to flex-start; force full card width */
	padding-inline: clamp(1.875rem, calc(5vw - 0.625rem), 3.125rem); /* fluid spacing|20→spacing|40; hits 20px at 800px, 40px at 1200px */
}

/* font-weight/letter-spacing/text-transform only; color + font-size set via block attributes */
.thula-location-card__role {
	width: 100%;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
}

.thula-location-card__rows {
	display: flex;
	flex-direction: column;
	align-self: stretch; /* WP flex layout defaults to flex-start; force full card width */
	margin: 0;
	padding: 0 clamp(1.875rem, calc(5vw - 0.625rem), 3.125rem) var(--wp--preset--spacing--30);
}

.thula-location-card__row {
	display: grid;
	grid-template-columns: 36px 1fr;
	align-items: start;
	column-gap: clamp(0.5rem, calc(3vw - 1rem), 1.25rem); /* fluid 8px→20px; hits 8px at 800px, 20px at 1200px */
	padding-block: 14px; /* comfortable row height, meets WCAG 2.5.8 touch-target minimum */
	border-top: 1px solid var(--wp--preset--color--light-grey);
}

.thula-location-card__row:first-child {
	border-top: none;
}

.thula-location-card__row dt {
	display: flex;
	align-items: center;
	margin: 0;
}

.thula-location-card__row-icon {
	width: 30px !important;
	height: 30px !important;
	flex-shrink: 0;
}

.thula-location-card__row dd {
	margin: 0;
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.55;
}


.thula-location-card__link {
	border-bottom: 1px solid transparent;
	color: var(--wp--preset--color--black);
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.thula-location-card__link:hover {
	color: var(--wp--preset--color--thula-teal);
	text-decoration: none;
	border-bottom-color: var(--wp--preset--color--thula-teal);
}

@media ( prefers-reduced-motion: reduce ) {
	.thula-location-card__link {
		transition: color 0.15s ease;
	}
}


/* -------------------------------------------------------------------------- */
/* Locations Content                                                           */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* Locations Grid                                                              */
/* -------------------------------------------------------------------------- */

.thula-locations-grid {
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: var(--wp--preset--spacing--30) !important;
	padding-inline: clamp(0px, calc(40vw - 320px), var(--wp--preset--spacing--90));
}