/* Modo Site Theme — front-end CSS
   Variáveis (--modo-*) são injetadas inline em single-modo_site.php.
   Aqui ficam apenas defaults, layout e variações. */

:root {
	--modo-bg: #ECEAE6;
	--modo-fg: #0C0B09;
	--modo-muted: #5C5A55;
	--modo-accent: #2E2C28;
	--modo-surface: #F7F5F1;
	--modo-line: #D8D4CC;
	--modo-font-display: 'Barlow', system-ui, sans-serif;
	--modo-font-body: 'DM Sans', system-ui, sans-serif;
	--modo-font-mono: 'Barlow Condensed', system-ui, monospace;
	--modo-radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--modo-bg);
	color: var(--modo-fg);
	font-family: var(--modo-font-body);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.modo-container {
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 24px;
}

.modo-section { padding: clamp(48px, 8vw, 96px) 0; border-bottom: 1px solid var(--modo-line); }

.modo-kicker {
	font-family: var(--modo-font-mono);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 11px;
	color: var(--modo-muted);
	margin: 0 0 12px;
}

.modo-display {
	font-family: var(--modo-font-display);
	font-weight: 700;
	font-size: clamp(28px, 5vw, 56px);
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0 0 16px;
}
.modo-display--xl { font-size: clamp(40px, 8vw, 96px); }

.modo-lead {
	font-size: clamp(15px, 1.4vw, 18px);
	color: var(--modo-muted);
	max-width: 60ch;
	margin: 0 0 20px;
}

.modo-num {
	font-family: var(--modo-font-display);
	font-weight: 700;
	font-size: 26px;
	color: var(--modo-fg);
}
.modo-num--lg { font-size: 48px; }

.modo-label {
	font-family: var(--modo-font-mono);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 11px;
	color: var(--modo-muted);
}

/* Buttons */
.modo-cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; }
.modo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--modo-font-body);
	font-weight: 600;
	font-size: 14px;
	padding: 12px 22px;
	border-radius: 999px;
	border: 1px solid var(--modo-fg);
	cursor: pointer;
	transition: transform .15s ease, background .15s ease, color .15s ease;
}
.modo-btn--primary { background: var(--modo-fg); color: var(--modo-bg); }
.modo-btn--primary:hover { transform: translateY(-1px); }
.modo-btn--ghost { background: transparent; color: var(--modo-fg); }
.modo-btn--ghost:hover { background: var(--modo-fg); color: var(--modo-bg); }

/* Hero */
.modo-hero__split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.modo-hero__photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--modo-radius); }
@media (max-width: 800px) { .modo-hero__split { grid-template-columns: 1fr; } }

.modo-hero__centered, .modo-hero__editorial { text-align: left; max-width: 900px; }
.modo-hero__cards {
	list-style: none; padding: 0; margin: 28px 0 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
}
.modo-hero__cards li {
	background: var(--modo-surface); border: 1px solid var(--modo-line);
	border-radius: var(--modo-radius); padding: 18px;
	display: flex; flex-direction: column; gap: 6px;
}

/* About */
.modo-manifesto {
	font-family: var(--modo-font-display); font-size: clamp(22px, 3vw, 32px);
	line-height: 1.25; border-left: 4px solid var(--modo-accent);
	padding: 6px 0 6px 18px; margin: 0 0 24px;
}
.modo-prose p { max-width: 65ch; color: var(--modo-fg); }

/* Areas */
.modo-areas__grid {
	list-style: none; padding: 0; margin: 0;
	display: grid; gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.modo-card {
	background: var(--modo-surface); border: 1px solid var(--modo-line);
	border-radius: var(--modo-radius); padding: 22px;
}
.modo-card h3 { margin: 0 0 8px; font-family: var(--modo-font-display); }
.modo-card p { margin: 0; color: var(--modo-muted); }

/* Skills */
.modo-skills__wrap { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.modo-skill-group h4 { margin: 0 0 10px; font-family: var(--modo-font-display); font-size: 14px; }
.modo-skill-group ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.modo-chip {
	display: inline-flex; align-items: center;
	padding: 6px 12px; border-radius: 999px;
	background: var(--modo-surface); border: 1px solid var(--modo-line);
	font-size: 13px; color: var(--modo-fg);
}

/* Cases */
.modo-cases__grid {
	list-style: none; padding: 0; margin: 0;
	display: grid; gap: 18px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.modo-cases--horizontal .modo-cases__grid { grid-template-columns: 1fr; }
.modo-case__btn {
	width: 100%; text-align: left; cursor: pointer;
	background: var(--modo-surface); border: 1px solid var(--modo-line);
	border-radius: var(--modo-radius); overflow: hidden;
	display: grid; gap: 10px; padding: 0;
	color: inherit; font: inherit;
	transition: transform .15s ease, border-color .15s ease;
}
.modo-case__btn:hover { transform: translateY(-2px); border-color: var(--modo-fg); }
.modo-case__cover { display: block; width: 100%; aspect-ratio: 16/10; background: var(--modo-line) center/cover no-repeat; }
.modo-case__meta  { display: grid; gap: 4px; padding: 16px 18px 18px; }
.modo-case__name  { font-family: var(--modo-font-display); font-weight: 600; font-size: 17px; }
.modo-case__sub   { color: var(--modo-muted); font-size: 13px; }

.modo-case__modal {
	border: none; padding: 0; background: var(--modo-bg); color: var(--modo-fg);
	border-radius: var(--modo-radius); max-width: 880px; width: 92%;
}
.modo-case__modal::backdrop { background: rgba(0,0,0,.55); }
.modo-case__modal-body { padding: 32px; max-height: 80vh; overflow-y: auto; }
.modo-case__close-form { position: sticky; top: 0; display: flex; justify-content: flex-end; padding: 8px 12px 0; }
.modo-case__close { background: transparent; border: 0; font-size: 24px; cursor: pointer; color: var(--modo-fg); }
.modo-case__media { display: grid; gap: 10px; margin: 16px 0; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.modo-case__media img, .modo-case__media video { width: 100%; border-radius: 8px; }
.modo-tags { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 6px; }

/* Contact */
.modo-contact__links { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }

/* Footer */
.modo-footer { padding: 28px 0; color: var(--modo-muted); font-size: 12px; border-top: 1px solid var(--modo-line); }

/* ---------- Landing (front-page) ---------- */
.modo-landing { padding: clamp(60px, 10vw, 120px) 0; }
.modo-landing__hero { max-width: 760px; }

/* Layouts: ajustes finos por --modo-layout-* (configurado em body class) */
.modo-layout-editorial .modo-display { letter-spacing: -0.02em; }
.modo-layout-landing .modo-section { padding: clamp(36px, 6vw, 80px) 0; }
.modo-layout-portfolio .modo-cases__grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.modo-layout-institutional .modo-display { font-weight: 600; }
.modo-layout-comercial .modo-btn--primary { background: var(--modo-accent); border-color: var(--modo-accent); color: #fff; }
.modo-layout-tecnico .modo-section { border-color: color-mix(in oklab, var(--modo-fg) 18%, transparent); }
.modo-layout-premium .modo-card { background: color-mix(in oklab, var(--modo-fg) 5%, var(--modo-surface)); }