/* Module: Materials — ported from the approved slice (sections/04-materials.css) */
.materials { 
	padding-top: var(--gap-l);
	padding-bottom: var(--gap-l);
}
.materials__head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto var(--gap-l);
}
.materials__row {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}
.materials__cta { display: flex; justify-content: center; margin-top: 48px; }

.materials--theme-dark { background: var(--skin-dark-60); }
.materials--theme-dark .materials__head h1,
.materials--theme-dark .materials__head h2,
.materials--theme-dark .materials__head h3 { color: var(--skin-white); }
.materials--theme-dark .materials__head { color: var(--skin-white); }

/* Card */
.material-card {
	flex: 0 0 auto;
	height: 940px;
	border-radius: 32px;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	text-decoration: none;
	color: inherit;
}
.material-card__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.material-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
/* Hover */
.material-card:hover .material-card__media img { transform: scale(1.08); }
.material-card::after {
	content: '';
	position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
	background: radial-gradient(ellipse at bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 70%);
	pointer-events: none;
}
.material-card__content {
	position: relative;
	z-index: 2;
	max-width: 728px;
	padding: 96px 80px 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
}

/* Layout Style */
.material-card--text-outside {
	height: auto;
	flex-direction: column;
	align-items: stretch;
}
.material-card--text-outside::after { display: none; }
.material-card--text-outside .material-card__media {
	position: relative;
	inset: auto;
	height: 420px;
	border-radius: 32px;
	flex-shrink: 0;
}
.material-card--text-outside .material-card__content {
	position: static;
	max-width: none;
	padding: 10px 20px 20px!important;
	gap: 20px;
	flex: 1 1 auto;
}

.materials .material-card--text-outside .material-card {
	padding: 10px 20px 20px;
}

/* Card alignment */
.materials__row--align-left   { justify-content: flex-start; }
.materials__row--align-center { justify-content: center; }
.materials__row--align-right  { justify-content: flex-end; }

/* Text alignment */
.materials__row--text-left   .material-card__content { text-align: left;   align-items: flex-start; }
.materials__row--text-center .material-card__content { text-align: center; align-items: center; }
.materials__row--text-right  .material-card__content { text-align: right;  align-items: flex-end; }

/* Column count*/
.materials__row--cols-1 .material-card { width: 100%; }
.materials__row--cols-2 .material-card { width: calc(50% - 16px); }
.materials__row--cols-3 .material-card { width: calc(33.3333% - 21.3333px); }
.materials__row--cols-4 .material-card { width: calc(25% - 24px); }

.materials__row--cols-3 .material-card,
.materials__row--cols-4 .material-card,
.materials__row--slider .material-card {
	height: 480px;
}

/* Text Outside ignores the fixed 480px above. With height: auto here and
   the row's default flex align-items: stretch (inherited, never
   overridden), every text-outside card in the same row/slider stretches to
   match its tallest sibling automatically — no clipping, no magic number
   that stops fitting once someone edits the copy. The photo block stays
   locked at 420px (Layout Style rules above) either way, so images are
   always identical; the text block below (flex: 1 1 auto, same rules)
   absorbs whatever extra height the stretch adds. */
.materials__row--cols-3 .material-card--text-outside,
.materials__row--cols-4 .material-card--text-outside,
.materials__row--slider .material-card--text-outside {
	height: auto;
}

.materials__row--cols-4 .material-card::after {
	height: 95%;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
}

/* Feature First Card  */
.materials__row--featured {
	display: grid;
	grid-auto-rows: 454px;
	grid-auto-flow: row dense;
}
.materials__row--featured.materials__row--cols-1 { grid-template-columns: repeat(1, 1fr); }
.materials__row--featured.materials__row--cols-2 { grid-template-columns: repeat(2, 1fr); }
.materials__row--featured.materials__row--cols-3 { grid-template-columns: repeat(3, 1fr); }
.materials__row--featured.materials__row--cols-4 { grid-template-columns: repeat(4, 1fr); }
.materials__row--featured .material-card { width: auto; height: auto; }
.materials__row--featured .material-card:first-child { grid-row: span 2; }


.materials__row--featured .material-card {
	height: inherit;	
}

.materials__row--cols-3 .material-card h3,
.materials__row--featured .material-card:first-child .material-card__content h3 {
	font-size: 26px;
}	

.materials__row--featured .material-card:not(:first-child) .material-card__content {
	
}
.bullet-title .material-card__content h3,
.materials__row--cols-4 .material-card h3,
.materials__row--slider .material-card h3 {
	font-size: 20px;
}


.ttl-bt .material-card {
	align-items: flex-end;
}

.materials__row--slider .material-card__content,
.materials-alt.title-below .material-card__content {
	padding: 30px;
}

.bullet-title .material-card__content h3,
.materials-alt.title-below .material-card__content h3 {    
    padding: 8px 25px 10px;
	line-height: 1.46;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 -2px 15px rgba(0, 0, 0, 0.2), inset 0 2px 15px rgba(255, 255, 255, 0.4);
}


/* Slider mode */
.materials__row--slider {
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.materials__row--slider::-webkit-scrollbar { display: none; }
.materials__row--slider .material-card { scroll-snap-align: start; }
.materials__row--slider.materials__row--cols-1 .material-card { width: 85%; }
.materials__row--slider.materials__row--cols-2 .material-card { width: calc(50% - 16px); }
.materials__row--slider.materials__row--cols-3 .material-card { width: calc(33.3333% - 21.3333px); }
.materials__row--slider.materials__row--cols-4 .material-card { width: calc(25% - 24px); }

/* Nav buttons */
.materials__slider { position: relative; }
.materials__nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.5);
	color: var(--skin-dark-60);
	box-shadow: 0 4px 16px rgba(0,0,0,0.18);
	font-size: 18px;
	cursor: pointer;
	transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.materials__nav-btn--prev { left: 16px; }
.materials__nav-btn--next { right: 16px; }
.materials__nav-btn:hover { background: var(--skin-gradient); color: var(--skin-white); }

@media (min-width: 1281px) {
	.materials__nav-btn--prev {
		left: -80px;
	}
	.materials__nav-btn--next {
		right: -80px;
	}
	
	.materials__nav-btn {
		width: 64px;
		height: 64px;
	}

}