/**
 * Lambo's Puppy Palace — Components
 * ---------------------------------------------------------------------------
 * Reusable UI: buttons, cards, badges, chips, accordions, media, lightbox.
 */

/* ===========================================================================
 * Buttons
 * ======================================================================== */
.lpp-btn {
	--btn-bg: var(--lpp-brown);
	--btn-fg: var(--lpp-cream);
	--btn-border: transparent;

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lpp-space-8);
	padding: var(--lpp-space-16) var(--lpp-space-32);
	min-height: 52px; /* Comfortable touch target — requirement #34. */
	background-color: var(--btn-bg);
	color: var(--btn-fg);
	border: 1.5px solid var(--btn-border);
	border-radius: var(--lpp-radius-pill);
	font-family: var(--lpp-font-body);
	font-size: var(--lpp-text-base);
	font-weight: 600;
	letter-spacing: var(--lpp-tracking-snug);
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		transform var(--lpp-dur-fast) var(--lpp-ease-out),
		box-shadow var(--lpp-dur) var(--lpp-ease),
		background-color var(--lpp-dur) var(--lpp-ease),
		color var(--lpp-dur) var(--lpp-ease),
		border-color var(--lpp-dur) var(--lpp-ease);
}

.lpp-btn:hover {
	color: var(--btn-fg);
	transform: translateY(-2px);
	box-shadow: var(--lpp-shadow-md);
}

.lpp-btn:active {
	transform: translateY(0);
	box-shadow: var(--lpp-shadow-sm);
}

.lpp-btn[disabled],
.lpp-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Primary — the gold "Book Your Pup" action.
 *
 * Deep brown on gold rather than white on gold: white measured only 3.1:1,
 * which fails AA on the site's most important control. Hover *lightens* the
 * gold rather than darkening it, so the dark label keeps its contrast in both
 * states (5.0:1 at rest, 5.9:1 on hover). */
.lpp-btn--primary {
	--btn-bg: var(--lpp-gold);
	--btn-fg: var(--lpp-on-gold);
	box-shadow: var(--lpp-shadow-gold);
}

.lpp-btn--primary:hover {
	--btn-bg: var(--lpp-gold-lift);
}

/* Secondary — outlined, sits next to primary in hero pairs. */
.lpp-btn--secondary {
	--btn-bg: transparent;
	--btn-fg: var(--lpp-text);
	--btn-border: var(--lpp-border-strong);
}

.lpp-btn--secondary:hover {
	--btn-bg: var(--lpp-surface);
	--btn-border: var(--lpp-brown);
}

/* Ghost — low-emphasis inline action. */
.lpp-btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--lpp-text);
	padding-inline: var(--lpp-space-16);
	box-shadow: none;
}

.lpp-btn--ghost:hover {
	--btn-bg: var(--lpp-cream-deep);
	box-shadow: none;
	transform: none;
}

/* On dark sections. */
.lpp-btn--light {
	--btn-bg: var(--lpp-cream);
	--btn-fg: var(--lpp-brown);
}

.lpp-btn--light:hover {
	--btn-bg: #fff;
}

.lpp-btn--outline-light {
	--btn-bg: transparent;
	--btn-fg: var(--lpp-cream);
	--btn-border: rgba(253, 250, 245, 0.4);
}

.lpp-btn--outline-light:hover {
	--btn-bg: rgba(253, 250, 245, 0.1);
	--btn-border: var(--lpp-cream);
}

.lpp-btn--sm {
	padding: var(--lpp-space-12) var(--lpp-space-20);
	min-height: 42px;
	font-size: var(--lpp-text-sm);
}

.lpp-btn--lg {
	padding: var(--lpp-space-20) var(--lpp-space-40);
	min-height: 60px;
	font-size: var(--lpp-text-md);
}

.lpp-btn--block {
	width: 100%;
}

.lpp-btn__icon {
	width: 18px;
	height: 18px;
	flex: none;
}

