/**
 * Philly Golf Guys Pro — Shared Components
 *
 * Cards, buttons, badges, influencer cards, blog post cards.
 *
 * @package Philly Golf Guys Pro
 */

/* ==========================================================================
   PGG Card Base
   ========================================================================== */

.pgg-card {
	background-color: var(--pgg-white);
	border-radius: var(--pgg-radius);
	box-shadow: var(--pgg-shadow);
	overflow: hidden;
	transition: transform var(--pgg-transition), box-shadow var(--pgg-transition);
}

.pgg-card:hover {
	box-shadow: var(--pgg-shadow-hover);
	transform: translateY(-4px);
}

.pgg-card__image {
	aspect-ratio: 16 / 9;
	display: block;
	overflow: hidden;
	width: 100%;
}

.pgg-card__image img {
	height: 100%;
	object-fit: cover;
	width: 100%;
	transition: transform 0.4s ease;
}

.pgg-card:hover .pgg-card__image img {
	transform: scale(1.03);
}

.pgg-card__body {
	padding: var(--pgg-space-lg);
}

.pgg-card__title {
	font-family: var(--pgg-font-heading);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: var(--pgg-space-sm);
}

.pgg-card__title a {
	color: var(--pgg-dark);
	text-decoration: none;
}

.pgg-card__title a:hover {
	color: var(--pgg-primary);
}

.pgg-card__meta {
	color: var(--pgg-muted);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.03em;
	margin-bottom: var(--pgg-space-sm);
}

