/* =============================================
   Landing Pages — Mobile Responsive Overrides
   ============================================= */

/* --- Global: prevent horizontal overflow from decorative backgrounds --- */
html {
	overflow-x: hidden;
	scrollbar-gutter: auto;
}
body {
	overflow-x: hidden;
	scrollbar-gutter: auto;
}
.wrapper {
	overflow-x: hidden;
	max-width: 100%;
	width: 100%;
}

/* =============================================
   CRITICAL FIX: All two-column flex containers
   have align-items:center in base CSS. When they
   switch to flex-direction:column on mobile,
   align-items:center makes children shrink-to-fit
   instead of stretching to full width, causing
   text overflow. Fix: align-items:stretch.
   ============================================= */

/* --- Mobile burger menu: full-screen overlay --- */
@media (max-width: 61.99875em) {
	/* Fix: backdrop-filter on header can make it a containing block for fixed elements
	   so height:100% in main.min.css gets the header's height instead of the viewport.
	   Explicitly set 100vh / 100dvh to guarantee full-screen menu. */
	.menu__body {
		height: 100vh;
		height: 100dvh;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding: 8rem 1.5rem 2rem;
	}

	.menu__list {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		row-gap: 2rem;
	}

	.menu__link {
		font-size: 1.5rem;
		display: block;
		padding: .25rem 0;
	}

	/* Login / Sign Up items inside the mobile menu */
	.menu__item--login .header__button,
	.menu__item--registration .header__button {
		font-size: 1.125rem;
		padding: .75rem 2rem;
	}

	.menu__item--login,
	.menu__item--registration {
		width: 100%;
		display: flex;
		justify-content: center;
	}
}

/* --- Header: lang switcher & actions on small screens --- */
@media (max-width: 47.99875em) {
	.header {
		padding-top: 1.25rem;
		padding-bottom: .75rem;
	}
	/* On home page <img> is .header__logo itself; on other pages it's inside <a.header__logo> */
	img.header__logo,
	.header__logo img {
		max-height: 2rem;
	}
	.header__actions {
		gap: .5rem;
	}
	.header__button {
		font-size: .75rem;
		padding: .5rem .75rem;
	}
	.header__lang::before {
		display: none;
	}
}