/* Loading state used by the booking + contact forms. */
.lpp-btn.is-loading {
	color: transparent;
	pointer-events: none;
}

.lpp-btn.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 20px;
	height: 20px;
	border: 2px solid currentColor;
	border-top-color: var(--btn-fg);
	border-right-color: var(--btn-fg);
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-radius: 50%;
	animation: lpp-spin 700ms linear infinite;
	color: var(--btn-fg);
}

@keyframes lpp-spin {
	to { transform: rotate(360deg); }
}

/* Text link with an animated arrow. */
.lpp-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--lpp-space-8);
	font-size: var(--lpp-text-sm);
	font-weight: 600;
	letter-spacing: var(--lpp-tracking-wide);
	color: var(--lpp-accent-deep);
	text-decoration: none;
}

.lpp-link-arrow::after {
	content: "→";
	transition: transform var(--lpp-dur) var(--lpp-ease-out);
}

.lpp-link-arrow:hover::after {
	transform: translateX(4px);
}

/* ===========================================================================
 * Cards
 * ======================================================================== */
.lpp-card {
	display: flex;
	flex-direction: column;
	padding: var(--lpp-space-32);
	background-color: var(--lpp-surface);
	border: 1px solid var(--lpp-border);
	border-radius: var(--lpp-radius-lg);
	box-shadow: var(--lpp-shadow-sm);
	transition:
		transform var(--lpp-dur) var(--lpp-ease-out),
		box-shadow var(--lpp-dur) var(--lpp-ease),
		border-color var(--lpp-dur) var(--lpp-ease);
}

/* Only cards that are themselves links lift on hover. */
.lpp-card--interactive:hover,
a.lpp-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--lpp-shadow-md);
	border-color: var(--lpp-gold-soft);
}

.lpp-card__icon {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin-bottom: var(--lpp-space-24);
	background-color: var(--lpp-gold-wash);
	border-radius: var(--lpp-radius-md);
	color: var(--lpp-gold-deep);
	flex: none;
}

.lpp-card__icon svg {
	width: 26px;
	height: 26px;
}

.lpp-card__icon--sage {
	background-color: var(--lpp-sage-wash);
	color: var(--lpp-sage-deep);
}

.lpp-card__icon--peach {
	background-color: var(--lpp-peach-wash);
	color: #b07a63;
}

.lpp-card__title {
	font-size: var(--lpp-text-xl);
	margin-bottom: var(--lpp-space-12);
}

.lpp-card__text {
	color: var(--lpp-text-muted);
	font-size: var(--lpp-text-base);
	line-height: var(--lpp-leading-normal);
}

.lpp-card__footer {
	margin-top: auto;
	padding-top: var(--lpp-space-24);
}

/* Service card with an image header. */
.lpp-card--media {
	padding: 0;
	overflow: hidden;
}

.lpp-card--media .lpp-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--lpp-space-32);
}

.lpp-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--lpp-warm-grey);
}

.lpp-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--lpp-dur-slow) var(--lpp-ease-out);
}

.lpp-card--media:hover .lpp-card__media img {
	transform: scale(1.04);
}

/* Included-items checklist inside service cards. */
.lpp-checklist {
	display: flex;
	flex-direction: column;
	gap: var(--lpp-space-8);
	margin-top: var(--lpp-space-20);
	font-size: var(--lpp-text-sm);
	color: var(--lpp-text-muted);
}

.lpp-checklist li {
	display: flex;
	align-items: flex-start;
	gap: var(--lpp-space-8);
	line-height: 1.45;
}

.lpp-checklist li::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	background-color: var(--lpp-sage-wash);
	border-radius: 50%;
	/* Tick mark drawn with a mask so it inherits colour and needs no image. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%2362775c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

/* Numbered process step. */
.lpp-step {
	position: relative;
	padding: var(--lpp-space-32);
	background-color: var(--lpp-surface);
	border: 1px solid var(--lpp-border);
	border-radius: var(--lpp-radius-lg);
}

