/* ========================================
   RESET & BASE
======================================== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
}

body {
	overflow-x: hidden;
	font-family: "Inter", sans-serif;
}

/* ========================================
   GRID SYSTEM (12 columns)
======================================== */
.nrow {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	place-items: center;
	width: 100%;
}

/* Columns */
.c-1  { grid-column: span 1; }
.c-2  { grid-column: span 2; }
.c-3  { grid-column: span 3; }
.c-4  { grid-column: span 4; }
.c-5  { grid-column: span 5; }
.c-6  { grid-column: span 6; }
.c-7  { grid-column: span 7; }
.c-8  { grid-column: span 8; }
.c-9  { grid-column: span 9; }
.c-10 { grid-column: span 10; }
.c-11 { grid-column: span 11; }
.c-12 { grid-column: span 12; }

/* ========================================
    RESPONSIVE IMAGE
======================================== */
.img-responsive {
	width: 100%;
	max-width: 480px;
	height: auto;
	display: block;
}

/* ========================================
   BREAKPOINTS
======================================== */

/* ----- Tablet e Mobile (to 991px) ----- */
@media (max-width: 991px) {

	.nrow {
		grid-template-columns: 1fr !important;
		justify-items: center;
		align-content: center;
		text-align: center;
		padding: 20px;
	}

	/* Faz as colunas ocuparem 100% e centralizarem */
	[class*="c-"] {
		grid-column: 1 / -1 !important;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.text-huge {
		text-align: center;
		width: 100%;
	}

	.btn-huge {
		display: inline-block;
		margin: 0 auto;
	}

	.imgresponsive {
		margin-left: auto;
		margin-right: auto;
	}
	
	/*film scroll effect*/
	.media-row-title {
		padding-left: 1.25rem;
		font-size: 1.2rem;
	}

	.media-row-track {
		padding: 0.5rem 1.25rem 1.5rem;
		gap: 10px;
	}

	.media-card {
		width: 140px !important;
		height: 210px !important;
	}

	.media-card-rank {
		font-size: 3.2rem;
	}

	.media-row-btn {
		display: none;
	}
	/*end scroll effect*/
	
	.section {
		padding: 2.5rem 1.25rem;
	}

	.section-full {
		min-height: 100svh; /* better on mobile browsers */
	}

	.section-lg {
		padding: 3.5rem 1.25rem;
	}

	.section-sm {
		padding: 1.5rem 1.25rem;
	}
	.card{
		margin-bottom: 10px !important;
	}
	.text-huge {
		font-size: 14vw;
	}
	.btn-huge {
		font-size: 5.5vw;
		padding: 16px 28px;
	}
	.text-4xl { font-size: 1.75rem; }
	.text-5xl { font-size: 2.25rem; }
	/* Force center on mobile */
	.m-center {
		text-align: center !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.m-t-center {
		text-align: center !important;
	}

	.m-t-left {
		text-align: left !important;
	}

	.m-t-right {
		text-align: right !important;
	}

	/* Keep centered even if desktop is left/right */
	.m-mx-auto {
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.h-mobile{display:none;}
}
/* ----- Desktop ----- */
@media (min-width: 992px) {
	.img-responsive {
		width: 40vw;
		max-width: 520px;
	}
	.card{
		margin-bottom: 10px !important;
	}
}

/* ----- Large Desktop ----- */
@media (min-width: 1200px) {
	.img-responsive {
		width: 32vw;
		max-width: 620px;
	}
	.card{
		margin-bottom: 10px !important;
	}
	.text-huge {
		font-size: 8vw;
	}

	.btn-huge {
		font-size: 2.8vw;
		padding: 18px 36px;
	}
}

/* ----- 2K / 4K ----- */
@media (min-width: 1800px) {
	.img-responsive {
		width: 28vw;
		max-width: 780px;
	}
	.card{
		margin-bottom: 10px !important;
	}
	.btn-huge {
		font-size: 2.4vw;
		padding: 22px 40px;
	}
	.text-huge {
		font-size: 2.4vw;
		padding: 22px 40px;
	}
}

/* ========================================
   EXTRAS UTILITARIES (opcional)
======================================== */
.tcenter { text-align: center; }
.w-100      { width: 100%; }
.h-100      { height: 100%; }
.mx-auto    { margin-left: auto; margin-right: auto; }