/* Landora Elementor Widgets - Base Stylesheet
   Shared primitives (buttons, cards, badges, forms, grids) used across
   every widget. Loads after design-tokens.css. */

/* Global base (no wrapper class exists around each widget - each widget's
   own root element, e.g. .lew-hero-image, .lew-project-details, is the
   actual scope - so these rules apply plugin-wide via [class^="lew-"]). */
[class^="lew-"], [class*=" lew-"] { box-sizing: border-box; font-family: var(--lew-font-body); }
[class^="lew-"] h1, [class^="lew-"] h2, [class^="lew-"] h3, [class^="lew-"] h4 { font-family: var(--lew-font-heading); line-height: 1.2; margin: 0 0 var(--lew-space-3); color: var(--lew-color-text); }
[class^="lew-"] img { max-width: 100%; height: auto; display: block; }

/* Buttons (Widget 37 canonical) */
.lew-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--lew-space-2);
	background: var(--lew-button-bg); color: var(--lew-button-text);
	padding: var(--lew-button-padding-y) var(--lew-button-padding-x);
	border-radius: var(--lew-button-radius); border: none; font-weight: 600; font-size: 0.95rem;
	text-decoration: none; cursor: pointer; transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
	line-height: 1.2;
}
.lew-btn:hover, .lew-btn:focus-visible { background: var(--lew-button-bg-hover); color: var(--lew-button-text); transform: translateY(-1px); box-shadow: var(--lew-shadow-md); }
.lew-btn:active { transform: translateY(0) scale(.98); }
.lew-btn:focus-visible { outline: 2px solid var(--lew-color-primary); outline-offset: 2px; }
.lew-btn--outline { background: transparent; color: var(--lew-color-primary); border: 2px solid var(--lew-color-primary); }
.lew-btn--outline:hover { background: var(--lew-color-primary); color: #fff; }
.lew-btn--text { background: transparent; color: var(--lew-color-primary); padding-left: 0; padding-right: 0; }
.lew-btn--text:hover { background: transparent; text-decoration: underline; box-shadow: none; transform: none; }
.lew-btn--sm { padding: var(--lew-space-2) var(--lew-space-4); font-size: 0.85rem; }
.lew-btn--lg { padding: var(--lew-space-4) var(--lew-space-8); font-size: 1.05rem; }
.lew-btn--full { display: flex; width: 100%; }
.lew-btn--whatsapp { background: #25D366; }
.lew-btn--whatsapp:hover { background: #1ea952; }

/* Cards */
.lew-card {
	background: var(--lew-color-bg); border: 1px solid var(--lew-color-border);
	border-radius: var(--lew-radius-md); box-shadow: var(--lew-shadow-sm);
	overflow: hidden; transition: box-shadow .25s ease, transform .25s ease;
}
.lew-card:hover { box-shadow: var(--lew-shadow-md); transform: translateY(-3px); }
.lew-card__image { aspect-ratio: 4/3; overflow: hidden; background: var(--lew-color-surface); }
.lew-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.lew-card:hover .lew-card__image img { transform: scale(1.05); }
.lew-card__body { padding: var(--lew-space-4) var(--lew-space-6); }
.lew-card__title { font-size: 1.15rem; margin-bottom: var(--lew-space-2); }
.lew-card__meta { color: var(--lew-color-text-muted); font-size: 0.9rem; margin-bottom: var(--lew-space-3); }

/* Badges (status) */
.lew-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.lew-badge--ongoing { background: color-mix(in srgb, var(--lew-color-warning) 15%, white); color: var(--lew-color-warning); }
.lew-badge--completed { background: color-mix(in srgb, var(--lew-color-success) 15%, white); color: var(--lew-color-success); }
.lew-badge--upcoming { background: color-mix(in srgb, var(--lew-color-primary) 15%, white); color: var(--lew-color-primary); }

/* Grid layout helper */
.lew-grid { display: grid; gap: var(--lew-space-6); grid-template-columns: repeat(var(--lew-cols, 3), 1fr); }
@media (max-width: 1024px) { .lew-grid { grid-template-columns: repeat(min(var(--lew-cols, 3), 2), 1fr); } }
@media (max-width: 767px)  { .lew-grid { grid-template-columns: 1fr; } }

/* Forms (Booking / Contact) */
.lew-field { margin-bottom: var(--lew-space-4); }
.lew-field label { display: block; font-weight: 600; margin-bottom: var(--lew-space-2); font-size: 0.9rem; color: var(--lew-color-text); }
.lew-field input[type="text"], .lew-field input[type="email"], .lew-field input[type="tel"], .lew-field select, .lew-field textarea {
	width: 100%; padding: var(--lew-space-3) var(--lew-space-4); border: 1px solid var(--lew-color-border);
	border-radius: var(--lew-radius-sm); font-family: var(--lew-font-body); font-size: 1rem; background: var(--lew-color-bg);
	color: var(--lew-color-text); transition: border-color .2s ease;
}
.lew-field input:focus, .lew-field select:focus, .lew-field textarea:focus { outline: none; border-color: var(--lew-color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lew-color-primary) 20%, transparent); }
.lew-field--error input, .lew-field--error textarea { border-color: var(--lew-color-danger); }
.lew-field__error { color: var(--lew-color-danger); font-size: 0.82rem; margin-top: 4px; }
.lew-field-row { display: flex; gap: var(--lew-space-4); }
.lew-field-row .lew-field { flex: 1; }
@media (max-width: 600px) { .lew-field-row { flex-direction: column; gap: 0; } }

/* Empty / loading states */
.lew-empty { text-align: center; padding: var(--lew-space-12) var(--lew-space-4); color: var(--lew-color-text-muted); }
.lew-loading { opacity: .5; pointer-events: none; }

/* Accessibility utility */
.lew-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	[class^="lew-"] *, [class^="lew-"] *::before, [class^="lew-"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}