.lpp-step__num {
	display: block;
	margin-bottom: var(--lpp-space-16);
	font-family: var(--lpp-font-display);
	font-size: var(--lpp-text-2xl);
	font-weight: 600;
	color: var(--lpp-gold-soft);
	line-height: 1;
}

.lpp-step__title {
	font-size: var(--lpp-text-lg);
	margin-bottom: var(--lpp-space-8);
}

.lpp-step__text {
	font-size: var(--lpp-text-sm);
	color: var(--lpp-text-muted);
}

/* ===========================================================================
 * Badges, chips, pills
 * ======================================================================== */
.lpp-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--lpp-space-6);
	padding: var(--lpp-space-6) var(--lpp-space-12);
	background-color: var(--lpp-gold-wash);
	border-radius: var(--lpp-radius-pill);
	font-size: var(--lpp-text-xs);
	font-weight: 600;
	letter-spacing: var(--lpp-tracking-wide);
	color: var(--lpp-gold-deep);
}

.lpp-badge--sage {
	background-color: var(--lpp-sage-wash);
	color: var(--lpp-sage-deep);
}

/* Trust indicators under the hero CTA. */
.lpp-trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lpp-space-12) var(--lpp-space-24);
	align-items: center;
}

.lpp-trust__item {
	display: inline-flex;
	align-items: center;
	gap: var(--lpp-space-8);
	font-size: var(--lpp-text-sm);
	font-weight: 500;
	color: var(--lpp-text-muted);
}

.lpp-trust__icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: none;
	background-color: var(--lpp-surface);
	border: 1px solid var(--lpp-border);
	border-radius: 50%;
	font-size: 14px;
	line-height: 1;
}

/* ===========================================================================
 * Accordion (FAQ)
 * ======================================================================== */
.lpp-accordion {
	border-top: 1px solid var(--lpp-border);
}

.lpp-accordion__item {
	border-bottom: 1px solid var(--lpp-border);
}

.lpp-accordion__trigger {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--lpp-space-20);
	width: 100%;
	padding: var(--lpp-space-24) 0;
	font-family: var(--lpp-font-display);
	font-size: var(--lpp-text-lg);
	font-weight: 600;
	letter-spacing: var(--lpp-tracking-snug);
	text-align: left;
	color: var(--lpp-text);
	transition: color var(--lpp-dur-fast) var(--lpp-ease);
}

.lpp-accordion__trigger:hover {
	color: var(--lpp-accent-deep);
}

.lpp-accordion__mark {
	position: relative;
	flex: none;
	width: 26px;
	height: 26px;
	margin-top: 3px;
	border: 1px solid var(--lpp-border-strong);
	border-radius: 50%;
	transition:
		background-color var(--lpp-dur) var(--lpp-ease),
		border-color var(--lpp-dur) var(--lpp-ease),
		transform var(--lpp-dur) var(--lpp-ease-out);
}

.lpp-accordion__mark::before,
.lpp-accordion__mark::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background-color: currentColor;
	transition: opacity var(--lpp-dur) var(--lpp-ease);
}

.lpp-accordion__mark::before { width: 11px; height: 1.5px; }
.lpp-accordion__mark::after  { width: 1.5px; height: 11px; }

.lpp-accordion__trigger[aria-expanded="true"] .lpp-accordion__mark {
	background-color: var(--lpp-gold-wash);
	border-color: var(--lpp-gold-soft);
	transform: rotate(180deg);
}

.lpp-accordion__trigger[aria-expanded="true"] .lpp-accordion__mark::after {
	opacity: 0;
}

/* Height is animated in JS via grid-template-rows so it works with any
 * content length and degrades to instant with reduced motion. */
.lpp-accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--lpp-dur-slow) var(--lpp-ease-out);
}

.lpp-accordion__panel[data-open="true"] {
	grid-template-rows: 1fr;
}

.lpp-accordion__panel > div {
	overflow: hidden;
}

