/* ==========================================================================
   JP Elétrica — redesign (industrial / editorial)
   Imported from Claude Design "JP Elétrica site redesign" and implemented
   as a production static site. Warm-grey canvas · ink #0d2039 · amber #f5c518.
   Most component styling is inline in index.html (design fidelity); this file
   holds the reset, layout helpers, responsive rules and production additions.
   ========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: hidden; }
body { background: #f4f4f1; }

img { display: block; max-width: 100%; }

a { color: #0d2039; text-decoration: none; }
a:hover { color: #6b6d12; }

::selection { background: #f5c518; color: #0d2039; }

/* Layout grids */
.jp-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.jp-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #d9d9d3; border: 1px solid #d9d9d3; }
.jp-cap-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.jp-proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.jp-norm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #d9d9d3; border: 1px solid #d9d9d3; }
.jp-area-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: #d9d9d3; border: 1px solid #d9d9d3; }
.jp-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.jp-desk-nav { display: flex; }
.jp-burger { display: none; }
.jp-hero-pad { padding: 96px 40px 88px; }

/* Prevent long unbreakable content (placeholder tokens, long PT words) from
   stretching grid/flex tracks wider than the viewport — the mobile-break bug. */
.jp-hero-grid > *, .jp-cap-grid > *, .jp-contact-grid > *,
.jp-svc-grid > *, .jp-proj-grid > *, .jp-norm-grid > *,
.jp-area-grid > *, .jp-stats > div { min-width: 0; }
.jp-hero-h1 { overflow-wrap: anywhere; }
.jp-eyebrow { flex-wrap: wrap; max-width: 100%; overflow-wrap: anywhere; }
/* Stat numbers can hold long placeholder tokens — let them wrap, never overflow */
.jp-stats div { overflow-wrap: anywhere; }

/* Photo slots — real images fill the design's [FOTO] frames */
.jp-photo { position: relative; overflow: hidden; background: #eaeae4; }
.jp-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Project card photo = clickable button that opens the lightbox */
.jp-job {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 0;
	padding: 0;
	margin: 0;
	background: #eaeae4;
	cursor: zoom-in;
	overflow: hidden;
	font: inherit;
	color: inherit;
}
.jp-job img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.jp-job:hover img { transform: scale(1.05); }
.jp-job--video::after {
	content: "";
	position: absolute; inset: 0; margin: auto;
	width: 54px; height: 54px; border-radius: 50%;
	background: rgba(245,197,24,.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d2039'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / 24px;
	pointer-events: none;
}

/* Mobile menu (replaces the design's <sc-if> conditional render) */
.jp-mobile-menu { display: none; }
.jp-mobile-menu.is-open { display: flex; }

/* Lightbox */
.lightbox {
	position: fixed; inset: 0; z-index: 100;
	display: none; align-items: center; justify-content: center;
	padding: 1.2rem; background: rgba(8,17,32,.92);
}
.lightbox.is-open { display: flex; }
.lightbox__media { max-width: min(1000px, 96vw); }
.lightbox__media img, .lightbox__media video { max-width: 100%; max-height: 82vh; display: block; margin: 0 auto; border: 1px solid #17324f; }
.lightbox__cap { text-align: center; color: #c9cbd0; margin-top: .9rem; font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
.lightbox__close {
	position: absolute; top: 1rem; right: 1rem;
	width: 44px; height: 44px; border: none; cursor: pointer;
	background: #f5c518; color: #0d2039; font-size: 1.5rem; line-height: 1;
	display: grid; place-items: center;
}

/* Responsive — from the design's own breakpoint */
@media (max-width: 860px) {
	.jp-hero-grid, .jp-cap-grid, .jp-contact-grid { grid-template-columns: 1fr; gap: 40px; }
	.jp-svc-grid, .jp-proj-grid { grid-template-columns: 1fr; }
	.jp-norm-grid { grid-template-columns: 1fr 1fr; }
	.jp-desk-nav { display: none; }
	.jp-burger { display: flex; }
	.jp-hero-pad { padding: 56px 22px 60px; }
	.jp-sec-pad { padding: 60px 22px !important; }
	.jp-head-pad { padding: 0 22px !important; }
	.jp-foot-pad { padding: 44px 22px 40px !important; }
	.jp-hero-h1 { font-size: 40px !important; }
	.jp-stats { gap: 26px !important; }
	.jp-stat-b { padding-left: 26px !important; }
}

/* Phones: shrink the headline and stack the stats so nothing is clipped */
@media (max-width: 560px) {
	.jp-hero-h1 { font-size: 34px !important; }
	.jp-stats { flex-direction: column; gap: 18px !important; }
	.jp-stat-b { border-left: none !important; padding-left: 0 !important; }
	.jp-eyebrow { letter-spacing: 0.06em !important; font-size: 11px !important; }
}

/* Floating WhatsApp button (FAB) — every viewport, respects safe-area insets */
.wa-fab {
	position: fixed;
	z-index: 60;
	right: calc(20px + env(safe-area-inset-right, 0px));
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	display: grid;
	place-items: center;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
	transition: transform .2s ease, box-shadow .2s ease;
}
.wa-fab:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(37, 211, 102, .45); color: #fff; }
.wa-fab svg { width: 32px; height: 32px; }
@media (prefers-reduced-motion: reduce) {
	.wa-fab { transition: none; }
	.wa-fab:hover { transform: none; }
}

/* Accessibility */
a:focus-visible, button:focus-visible {
	outline: 2px solid #0d2039;
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.jp-job img { transition: none; }
}