/* --- Hero section --- */
@media (max-width: 61.99875em) {
	.hero__container {
		flex-direction: column;
		align-items: stretch; /* override base align-items:center */
		text-align: center;
	}
	.hero__content {
		padding-bottom: 2rem;
		width: 100%;
	}
	.hero__image {
		max-width: 28rem;
		margin: 0 auto;
	}
	.hero__text {
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 47.99875em) {
	.hero {
		padding-top: 6.25rem;
	}
	.hero__image {
		max-width: 20rem;
	}
	.hero__actions {
		flex-direction: column;
		align-items: center;
		gap: .75rem;
	}
	.hero__actions .button {
		width: 100%;
		max-width: 20rem;
		text-align: center;
	}
	.title-h1 {
		font-size: 1.5rem;
	}
	.title-h1 span {
		display: block;
	}
}

@media (max-width: 29.99875em) {
	.hero {
		padding-top: 5.5rem;
	}
	.hero__image {
		max-width: 16rem;
	}
}

/* --- Mission section --- */
@media (max-width: 61.99875em) {
	.mission__container {
		align-items: stretch; /* override base align-items:center */
		text-align: center;
	}
	.mission__text {
		max-width: 100%;
	}
	.mission__informations {
		grid-template-columns: 1fr;
		text-align: center;
		width: 100%;
	}
}

@media (max-width: 47.99875em) {
	.info-mission__title {
		font-size: 3.5rem;
	}
	.info-mission__subtitle {
		font-size: .875rem;
		margin-top: 1rem;
	}
	.mission__informations {
		row-gap: 2rem;
		padding-top: 2rem;
	}
}

@media (max-width: 29.99875em) {
	.info-mission__title {
		font-size: 2.5rem;
	}
}

/* --- Benefits section --- */
@media (max-width: 61.99875em) {
	.benefits__content {
		text-align: center;
	}
	.benefits__text {
		margin-left: auto;
		margin-right: auto;
	}
	.title-h2 {
		justify-content: center;
		flex-wrap: wrap;
	}
}

@media (max-width: 47.99875em) {
	.benefits__items {
		grid-template-columns: 1fr !important;
	}
	.benefits__item--pt {
		padding-top: 0 !important;
	}
	.tab-benefits {
		padding: 1.25rem;
	}
	.tab-benefits__title {
		font-size: 1.25rem;
	}
	.nav-benefits__label {
		font-size: .875rem;
		padding: .75rem 1rem;
	}
}

/* --- Sweep section --- */
@media (max-width: 61.99875em) {
	.sweep__container {
		align-items: stretch; /* override for column layout */
		text-align: center;
	}
	.sweep__content {
		width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 47.99875em) {
	.sweep__image,
	.sweep--hero .sweep__image {
		max-width: 20rem;
		margin: 0 auto;
	}
	.sweep__list {
		margin-top: 2rem;
		text-align: left;
	}
	.sweep__actions {
		margin-top: 2.5rem;
		width: 100%;
	}
}

/* --- Image decorations: contain on small screens --- */
@media (max-width: 47.99875em) {
	.image-decor,
	.image-decor-2,
	.image-decor-3,
	.image-decor-4 {
		max-width: 100%;
	}
	.image-decor img,
	.image-decor-2 img,
	.image-decor-3 img,
	.image-decor-4 img {
		width: 100%;
		border-radius: 1rem;
	}
	.image-decor-2::before,
	.image-decor-3::before {
		transform: translate(-1.5rem, 1.5rem);
	}
}

@media (max-width: 29.99875em) {
	.image-decor-2::before,
	.image-decor-3::before {
		transform: translate(-0.75rem, 0.75rem);
	}
}

/* --- Security / Legal section --- */
@media (max-width: 61.99875em) {
	.security__container {
		align-items: stretch; /* override base align-items:center */
		text-align: center;
	}
	.security__content {
		width: 100%;
		max-width: 100%;
	}
	.security__list {
		text-align: left;
	}
	.security__image {
		max-width: 28rem;
		margin: 0 auto;
	}
}

@media (max-width: 47.99875em) {
	.security__image {
		max-width: 100%;
	}
	.list-security__item {
		font-size: 1rem;
		gap: 1rem;
	}
	.security__actions {
		margin-top: 2rem;
	}
	.security__list {
		margin-top: 2rem;
	}
}

/* --- Help section --- */
@media (max-width: 61.99875em) {
	.help__container {
		align-items: stretch; /* override base align-items:center */
		text-align: center;
	}
	.help__content {
		width: 100%;
		max-width: 100%;
	}
	.help__list {
		text-align: left;
	}
}

@media (max-width: 47.99875em) {
	.help__image {
		max-width: 20rem;
		margin: 0 auto;
	}
	.help__list {
		margin-top: 2rem;
	}
	.help__actions {
		margin-top: 2.5rem;
		width: 100%;
	}
}

/* --- Parties section --- */
@media (max-width: 61.99875em) {
	.parties__container {
		align-items: stretch; /* override for column layout */
	}
	.parties__content {
		width: 100%;
		max-width: 100%;
	}
	.parties__events {
		width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 47.99875em) {
	.events-parties__label {
		font-size: 1.25rem;
	}
	.events-parties__item {
		padding: 1.25rem;
	}
	.events-parties__header {
		flex-direction: column;
		align-items: flex-start;
		gap: .5rem;
	}
	.parties__actions {
		margin-top: 1.5rem;
	}
}

@media (max-width: 29.99875em) {
	.events-parties__label {
		font-size: 1.125rem;
		gap: .75rem;
	}
	.events-parties__text {
		font-size: .9375rem;
	}
}

/* --- Gallery section --- */
@media (max-width: 47.99875em) {
	.gallery__wrapper {
		gap: .75rem;
	}
	.gallery__item {
		min-height: 8rem;
		font-size: .875rem;
	}
	.gallery__item img:not(.gallery__item--image img) {
		width: 2rem;
		height: 2rem;
	}
	.gallery__button {
		margin-top: 3rem;
	}
	.gallery__list {
		margin-top: 1.5rem;
	}
	.gallery__list-item {
		font-size: 1rem;
		padding-left: 2rem;
	}
	.gallery__list-item::before {
		width: 1.25rem;
		height: 1.25rem;
	}
}

/* --- Form pages --- */
@media (max-width: 47.99875em) {
	.form-page {
		padding-top: 7.5rem;
	}
	.form-page__container {
		padding-left: .625rem;
		padding-right: .625rem;
	}
	.form__wrapper {
		padding: 1.5rem;
		border-radius: 1.25rem;
	}
	.form__label {
		font-size: 1rem;
	}
	.form__button,
	.form__checkbox {
		margin-top: 1.5rem;
	}
	.title-h2--mod {
		font-size: 1.25rem;
	}
}

@media (max-width: 29.99875em) {
	.form-page {
		padding-top: 6.5rem;
	}
	.form__wrapper {
		padding: 1.25rem;
		border-radius: 1rem;
	}
}

/* --- Content pages (Privacy, Terms) --- */
@media (max-width: 47.99875em) {
	.content__text {
		font-size: 1.125rem;
	}
	.content__subtitle {
		font-size: 1.25rem;
	}
	.content-list__item,
	.content-list-numeric__item {
		font-size: 1.125rem;
	}
}

@media (max-width: 29.99875em) {
	.content__text,
	.content-list__item,
	.content-list-numeric__item {
		font-size: 1rem;
	}
	.content__subtitle {
		font-size: 1.125rem;
	}
	.content__title:not(:last-child) {
		margin-bottom: 1.5rem;
	}
}

/* --- About page: what section --- */
@media (max-width: 61.99875em) {
	.what__container {
		align-items: stretch; /* override base for column-reverse */
	}
	.what__content {
		width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 47.99875em) {
	.what__container {
		text-align: center;
	}
	.what__list {
		text-align: left;
		margin-top: 2rem;
	}
	.what__actions {
		margin-top: 2.5rem;
		width: 100%;
	}
}

/* --- Sweep-coins page: how section --- */
@media (max-width: 61.99875em) {
	.how__container {
		align-items: stretch; /* override base align-items:center */
		text-align: center;
	}
	.how__content {
		width: 100%;
		max-width: 100%;
	}
	.how__list {
		text-align: left;
	}
	.how__text {
		max-width: 100%;
	}
}

@media (max-width: 47.99875em) {
	.how__image {
		max-width: 20rem;
		margin: 0 auto;
	}
}

/* --- list-content items --- */
@media (max-width: 29.99875em) {
	.list-content__item {
		align-items: flex-start;
	}
	.list-content__text {
		font-size: 1rem;
	}
	.list-content__title {
		font-size: 1.25rem;
	}
}

/* --- Footer on small screens --- */
@media (max-width: 29.99875em) {
	.footer__text {
		font-size: 1rem;
	}
	.menu-footer {
		flex-direction: column;
		gap: 1.5rem;
	}
	.footer__link {
		font-size: .875rem;
	}
}

/* --- Buttons: full-width on very small screens --- */
@media (max-width: 29.99875em) {
	.button--fw {
		width: 100%;
		text-align: center;
		justify-content: center;
	}
}

/* --- Image block (decorative card+pill) --- */
@media (max-width: 47.99875em) {
	.image-block {
		max-width: 100%;
	}
	.card-image {
		padding: 1rem;
	}
	.card-image::before {
		width: 3rem;
		height: 3rem;
		right: -.5rem;
		top: -.5rem;
	}
	.pill-image {
		padding: .75rem 1.25rem .75rem 1rem;
	}
}

/* --- Page hero spacings --- */
@media (max-width: 47.99875em) {
	.parties--hero {
		padding-top: 7.5rem;
	}
	.help--hero {
		padding-top: 7.5rem;
	}
	.sweep--hero {
		padding-top: 7.5rem;
	}
}

/* --- Content pages without hero: push below fixed header on mobile ---
   Terms/Privacy already have their own padding-top in page-specific CSS.
   how-we-check and cases use .content section but no page-level spacing. */
.page--how-we-check,
.page--cases {
	padding-top: 9.75rem;
}

@media (max-width: 29.99875em) {
	.page--how-we-check,
	.page--cases {
		padding-top: 7.5rem;
	}
}

/* --- Casino rating: reduce large top padding on mobile --- */
@media (max-width: 47.99875em) {
	.cr-section {
		padding-top: 6rem;
	}
}