.lpp-accordion__body {
	padding-bottom: var(--lpp-space-24);
	max-width: 62ch;
	color: var(--lpp-text-muted);
	font-size: var(--lpp-text-base);
	line-height: var(--lpp-leading-loose);
}

.lpp-accordion__body > * + * {
	margin-top: var(--lpp-space-12);
}

/* ===========================================================================
 * Gallery + lightbox
 * ======================================================================== */
.lpp-gallery-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--lpp-space-8);
	margin-bottom: var(--lpp-space-40);
}

.lpp-filter {
	padding: var(--lpp-space-8) var(--lpp-space-20);
	min-height: 42px;
	background-color: var(--lpp-surface);
	border: 1px solid var(--lpp-border);
	border-radius: var(--lpp-radius-pill);
	font-size: var(--lpp-text-sm);
	font-weight: 500;
	color: var(--lpp-text-muted);
	transition: all var(--lpp-dur) var(--lpp-ease);
}

.lpp-filter:hover {
	border-color: var(--lpp-border-strong);
	color: var(--lpp-text);
}

.lpp-filter[aria-pressed="true"] {
	background-color: var(--lpp-brown);
	border-color: var(--lpp-brown);
	color: var(--lpp-cream);
}

/* Masonry-style columns. CSS columns keep it dependency-free and reflow
 * naturally; items are prevented from breaking across columns. */
.lpp-masonry {
	column-count: 3;
	column-gap: var(--lpp-space-20);
}

@media (max-width: 900px) { .lpp-masonry { column-count: 2; } }
@media (max-width: 560px) { .lpp-masonry { column-count: 1; } }

.lpp-masonry__item {
	break-inside: avoid;
	margin-bottom: var(--lpp-space-20);
}

.lpp-gallery-tile {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
	border-radius: var(--lpp-radius-md);
	background-color: var(--lpp-warm-grey);
	cursor: zoom-in;
	transition: box-shadow var(--lpp-dur) var(--lpp-ease);
}

.lpp-gallery-tile:hover {
	box-shadow: var(--lpp-shadow-md);
}

.lpp-gallery-tile img {
	width: 100%;
	transition: transform var(--lpp-dur-slow) var(--lpp-ease-out);
}

.lpp-gallery-tile:hover img {
	transform: scale(1.05);
}

.lpp-gallery-tile__caption {
	position: absolute;
	inset: auto 0 0 0;
	padding: var(--lpp-space-32) var(--lpp-space-20) var(--lpp-space-16);
	background: linear-gradient(to top, rgba(59, 49, 42, 0.78), transparent);
	color: #fff;
	font-size: var(--lpp-text-sm);
	font-weight: 500;
	text-align: left;
	opacity: 0;
	transition: opacity var(--lpp-dur) var(--lpp-ease);
}

.lpp-gallery-tile:hover .lpp-gallery-tile__caption,
.lpp-gallery-tile:focus-visible .lpp-gallery-tile__caption {
	opacity: 1;
}

.lpp-lightbox {
	position: fixed;
	inset: 0;
	z-index: var(--lpp-z-overlay);
	display: grid;
	place-items: center;
	padding: var(--lpp-gutter);
	background-color: rgba(38, 31, 26, 0.92);
	backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--lpp-dur) var(--lpp-ease),
		visibility var(--lpp-dur) var(--lpp-ease);
}

.lpp-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.lpp-lightbox__figure {
	max-width: min(1100px, 92vw);
	max-height: 88vh;
	text-align: center;
}

.lpp-lightbox__figure img {
	max-height: 78vh;
	width: auto;
	margin-inline: auto;
	border-radius: var(--lpp-radius-md);
	box-shadow: var(--lpp-shadow-lg);
}

.lpp-lightbox__caption {
	margin-top: var(--lpp-space-16);
	color: var(--lpp-cream);
	font-size: var(--lpp-text-sm);
}

