/**
 * Structural styling ONLY for pe/* blocks (layout, grid, spacing).
 * Colors, fonts, and brand styling come from the active theme's
 * theme.json / global styles by design - this plugin does not
 * control visual design, only content structure.
 */

.pe-global-info,
.pe-phone-btn { display: inline-flex; align-items: center; gap: 0.5em; }
.pe-global-info svg,
.pe-phone-btn svg { width: 1em; height: 1em; fill: currentColor; flex: none; }

.pe-social-links { display: flex; gap: 0.75em; }
.pe-social-links a { display: inline-flex; width: 2em; height: 2em; align-items: center; justify-content: center; }
.pe-social-links svg { width: 1.1em; height: 1.1em; fill: currentColor; }

.pe-btn { display: inline-block; text-decoration: none; padding: 0.85em 1.6em; border-radius: var(--wp--custom--radius, 6px); font-weight: 600; text-align: center; }
.pe-btn-sm { padding: 0.6em 1.2em; font-size: 0.9em; }
.pe-btn-block { display: block; width: 100%; }

.pe-testimonials { display: grid; gap: 1.5rem; grid-template-columns: repeat(var(--pe-cols, 3), 1fr); }
.pe-testimonials.pe-cols-1 { --pe-cols: 1; }
.pe-testimonials.pe-cols-2 { --pe-cols: 2; }
.pe-testimonials.pe-cols-3 { --pe-cols: 3; }
.pe-testimonials.pe-cols-4 { --pe-cols: 4; }
.pe-testimonial-card { padding: 1.5rem; }
.pe-testimonial-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.pe-stars { display: inline-flex; gap: 2px; }
.pe-stars svg { width: 1em; height: 1em; fill: #d9dde3; }
.pe-stars .is-filled svg { fill: currentColor; }

.pe-ba-gallery { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); }
.pe-ba-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; position: relative; }
.pe-ba-photo { position: relative; }
.pe-ba-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-ba-tag { position: absolute; top: 8px; left: 8px; padding: 2px 10px; font-size: 0.75em; font-weight: 700; text-transform: uppercase; z-index: 1; background: rgba(0,0,0,0.6); color: #fff; border-radius: 4px; }
.pe-ba-caption { margin-top: 0.5rem; }

.pe-team-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(var(--pe-cols, 4), 1fr); }
.pe-team-grid.pe-cols-1 { --pe-cols: 1; }
.pe-team-grid.pe-cols-2 { --pe-cols: 2; }
.pe-team-grid.pe-cols-3 { --pe-cols: 3; }
.pe-team-grid.pe-cols-4 { --pe-cols: 4; }
.pe-team-grid.pe-cols-5 { --pe-cols: 5; }
.pe-team-grid.pe-cols-6 { --pe-cols: 6; }
.pe-team-photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }

.pe-job-listings { display: grid; gap: 1.25rem; }
.pe-job-card { padding: 1.5rem; }
.pe-job-meta { display: flex; align-items: center; gap: 1em; flex-wrap: wrap; }
.pe-job-meta svg { width: 1em; height: 1em; fill: currentColor; }

.pe-faq-accordion { display: grid; gap: 0.75rem; }
.pe-faq-item { padding: 1rem 1.25rem; }
.pe-faq-question { cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-weight: 600; list-style: none; }
.pe-faq-question::-webkit-details-marker { display: none; }
.pe-faq-caret svg { width: 1em; height: 1em; fill: currentColor; transition: transform 0.2s ease; }
.pe-faq-item[open] .pe-faq-caret svg { transform: rotate(180deg); }
.pe-faq-answer { margin-top: 0.75rem; }

.pe-service-locations-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem 1.5rem; }
.pe-service-locations-checklist li { display: flex; align-items: center; gap: 0.5em; }
.pe-service-locations-checklist svg { width: 1em; height: 1em; fill: currentColor; flex: none; }
.pe-service-locations-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); }
.pe-location-card { display: block; text-decoration: none; }
.pe-location-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; }

.pe-map-frame { position: relative; width: 100%; aspect-ratio: 16/10; }
.pe-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.pe-notice { padding: 0.75em 1.25em; text-align: center; font-size: 0.9em; }
.pe-notice-emergency { background: #c0392b; color: #fff; }
.pe-notice-seasonal { background: #2c3e50; color: #fff; }

.pe-empty-notice { padding: 1rem; border: 1px dashed currentColor; opacity: 0.6; font-size: 0.9em; }

@media (max-width: 782px) {
	.pe-testimonials,
	.pe-ba-gallery,
	.pe-team-grid,
	.pe-service-locations-grid { grid-template-columns: 1fr; }
	.pe-ba-gallery { grid-template-columns: repeat(2, 1fr); }
	.pe-service-locations-checklist { grid-template-columns: 1fr; }
}