/* GGame – Offres & Gratuits
 * --------------------------------------------------------------------------
 * Couleurs pilotées par la palette du thème enfant (source unique) :
 *   --valid / --valid-border     (offre en cours)
 *   --expired / --expired-border (offre terminée)
 *   --soon / --soon-border       (offre à venir)
 *   --lightest                   (texte des badges)
 *
 * Deux vues partagent la même structure en sections (titre + <ul>) :
 *   - "list"     : pills (mise en forme ci-dessous).
 *   - "expanded" : grille de cartes via les classes natives du bloc
 *                  « Derniers articles » (wp-block-latest-posts is-grid).
 *                  AUCUN style de grille/carte ici : c'est géré nativement.
 *                  Les styles de liste sont donc scopés hors de cette vue.
 * -------------------------------------------------------------------------- */

/* ====== Conteneur + sections (commun aux deux vues) ===================== */
.ggame-offers {
	--ggo-radius: 14px;
	--ggo-gap: 0.5rem;
	--ggo-section-gap: 1.75rem;
	--ggo-pad-y: 0.85rem;
	--ggo-pad-x: 1.1rem;
	--ggo-bg: rgb(255 255 255 / 0.25);
	--ggo-bg-hover: rgb(0 0 0 / 0.2);
	--ggo-fg: #ffffff;
	--ggo-meta: rgb(255 255 255 / 0.7);

	display: flex;
	flex-direction: column;
	gap: var(--ggo-section-gap);
	margin: 1.5rem 0;
}

.ggame-offers__section[hidden] {
	display: none;
}

/* Mapping accent -> palette thème (états : soon / valid / expired). */
.ggame-offers__section--soon    { --ggo-accent: var(--soon); }
.ggame-offers__section--valid   { --ggo-accent: var(--valid); }
.ggame-offers__section--expired { --ggo-accent: var(--expired); }

/* Titre : on garde uniquement le flex (gap + alignement de l'icône).
 * Le reste (marge, couleur, taille) reste géré par le thème (h2 / h3). */
.ggame-offers__heading {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

/* Icône du titre, dans la couleur de l'état (mêmes icônes que les badges). */
.ggame-offers__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--ggo-accent, currentColor);
}

.ggame-offers__icon svg {
	width: 1.1em;
	height: 1.1em;
	fill: currentColor;
}

.ggame-offers__empty {
	margin: 0;
	color: var(--ggo-meta);
	font-style: italic;
}

/* ====== Vue "list" uniquement : pills =================================== *
 * Scopé en :not(.ggame-offers--expanded) pour ne jamais toucher la grille
 * native (display, padding, marges des <li>, etc.).                         */
.ggame-offers:not(.ggame-offers--expanded) .ggame-offers__list {
	display: flex;
	flex-direction: column;
	gap: var(--ggo-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Neutralise l'héritage du thème (puces ::before, marges sur les <li>). */
.ggame-offers:not(.ggame-offers--expanded) .ggame-offers__item {
	margin: 0 !important;
	padding-left: 0 !important;
}

.ggame-offers:not(.ggame-offers--expanded) .ggame-offers__item::before {
	content: none !important;
	display: none !important;
}

.ggame-offers:not(.ggame-offers--expanded) .ggame-offers__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: var(--ggo-pad-y) var(--ggo-pad-x);
	background: var(--ggo-bg);
	color: var(--ggo-fg);
	text-decoration: none;
	border-radius: var(--ggo-radius);
	border-left: 4px solid var(--ggo-accent, transparent);
	transition: background-color 0.15s ease;
}

.ggame-offers:not(.ggame-offers--expanded) .ggame-offers__link:hover,
.ggame-offers:not(.ggame-offers--expanded) .ggame-offers__link:focus-visible {
	background: var(--ggo-bg-hover);
}

.ggame-offers:not(.ggame-offers--expanded) .ggame-offers__name {
	font-weight: 600;
	line-height: 1.25;
}

.ggame-offers:not(.ggame-offers--expanded) .ggame-offers__meta {
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: 0.9rem;
	color: var(--ggo-meta);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
	.ggame-offers:not(.ggame-offers--expanded) .ggame-offers__link {
		flex-wrap: wrap;
		gap: 0.25rem 0.75rem;
	}
}

/* ====== Badges de statut d'offre (rapatrié du thème enfant) ============= */
.valid,
.expired,
.soon {
	display: inline-flex;
	align-items: center;
	column-gap: 0.33em;
	margin-right: 0.33em;
	padding: 0.045em 0.55em 0.045em 0.35em;
	border-radius: 2rem;
	border-width: 1px;
	border-style: solid;
	font-weight: 500;
	color: var(--lightest);
}

.valid {
	background-color: var(--valid);
	border-color: var(--valid-border);
}

.expired {
	background-color: var(--expired);
	border-color: var(--expired-border);
}

.soon {
	background-color: var(--soon);
	border-color: var(--soon-border);
}

/* ====== Liens et boutons de téléchargement (rapatrié du thème enfant) === */
.download-section {
	text-align: center;
}

.download-section::before {
	display: block;
	height: 34px;
	margin-top: -34px;
	visibility: hidden;
	content: " ";
}

.download-link,
.button-download {
	display: inline-flex;
	align-items: center;
	column-gap: 0.33em;
}