.lpp-lightbox__close,
.lpp-lightbox__nav {
	position: absolute;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	background-color: rgba(253, 250, 245, 0.14);
	border: 1px solid rgba(253, 250, 245, 0.24);
	border-radius: 50%;
	color: var(--lpp-cream);
	font-size: 20px;
	line-height: 1;
	transition: background-color var(--lpp-dur) var(--lpp-ease);
}

.lpp-lightbox__close:hover,
.lpp-lightbox__nav:hover {
	background-color: rgba(253, 250, 245, 0.28);
}

.lpp-lightbox__close { top: var(--lpp-space-20); right: var(--lpp-space-20); }
.lpp-lightbox__nav--prev { left: var(--lpp-space-16); top: 50%; transform: translateY(-50%); }
.lpp-lightbox__nav--next { right: var(--lpp-space-16); top: 50%; transform: translateY(-50%); }

/* ===========================================================================
 * Notices — used for form results and admin-facing developer notes.
 * ======================================================================== */
.lpp-notice {
	display: flex;
	gap: var(--lpp-space-12);
	padding: var(--lpp-space-20) var(--lpp-space-24);
	border-radius: var(--lpp-radius);
	border: 1px solid var(--lpp-border);
	background-color: var(--lpp-cream-deep);
	font-size: var(--lpp-text-base);
	line-height: var(--lpp-leading-normal);
}

.lpp-notice--success {
	background-color: var(--lpp-success-wash);
	border-color: #c3d8c4;
	color: #2f4f32;
}

.lpp-notice--error {
	background-color: var(--lpp-error-wash);
	border-color: #e4bfba;
	color: #7d2f28;
}

.lpp-notice__icon {
	flex: none;
	font-size: 18px;
	line-height: 1.4;
}

/* Developer placeholder — deliberately visible so it can never ship unnoticed.
 * Only rendered for logged-in administrators (see the PHP guard). */
.lpp-dev-note {
	padding: var(--lpp-space-20) var(--lpp-space-24);
	border: 2px dashed var(--lpp-gold);
	border-radius: var(--lpp-radius);
	background-color: var(--lpp-gold-wash);
	color: var(--lpp-gold-deep);
	font-size: var(--lpp-text-sm);
	font-weight: 500;
}

.lpp-dev-note strong {
	display: block;
	margin-bottom: var(--lpp-space-4);
	text-transform: uppercase;
	letter-spacing: var(--lpp-tracking-caps);
	font-size: var(--lpp-text-xs);
}

/* ===========================================================================
 * Image placeholder
 * ---------------------------------------------------------------------------
 * Shown when a managed image slot has no photo yet. Deliberately warm and
 * on-brand rather than a grey box, so an un-populated slot still looks
 * considered while the owner gathers real photography.
 * ======================================================================== */
.lpp-imgph {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	background-color: var(--lpp-beige);
	background-image:
		radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.6), transparent 55%),
		radial-gradient(circle at 75% 80%, rgba(228, 211, 184, 0.7), transparent 50%);
	border-radius: inherit;
	color: var(--lpp-gold);
	opacity: 0.9;
}

.lpp-imgph span {
	display: grid;
	place-items: center;
	width: 78px;
	height: 78px;
	background-color: rgba(255, 255, 255, 0.55);
	border-radius: 50%;
}

/* Match whatever aspect ratio the surrounding component expects. */
.lpp-hero__frame .lpp-imgph,
.lpp-strip__item .lpp-imgph,
.lpp-card__media .lpp-imgph {
	height: 100%;
	aspect-ratio: auto;
}

/* ===========================================================================
 * Divider — a small paw motif, used once or twice, never as wallpaper.
 * ======================================================================== */
.lpp-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--lpp-space-16);
	color: var(--lpp-gold-soft);
}

.lpp-divider::before,
.lpp-divider::after {
	content: "";
	height: 1px;
	flex: 1;
	max-width: 120px;
	background: linear-gradient(to right, transparent, var(--lpp-gold-soft));
}

.lpp-divider::after {
	background: linear-gradient(to left, transparent, var(--lpp-gold-soft));
}