/* =========================================================
   RF v1.4 - main.css
   Tutti i colori e font sono variabili CSS (--sm-*),
   impostate dinamicamente da inc/customizer.php in base
   alle scelte fatte nel Customizer di WordPress.
   ========================================================= */

:root{
	--sm-primary: #1e63d0;
	--sm-secondary: #ff5a36;
	--sm-text: #222222;
	--sm-heading: #111111;
	--sm-background: #ffffff;
	--sm-header-bg: #0d0d0d;
	--sm-header-text: #ffffff;
	--sm-card-bg: #f7f7f7;
	--sm-heading-font: 'Poppins', sans-serif;
	--sm-body-font: 'Inter', sans-serif;
	--sm-base-size: 16px;
	--sm-radius: 14px;
	--sm-slider-height: 480px;
	--sm-hover-speed: 450ms;
	--sm-card-image-radius: 14px;
	--sm-card-radius: 14px;
}

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

body{
	margin: 0;
	background: var(--sm-background);
	color: var(--sm-text);
	font-family: var(--sm-body-font);
	font-size: var(--sm-base-size);
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6{
	font-family: var(--sm-heading-font);
	color: var(--sm-heading);
	line-height: 1.25;
	margin: 0 0 .5em;
}

a{ color: var(--sm-primary); text-decoration: none; }
a:hover{ color: var(--sm-secondary); }

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

.sm-main{
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 24px 80px;
}

/* =========================
   HEADER / BRANDING
   ========================= */
.sm-header{
	background: var(--sm-header-bg);
	color: var(--sm-header-text);
	padding-bottom: 8px;
}

.sm-header__identity{
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding: 20px 24px;
}

.sm-branding{
	display: flex;
	align-items: center;
	gap: 16px;
}

.sm-branding__logo img{
	max-height: 56px;
	width: auto;
}

.sm-branding__sitename{
	margin: 0;
	font-family: var(--sm-heading-font);
	font-size: 1.6rem;
	font-weight: 700;
}
.sm-branding__sitename a{ color: var(--sm-header-text); }

.sm-branding__tagline{
	margin: 4px 0 0;
	font-size: .85rem;
	opacity: .75;
}

.sm-nav ul{
	list-style: none;
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0;
}
.sm-nav a{ color: var(--sm-header-text); font-weight: 500; }
.sm-nav a:hover{ color: var(--sm-secondary); }

/* =========================
   SLIDER HEADER (ultimi articoli)
   ========================= */
.sm-slider{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: min(var(--sm-slider-height, 480px), 90vh);
	background: #000;
}

.sm-slider__track{
	display: flex;
	height: 100%;
	transition: transform .6s cubic-bezier(.65,0,.35,1);
	will-change: transform;
}

.sm-slider__slide{
	flex: 0 0 100%;
	position: relative;
	height: 100%;
	overflow: hidden;
}

/* Riempimento laterale: immagini sfocate degli articoli precedente/successivo,
   visibili solo negli spazi vuoti lasciati dall'immagine principale (object-fit: contain) */
.sm-slider__bg{
	position: absolute;
	inset: 0;
	display: flex;
	z-index: 1;
}
.sm-slider__bg-half{
	flex: 1 1 50%;
	height: 100%;
	background-size: cover;
	background-position: center;
	filter: blur(22px) brightness(.6) saturate(1.1);
	transform: scale(1.15); /* evita bordi netti ai margini dovuti al blur */
}

.sm-slider__link{ display: block; height: 100%; position: relative; z-index: 2; }

.sm-slider__img{
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: contain; /* mantiene le proporzioni originali dell'immagine */
	object-position: center;
	z-index: 2;
}

.sm-slider__overlay{
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 24px 32px;
	background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sm-slider__category{
	color: var(--sm-secondary);
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.sm-slider__title{
	color: #fff;
	font-family: var(--sm-heading-font);
	font-size: 1.5rem;
	font-weight: 600;
	max-width: 70%;
}

.sm-slider__nav{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0,0,0,.45);
	color: #fff;
	border: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 1.5rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease;
}
.sm-slider__nav:hover{ background: var(--sm-secondary); }
.sm-slider__nav--prev{ left: 16px; }
.sm-slider__nav--next{ right: 16px; }

.sm-slider__dots{
	position: absolute;
	bottom: 14px;
	right: 24px;
	display: flex;
	gap: 8px;
}
.sm-slider__dot{
	width: 9px; height: 9px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,.5);
	cursor: pointer;
	padding: 0;
}
.sm-slider__dot.is-active{ background: var(--sm-secondary); }

/* =========================
   GRIGLIA ARTICOLI HOME
   ========================= */
.sm-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 32px;
}