.pgg-card__excerpt {
	color: var(--pgg-muted);
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: var(--pgg-space-md);
	/* Clamp to 3 lines */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pgg-card__footer {
	align-items: center;
	border-top: 1px solid var(--pgg-border);
	display: flex;
	justify-content: space-between;
	padding: var(--pgg-space-md) var(--pgg-space-lg);
}

/* ==========================================================================
   PGG Card Grids
   ========================================================================== */

.pgg-card-grid {
	display: grid;
	gap: var(--pgg-space-xl);
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 600px) {
	.pgg-card-grid--2col,
	.pgg-card-grid--3col {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.pgg-card-grid--3col {
		grid-template-columns: repeat(3, 1fr);
	}

	.pgg-card-grid--2col {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.pgg-btn {
	align-items: center;
	border: 2px solid transparent;
	border-radius: var(--pgg-radius);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--pgg-font-body);
	font-size: 14px;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	letter-spacing: 0.05em;
	line-height: 1;
	padding: 12px 28px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--pgg-transition), border-color var(--pgg-transition),
		color var(--pgg-transition), transform var(--pgg-transition), box-shadow var(--pgg-transition);
}

.pgg-btn:hover,
.pgg-btn:focus {
	transform: translateY(-1px);
	box-shadow: var(--pgg-shadow-hover);
}

.pgg-btn--primary {
	background-color: var(--pgg-primary);
	color: #fff;
}

.pgg-btn--primary:hover,
.pgg-btn--primary:focus {
	background-color: var(--pgg-primary-light);
	color: #fff;
}

.pgg-btn--accent {
	background-color: var(--pgg-accent);
	color: var(--pgg-dark);
}

.pgg-btn--accent:hover,
.pgg-btn--accent:focus {
	background-color: var(--pgg-accent-dark);
	color: var(--pgg-dark);
}

.pgg-btn--outline {
	background-color: transparent;
	border-color: var(--pgg-primary);
	color: var(--pgg-primary);
}

.pgg-btn--outline:hover,
.pgg-btn--outline:focus {
	background-color: var(--pgg-primary);
	color: #fff;
}

.pgg-btn--ghost {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.7);
	color: #fff;
}

.pgg-btn--ghost:hover,
.pgg-btn--ghost:focus {
	background-color: #fff;
	border-color: #fff;
	color: var(--pgg-primary);
}

.pgg-btn--sm {
	font-size: 12px;
	padding: 8px 18px;
}

.pgg-btn--lg {
	font-size: 16px;
	padding: 16px 36px;
}

/* ==========================================================================
   Badges
   ========================================================================== */

.pgg-badge {
	border-radius: 4px;
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1;
	padding: 4px 10px;
	text-transform: uppercase;
}

.pgg-badge--primary {
	background-color: var(--pgg-primary);
	color: #fff;
}

.pgg-badge--secondary {
	background-color: var(--pgg-secondary);
	color: #fff;
}

.pgg-badge--accent {
	background-color: var(--pgg-accent);
	color: var(--pgg-dark);
}

.pgg-badge--light {
	background-color: var(--pgg-light);
	color: var(--pgg-dark);
}

.pgg-badge--public     { background-color: #E8F5E9; color: var(--pgg-primary); }
.pgg-badge--private    { background-color: #1B5E20; color: #fff; }
.pgg-badge--municipal  { background-color: #E3F2FD; color: #1565C0; }
.pgg-badge--resort     { background-color: #FFF8E1; color: #E65100; }
.pgg-badge--semi-private { background-color: #F3E5F5; color: #6A1B9A; }

/* ==========================================================================
   Influencer Card
   ========================================================================== */

.pgg-influencer-card {
	background-color: var(--pgg-white);
	border: 1px solid var(--pgg-border);
	border-radius: var(--pgg-radius);
	padding: var(--pgg-space-lg);
	transition: border-color var(--pgg-transition), box-shadow var(--pgg-transition);
}

.pgg-influencer-card:hover {
	border-color: var(--pgg-accent);
	box-shadow: var(--pgg-shadow-hover);
}

.pgg-influencer-card img.is-style-rounded,
.pgg-influencer-card .wp-block-image.is-style-rounded img {
	border: 4px solid var(--pgg-accent);
	border-radius: 50% !important;
	height: 120px !important;
	width: 120px !important;
	object-fit: cover;
}

.pgg-influencer-title {
	color: var(--pgg-primary);
	font-size: 14px;
	font-weight: 500;
	margin-bottom: var(--pgg-space-sm) !important;
}

.pgg-social-links {
	color: var(--pgg-muted);
	font-size: 14px;
}

/* ==========================================================================
   Blog Post Card (entry archive)
   ========================================================================== */

.pgg-posts-grid {
	display: grid;
	gap: var(--pgg-space-xl);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.pgg-posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.pgg-posts-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   Section Wrappers (full-width homepage sections)
   ========================================================================== */

.pgg-section {
	padding: var(--pgg-space-3xl) 30px;
}

.pgg-section--dark {
	background-color: var(--pgg-dark);
	color: rgba(255, 255, 255, 0.9);
}

.pgg-section--green {
	background-color: var(--pgg-primary);
	color: rgba(255, 255, 255, 0.95);
}

.pgg-section--light {
	background-color: var(--pgg-light);
}

.pgg-section--white {
	background-color: var(--pgg-white);
}

.pgg-section .wrap {
	max-width: var(--pgg-max-width);
	margin-left: auto;
	margin-right: auto;
}

.pgg-section__heading {
	font-family: var(--pgg-font-heading);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	font-weight: 700;
	margin-bottom: var(--pgg-space-sm);
}

.pgg-section--dark .pgg-section__heading,
.pgg-section--green .pgg-section__heading {
	color: var(--pgg-white);
}

.pgg-section__subheading {
	color: var(--pgg-muted);
	font-size: 18px;
	margin-bottom: var(--pgg-space-2xl);
}

.pgg-section--dark .pgg-section__subheading,
.pgg-section--green .pgg-section__subheading {
	color: rgba(255, 255, 255, 0.75);
}

.pgg-section__heading-bar {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--pgg-space-xl);
}

/* ==========================================================================
   Split Section (About teaser, CTA, etc.)
   ========================================================================== */

.pgg-split {
	align-items: center;
	display: grid;
	gap: var(--pgg-space-2xl);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.pgg-split {
		grid-template-columns: 1fr 1fr;
	}

	.pgg-split--image-right .pgg-split__image {
		order: 2;
	}
}

.pgg-split__image img {
	border-radius: var(--pgg-radius);
	width: 100%;
}

/* ==========================================================================
   CTA Banner
   ========================================================================== */

.pgg-cta-banner {
	background-color: var(--pgg-primary);
	border-radius: var(--pgg-radius);
	color: #fff;
	padding: var(--pgg-space-2xl) var(--pgg-space-3xl);
	text-align: center;
}

.pgg-cta-banner__title {
	color: #fff;
	font-family: var(--pgg-font-heading);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 700;
	margin-bottom: var(--pgg-space-md);
}

.pgg-cta-banner__text {
	color: rgba(255, 255, 255, 0.85);
	font-size: 18px;
	margin-bottom: var(--pgg-space-xl);
}

/* ==========================================================================
   Responsive menu toggle overrides for dark header
   ========================================================================== */

.site-header .menu-toggle,
.site-header .sub-menu-toggle {
	color: rgba(255, 255, 255, 0.9);
}

.site-header .menu-toggle:hover,
.site-header .menu-toggle:focus {
	color: var(--pgg-accent);
}