/* ------------------------------------------------------------------
   Aggiunte a index.css per la nuova homepage.
   Qui dentro sta solo ciò che index.css non copriva già:
   i bottoni-link, la griglia degli atleti e il cambio lingua.
   ------------------------------------------------------------------ */

/* --- Bottoni ---------------------------------------------------------
   Prima erano <button onclick="location.href=..."> e senza JavaScript non
   andavano da nessuna parte. Ora sono link veri, vestiti da bottone.       */
.btn {
	display: inline-block;
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	background-color: #AA1111;
	border: none;
	color: white;
	padding: 5px 15px;
	cursor: pointer;
	text-transform: uppercase;
	text-decoration: none;
}
.btn:hover,
.btn:focus-visible {
	background-color: #F00F0F;
}
.onepage_section_column.align_center .btn {
	margin-top: 30px;
}
.onepage_newbuttons .btn {
	padding: 10px 20px;
}

/* --- Immagini --------------------------------------------------------
   <picture> serve a dare al telefono la sua versione dell'immagine senza
   passare per JavaScript, ma di suo è un elemento in linea: va reso blocco. */
.onepage_section_photo picture {
	display: block;
}
figure {
	margin: 0;
}

/* --- Atleti ----------------------------------------------------------
   Una sola scheda per atleta, non più una copia per il desktop e una per il
   telefono. Su schermo largo: testo e foto affiancati (--photo-w decide la
   larghezza della foto, e si può invertire il lato con .athlete_flip).
   Su schermo stretto: nome, foto, biografia, uno sotto l'altro.            */
.athlete {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin-bottom: 50px;
}
.athlete_photo {
	margin: 0 0 20px 0;
}
.athlete_photo img {
	display: block;
}

@media only screen and (min-width: 1281px) {
	.athlete {
		grid-template-columns: minmax(0, 1fr) var(--photo-w, 480px);
		grid-template-areas:
			"name  photo"
			"bio   photo";
		column-gap: 30px;
		align-content: center;
	}
	.athlete_name  { grid-area: name; }
	.athlete_bio   { grid-area: bio; }
	.athlete_photo { grid-area: photo; align-self: center; margin: 0; }

	.athlete_flip {
		grid-template-columns: var(--photo-w, 480px) minmax(0, 1fr);
		grid-template-areas:
			"photo name"
			"photo bio";
	}
}

@media only screen and (min-width: 1550px) {
	.athlete {
		grid-template-columns: minmax(0, 1fr) var(--photo-w-xl, var(--photo-w, 480px));
	}
	.athlete_flip {
		grid-template-columns: var(--photo-w-xl, var(--photo-w, 480px)) minmax(0, 1fr);
	}
}

/* --- Cambio lingua ---------------------------------------------------- */
.langswitch {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 15px 20px;
}
.langswitch_item {
	font-family: 'Stick';
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 1px;
	color: white;
	text-decoration: none;
	opacity: 0.55;
}
.langswitch_item:hover,
.langswitch_item:focus-visible {
	opacity: 1;
}
.langswitch_item.is_current {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.site_header .langswitch {
	padding: 0;
	margin-left: auto;
	margin-right: 15px;
}

/* --- Testata: elementi diventati link e bottoni veri ------------------- */
.logo_wrapper {
	display: block;
	text-decoration: none;
}
.site_header .logo,
.navbar .logo,
.navbar_header_menu .logo {
	display: block;
}
.hamburger_wrapper {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
}
.hamburger_wrapper img {
	display: block;
	width: 100%;
}

/* --- Visore foto ------------------------------------------------------ */
#photoviewer[hidden] {
	display: none;
}

/* --- Menu laterale sopra al contenuto ---------------------------------
   Prima il menu stava in fondo al documento e finiva sopra la pagina per
   pura fortuna dell'ordine degli elementi. Ora lo dice esplicitamente.   */
.navbar {
	z-index: 2;
}

/* --- Pagina video -----------------------------------------------------
   Ogni riquadro tiene le proporzioni di YouTube (16:9) e il player lo
   riempie: prima era 4:3 e i video restavano incorniciati di nero.       */
.onepage_section_galleriavideo {
	position: relative;
	background-color: black;
	aspect-ratio: 16 / 9;
}
.onepage_section_galleriavideo iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* --- Pagine interne ---------------------------------------------------
   Quando il titolo non ha sottotitolo sotto, serve un po' d'aria prima
   che cominci il testo.                                                  */
.onepage_header .pagetitle:last-child {
	margin-bottom: 30px;
}

/* --- Gestione news (admin_news.php) ------------------------------------ */
.admin_news .onepage {
	padding-left: 0;
}
.admin_news table {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	border-collapse: collapse;
	color: white;
}
.admin_news th,
.admin_news td {
	padding: 10px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid #666;
	font-family: 'Raleway';
	font-size: 14px;
}
.admin_news textarea {
	width: 100%;
	min-height: 120px;
	box-sizing: border-box;
	font-family: 'Raleway';
	font-size: 14px;
}
.admin_news input[type="date"],
.admin_news input[type="file"] {
	font-family: 'Raleway';
	font-size: 14px;
	color: white;
}
.admin_news .admin_news_current {
	margin-bottom: 8px;
	opacity: 0.7;
	word-break: break-all;
}
.admin_news button {
	font-family: 'Raleway';
	font-size: 14px;
	background-color: #AA1111;
	border: none;
	color: white;
	padding: 8px 16px;
	cursor: pointer;
	text-transform: uppercase;
}
.admin_news .actions {
	max-width: 1200px;
	margin: 20px auto;
	display: flex;
	gap: 10px;
}
.admin_news .admin_login {
	max-width: 320px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.admin_news .admin_login input {
	padding: 10px;
	border: none;
	font-family: 'Raleway';
	font-size: 16px;
}