/**
 * Layout full-width e responsivo — Marcos Folio
 */

/* Conteúdo da homepage sem “caixa” estreita do tema */
.mf-home-main .wp-block-post-content,
.mf-home-main .entry-content,
.mf-sobre-main .wp-block-post-content,
.mf-sobre-main .entry-content {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.mf-wrap {
	width: 100%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(1rem, 4vw, 2rem);
	padding-right: clamp(1rem, 4vw, 2rem);
	box-sizing: border-box;
}

/* Secções full-bleed dentro do post content */
.mf-section--full {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.mf-section--full.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.mf-section--light {
	padding-top: clamp(2.5rem, 6vw, 4.5rem);
	padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

/* Hero */
.mf-hero.ft1-hero-split {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-top: clamp(2.5rem, 6vw, 5rem);
	padding-bottom: clamp(2.5rem, 6vw, 5rem);
	box-sizing: border-box;
}

.mf-hero .mf-wrap {
	max-width: 1400px;
}

/* Colunas lado a lado no desktop (não forçar 100% em todas) */
.mf-hero .mf-hero__columns.ft1-hero-columns {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: clamp(2rem, 4vw, 3.5rem) !important;
}

.mf-hero .mf-hero__columns > .wp-block-column {
	min-width: 0;
}

.mf-hero .mf-hero__columns > .wp-block-column.mf-hero__content {
	flex: 1 1 56% !important;
	max-width: 62%;
}

.mf-hero .mf-hero__columns > .wp-block-column.mf-hero__aside {
	flex: 0 1 40% !important;
	max-width: 420px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}

.mf-hero__content .wp-block-heading {
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	line-height: 1.1;
	word-wrap: break-word;
}

.mf-hero__content .has-large-font-size {
	font-size: clamp(1rem, 2vw, 1.25rem);
	line-height: 1.65;
	max-width: 42rem;
}

.mf-hero__photo {
	margin: 0 0 1.25rem;
}

.mf-hero__photo img {
	width: 100%;
	max-width: 320px;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	border: 4px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
	display: block;
	margin: 0 auto;
}

.mf-hero__card {
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #f9fafb;
	width: 100%;
	box-sizing: border-box;
}

.mf-hero__aside .mf-hero__card .wp-block-list {
	margin: 0.5rem 0 0;
	padding-left: 1.15rem;
}

.mf-hero__card .wp-block-heading,
.mf-hero__card .wp-block-list {
	color: inherit;
}

.mf-hero.ft1-hero-split .wp-block-button.is-style-outline .wp-block-button__link {
	color: #f9fafb;
	border-color: rgba(255, 255, 255, 0.45);
}

/* Secção portfolio intro */
.mf-portfolio-intro .wp-block-heading {
	font-size: clamp(1.75rem, 3vw, 2.25rem);
}

.mf-portfolio-intro .has-medium-font-size {
	font-size: clamp(1rem, 2vw, 1.125rem);
	line-height: 1.7;
	max-width: 52rem;
}

.mf-intro-columns {
	gap: clamp(1.5rem, 3vw, 2.5rem) !important;
}

.mf-intro-columns > .wp-block-column {
	flex-basis: 100% !important;
	min-width: 0;
}

@media (min-width: 768px) {
	.mf-intro-columns > .wp-block-column {
		flex-basis: calc(50% - 1rem) !important;
	}
}

/* Grelha de projetos — ver pages.css para detalhe dos cards */

.mf-projects-heading {
	padding-left: clamp(1rem, 4vw, 2rem);
	padding-right: clamp(1rem, 4vw, 2rem);
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

/* Desktop: garantir linha mesmo com is-stacked-on-mobile + inline styles */
@media (min-width: 782px) {
	.mf-hero .mf-hero__columns.is-stacked-on-mobile > .wp-block-column {
		flex-basis: auto !important;
	}

	.mf-hero .mf-hero__columns > .wp-block-column.mf-hero__content {
		flex: 1 1 56% !important;
		flex-basis: 56% !important;
	}

	.mf-hero .mf-hero__columns > .wp-block-column.mf-hero__aside {
		flex: 0 1 40% !important;
		flex-basis: 40% !important;
	}
}

/* Mobile: empilhar hero */
@media (max-width: 781px) {
	.mf-hero .mf-hero__columns.ft1-hero-columns {
		flex-direction: column !important;
		flex-wrap: wrap !important;
	}

	.mf-hero .mf-hero__columns > .wp-block-column.mf-hero__content,
	.mf-hero .mf-hero__columns > .wp-block-column.mf-hero__aside {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	.mf-hero .mf-hero__aside {
		order: -1;
	}

	.mf-hero__photo img {
		max-width: 200px;
	}
}