.sm-card{
	background: var(--sm-card-bg);
	border-radius: var(--sm-card-radius, 14px);
	overflow: visible;
	display: flex;
	flex-direction: column;
}

.sm-card__media-link{ display: block; }

.sm-card__media{
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: visible; /* necessario per non tagliare l'immagine in rotazione */
	border-radius: var(--sm-card-image-radius, 14px);
}

.sm-card__img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--sm-card-image-radius, 14px);
}

/* Copia sottostante: ferma, in bianco e nero */
.sm-card__img--bottom{
	z-index: 1;
	filter: grayscale(100%);
}

/* Immagine sopra: quella che ruota verso destra all'hover.
   Velocità dell'animazione modificabile da Customizer (--sm-hover-speed). */
.sm-card__img--top{
	z-index: 2;
	transition: transform var(--sm-hover-speed, 450ms) cubic-bezier(.34,1.2,.4,1), box-shadow var(--sm-hover-speed, 450ms) ease;
	transform-origin: 50% 50%;
	box-shadow: 0 4px 10px rgba(0,0,0,0);
}

.sm-card__img--placeholder{
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--sm-primary), var(--sm-secondary));
	border-radius: var(--sm-card-image-radius, 14px);
}

.sm-card__media-link:hover .sm-card__img--top,
.sm-card__media-link:focus-visible .sm-card__img--top{
	transform: rotate(10deg) scale(.94);
	box-shadow: 0 14px 28px rgba(0,0,0,.25);
}

.sm-card__body{
	padding: 18px 4px 4px;
}

.sm-card__title{
	font-size: 1.15rem;
	margin-bottom: 12px;
}
.sm-card__title a{ color: var(--sm-heading); }
.sm-card__title a:hover{ color: var(--sm-primary); }

.sm-soundcloud-player iframe{
	border-radius: 8px;
	display: block;
}

/* =========================
   ARTICOLO SINGOLO
   ========================= */
.sm-single{ max-width: 820px; margin: 0 auto; }
.sm-single__category{
	color: var(--sm-secondary);
	font-weight: 700;
	text-transform: uppercase;
	font-size: .8rem;
	letter-spacing: .05em;
}
.sm-single__title{ font-size: 2.1rem; }
.sm-single__meta{ color: #777; font-size: .9rem; margin-bottom: 24px; }
.sm-single__thumbnail{ margin-bottom: 24px; border-radius: var(--sm-radius); overflow: hidden; }
.sm-single__content{ margin-top: 24px; }
.sm-single__content p{ margin: 0 0 1.2em; }

/* =========================
   FOOTER
   ========================= */
.sm-footer{
	background: var(--sm-header-bg);
	color: var(--sm-header-text);
	padding: 40px 24px 20px;
	margin-top: 60px;
}
.sm-footer__widgets{
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
}
.sm-footer__bottom{
	max-width: 1200px;
	margin: 24px auto 0;
	padding-top: 16px;
	border-top: 1px solid rgba(255,255,255,.15);
	font-size: .85rem;
	opacity: .7;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 640px){
	.sm-slider{ height: min(var(--sm-slider-height, 480px), 60vh); }
	.sm-slider__title{ font-size: 1.15rem; max-width: 100%; }
	.sm-header__identity{ flex-direction: column; align-items: flex-start; }
}