/* ==========================================================================
   JTP Custom Blocks - stylesheet
   --------------------------------------------------------------------------
   Minimal, mobile-first CSS for the JTP block patterns. This is the ONLY
   stylesheet this plugin loads - there is no separate framework/runtime CSS
   like Elementor ships. Keep additions here small and specific.

   Colour variables are set to roughly match the current JTP brand (dark
   green / near-black). Adjust the values in :root to retune the palette
   site-wide without hunting through every rule.
   ========================================================================== */

:root {
	--jtp-green: #3a4d36;
	--jtp-green-dark: #2a3727;
	--jtp-cream: #f7f6f2;
	--jtp-text: #222222;
}

/* --------------------------------------------------------------------------
   Generic section spacing
   -------------------------------------------------------------------------- */
.jtp-section {
	padding: 48px 24px;
}

.jtp-section--alt {
	background-color: var(--jtp-cream);
}

/* --------------------------------------------------------------------------
   Hero banner
   -------------------------------------------------------------------------- */
.jtp-hero .wp-block-cover__inner-container {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.jtp-hero h1 {
	font-size: clamp(1.75rem, 5vw, 3rem);
	letter-spacing: 0.05em;
	margin-bottom: 0.5em;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.jtp-btn-primary .wp-block-button__link {
	background-color: var(--jtp-green);
	color: #ffffff;
	border-radius: 2px;
	padding: 0.75em 1.75em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.jtp-btn-primary .wp-block-button__link:hover {
	background-color: var(--jtp-green-dark);
}

.jtp-btn-secondary .wp-block-button__link {
	background-color: transparent;
	color: var(--jtp-green);
	border: 2px solid var(--jtp-green);
	border-radius: 2px;
	padding: 0.65em 1.5em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.jtp-btn-secondary .wp-block-button__link:hover {
	background-color: var(--jtp-green);
	color: #ffffff;
}

/* --------------------------------------------------------------------------
   Brand logo grid
   -------------------------------------------------------------------------- */
.jtp-logo-grid {
	gap: 24px;
	padding: 32px 24px;
}

.jtp-logo-grid__item {
	margin: 0;
	width: 120px;
	flex: 0 0 auto;
}

.jtp-logo-grid__item img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   Feature cards grid ("What we do best")
   -------------------------------------------------------------------------- */
.jtp-feature-grid {
	gap: 24px;
	flex-wrap: wrap;
}

.jtp-feature-card {
	flex: 1 1 280px;
	min-width: 0;
}

.jtp-feature-card__image img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	display: block;
}

.jtp-feature-card__title a {
	color: var(--jtp-text);
	text-decoration: none;
}

.jtp-feature-card__title a:hover {
	color: var(--jtp-green);
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.jtp-testimonial-grid {
	gap: 24px;
	flex-wrap: wrap;
}

.jtp-testimonial {
	flex: 1 1 240px;
	background: #ffffff;
	border-radius: 4px;
	padding: 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.jtp-testimonial__stars {
	color: #f5b400;
	margin: 0 0 0.5em;
	letter-spacing: 0.1em;
}

.jtp-testimonial__text {
	font-size: 0.95rem;
	margin-bottom: 0.75em;
}

.jtp-testimonial__meta {
	font-size: 0.85rem;
	color: #666666;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Two-column promo
   -------------------------------------------------------------------------- */
.jtp-promo__image img {
	border-radius: 4px;
	width: 100%;
	height: auto;
	display: block;
}

/* --------------------------------------------------------------------------
   CTA banner
   -------------------------------------------------------------------------- */
.jtp-cta-banner {
	text-align: center;
}

/* --------------------------------------------------------------------------
   Category banner
   -------------------------------------------------------------------------- */
.jtp-category-banner .wp-block-cover__inner-container {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Contact info bar
   -------------------------------------------------------------------------- */
.jtp-contact-bar {
	background-color: var(--jtp-green-dark);
	padding: 8px 16px;
	gap: 24px;
	font-size: 0.85rem;
}

.jtp-contact-bar__item {
	margin: 0;
}

.jtp-contact-bar__item a {
	color: #ffffff;
	text-decoration: none;
}

.jtp-contact-bar__item a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Responsive tweaks
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
	.jtp-section {
		padding: 32px 16px;
	}

	.jtp-logo-grid__item {
		width: 90px;
	}

	.jtp-feature-card,
	.jtp-testimonial {
		flex: 1 1 100%;
	}
}