/* ==========================================================
   RTSC WEBSITE V14 ULTIMATE
   RESPONSIVE.CSS
========================================================== */

/* ==========================================================
   LARGE DESKTOP (1600px+)
========================================================== */

@media (min-width:1600px){

.container{

    max-width:1500px;

}

.hero{

    min-height:800px;

}

.hero-title{

    font-size:4.5rem;

}

}

/* ==========================================================
   DESKTOP
========================================================== */

@media (max-width:1200px){

.container{

    padding:0 30px;

}

.footer-grid{

    grid-template-columns:repeat(2,1fr);

}

.tables-grid{

    grid-template-columns:repeat(2,1fr);

}

.video-grid{

    grid-template-columns:1fr;

}

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

.hero{

    padding:80px 0;

    text-align:center;

}

.hero-content{

    grid-template-columns:1fr;

    gap:50px;

}

.hero-image{

    order:-1;

}

.hero-title{

    font-size:3rem;

}

.section-title{

    flex-direction:column;

    align-items:flex-start;

    gap:20px;

}

.featured-sponsor-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-grid{

    grid-template-columns:1fr 1fr;

    gap:40px;

}

.news-grid{

    grid-template-columns:repeat(2,1fr);

}

.tables-grid{

    grid-template-columns:1fr;

}

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

.container{

    padding:0 20px;

}

section{

    padding:60px 0;

}

.hero{

    min-height:auto;

}

.hero-title{

    font-size:2.4rem;

}

.hero-subtitle{

    font-size:1rem;

}

.section-title h2{

    font-size:2rem;

}

.footer-grid{

    grid-template-columns:1fr;

}

.news-grid{

    grid-template-columns:1fr;

}

.sponsors-grid{

    grid-template-columns:repeat(2,1fr);

}

.tables-grid{

    grid-template-columns:1fr;

}

.dream-grid{

    grid-template-columns:repeat(2,1fr);

}

.player-stats{

    grid-template-columns:repeat(2,1fr);

}

.match-teams{

    flex-direction:column;

    gap:20px;

}

.match-score{

    margin:15px 0;

}

.video-player iframe{

    min-height:240px;

}

.footer-bottom{

    flex-direction:column;

    text-align:center;

    gap:20px;

}

.footer-links{

    justify-content:center;

    flex-wrap:wrap;

}

}

/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:576px){

.hero-title{

    font-size:2rem;

}

.hero-buttons{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.btn{

    width:100%;

}

.card{

    border-radius:16px;

}

.player-stats{

    grid-template-columns:1fr;

}

.dream-grid{

    grid-template-columns:1fr;

}

.sponsors-grid{

    grid-template-columns:1fr;

}

.footer-logo{

    width:90px;

}

.section-title h2{

    font-size:1.8rem;

}

.section-subtitle{

    font-size:.85rem;

}

.video-player iframe{

    min-height:200px;

}

.playlist-item{

    flex-direction:column;

    text-align:center;

}

.playlist-item img{

    width:100%;

    max-width:180px;

    margin:auto;

}

}

/* ==========================================================
   EXTRA SMALL DEVICES
========================================================== */

@media (max-width:380px){

.container{

    padding:0 15px;

}

.hero-title{

    font-size:1.7rem;

}

.section-title h2{

    font-size:1.5rem;

}

.badge{

    font-size:.75rem;

}

.btn{

    padding:12px 18px;

    font-size:.9rem;

}

}

/* ==========================================================
   LANDSCAPE PHONES
========================================================== */

@media (max-height:500px) and (orientation:landscape){

.hero{

    min-height:auto;

    padding:60px 0;

}

}

/* ==========================================================
   TOUCH DEVICES
========================================================== */

@media (hover:none){

.card:hover{

    transform:none;

}

.btn:hover{

    transform:none;

}

img:hover{

    transform:none;

}

}

/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

*,
*::before,
*::after{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

}

/* ==========================================================
   PRINT
========================================================== */

@media print{

header,
nav,
footer,
button,
.video-grid,
.sponsors-grid,
.footer-social{

    display:none !important;

}

body{

    background:#fff;

    color:#000;

}

.container{

    max-width:100%;

}

}