/* ===================================================
   MOLLYRA LINK
   responsive.css
   Part 1
=================================================== */

/* ======================================
Large Desktop
====================================== */

@media (max-width:1400px){

    .page{

        max-width:580px;

    }

}


/* ======================================
Laptop
====================================== */

@media (max-width:1200px){

    .page{

        max-width:560px;

        padding:20px;

    }

}


/* ======================================
Tablet
====================================== */

@media (max-width:992px){

    .page{

        max-width:100%;

        padding:20px;

    }

    .hero{

        min-height:auto;

        padding:40px 0;

    }

    .hero-card{

        padding:35px 25px;

    }

    .hero h1{

        font-size:42px;

    }

    .bio{

        max-width:100%;

    }

    .hero-stats{

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

        gap:15px;

    }

    .stats-grid{

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

    }

    .social-grid{

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

    }

    .qr-card{

        flex-direction:column;

        text-align:center;

    }

    .qr-image img{

        width:180px;

    }

}


/* ======================================
Mobile Landscape
====================================== */

@media (max-width:768px){

    body{

        font-size:15px;

    }

    .page{

        padding:18px;

    }

    section{

        margin-top:55px;

    }

    .hero{

        padding-top:25px;

        min-height:auto;

    }

    .hero-card{

        padding:30px 22px;

        border-radius:24px;

    }

    .profile-image{

        width:130px;

        height:130px;

    }

    .hero h1{

        font-size:34px;

    }

    .username{

        font-size:16px;

    }

    .bio{

        font-size:15px;

        line-height:1.8;

    }

    .hero-tags{

        gap:10px;

    }

    .hero-tags span{

        padding:8px 14px;

        font-size:13px;

    }

    .hero-stats{

        grid-template-columns:1fr;

        gap:14px;

    }

    .stat{

        padding:18px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .btn{

        width:100%;

        min-width:unset;

    }

    .section-title h2{

        font-size:30px;

    }

    .section-title p{

        font-size:15px;

    }

    .featured-links{

        gap:16px;

    }

    .link-card{

        padding:20px;

        gap:16px;

    }

    .link-icon{

        width:56px;

        height:56px;

        font-size:24px;

    }

    .link-content h3{

        font-size:18px;

    }

    .link-content p{

        font-size:14px;

    }

    .link-arrow{

        font-size:24px;

    }

    .social-grid{

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

        gap:14px;

    }

    .stats-grid{

        grid-template-columns:1fr;

    }

    .quote-card{

        padding:35px 25px;

    }

    .quote-card h2{

        font-size:28px;

    }

    .qr-card{

        padding:25px;

    }

    .qr-content h2{

        font-size:28px;

    }

    .cta-card{

        padding:45px 25px;

    }

    .cta-card h2{

        font-size:34px;

    }

    .cta-buttons{

        flex-direction:column;

    }

    .footer-links{

        gap:18px;

    }

}
/* ===================================================
   MOLLYRA LINK
   responsive.css
   Part 2
=================================================== */


/* ======================================
Large Mobile
====================================== */

@media (max-width:576px){

    .page{

        padding:16px;

    }

    .hero-card{

        padding:26px 18px;

        border-radius:22px;

    }

    .profile-image{

        width:115px;

        height:115px;

    }

    .hero h1{

        font-size:30px;

    }

    .verified{

        font-size:12px;

        padding:8px 14px;

    }

    .hero-tags{

        justify-content:center;

        gap:8px;

    }

    .hero-tags span{

        font-size:12px;

        padding:7px 12px;

    }

    .link-card{

        padding:18px;

    }

    .link-content h3{

        font-size:16px;

    }

    .link-content p{

        font-size:13px;

    }

    .link-icon{

        width:50px;

        height:50px;

        font-size:22px;

    }

    .social-card{

        padding:20px 10px;

    }

    .social-card span{

        font-size:28px;

    }

    .footer-logo h3{

        font-size:22px;

    }

}


/* ======================================
Small Phones
====================================== */

@media (max-width:430px){

    .page{

        padding:14px;

    }

    section{

        margin-top:45px;

    }

    .hero-card{

        padding:22px 16px;

    }

    .profile-image{

        width:100px;

        height:100px;

    }

    .online{

        width:18px;

        height:18px;

        border-width:3px;

    }

    .hero h1{

        font-size:26px;

    }

    .username{

        font-size:15px;

    }

    .bio{

        font-size:14px;

    }

    .hero-buttons{

        gap:12px;

    }

    .btn{

        padding:14px;

        font-size:15px;

    }

    .badge{

        font-size:12px;

    }

    .section-title h2{

        font-size:26px;

    }

    .quote-card{

        padding:28px 18px;

    }

    .quote-card h2{

        font-size:24px;

    }

    .qr-content h2{

        font-size:24px;

    }

    .cta-card{

        padding:35px 20px;

    }

    .cta-card h2{

        font-size:28px;

    }

}


/* ======================================
Very Small Devices
====================================== */

@media (max-width:360px){

    .page{

        padding:12px;

    }

    .hero-card{

        border-radius:18px;

    }

    .hero h1{

        font-size:22px;

    }

    .hero-tags{

        gap:6px;

    }

    .hero-tags span{

        font-size:11px;

        padding:6px 10px;

    }

    .link-card{

        gap:12px;

        padding:16px;

    }

    .link-icon{

        width:46px;

        height:46px;

        font-size:20px;

    }

    .link-content h3{

        font-size:15px;

    }

    .link-content p{

        display:none;

    }

    .social-grid{

        gap:10px;

    }

    .social-card{

        border-radius:16px;

    }

}


/* ======================================
Landscape Phones
====================================== */

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

    .hero{

        min-height:auto;

        padding:30px 0;

    }

    .hero-card{

        padding:24px;

    }

    section{

        margin-top:40px;

    }

}


/* ======================================
Safe Area (iPhone)
====================================== */

body{

    padding-left:env(safe-area-inset-left);

    padding-right:env(safe-area-inset-right);

    padding-top:env(safe-area-inset-top);

    padding-bottom:env(safe-area-inset-bottom);

}


/* ======================================
Touch Optimization
====================================== */

button,
a,
.btn,
.link-card,
.social-card{

    -webkit-tap-highlight-color:transparent;

    touch-action:manipulation;

}

.btn,
.social-card{

    min-height:48px;

}


/* ======================================
Image Optimization
====================================== */

img{

    max-width:100%;

    height:auto;

    display:block;

}


/* ======================================
Overflow Protection
====================================== */

*{

    word-wrap:break-word;

}

body{

    overflow-x:hidden;

}


/* ======================================
Reduced Motion
====================================== */

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}