/* =============================================
   RESPONSIVE.CSS
   Mobile first approach.
   Base styles are already in components.css.
   We add tablet and desktop styles here.
============================================= */


/* =============================================
   TABLET — 600px and above
============================================= */
@media (min-width: 600px) {

    /*My own shit*/
    .hero{padding: 120px var(--pad-mobile);}

    .hero__ctas{
        flex-direction: row;
    }

    .btn{
        width:200px;
        padding:14px 22px;
    }

    /* Stats — 2 columns on tablet */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-wrap{
        margin: 30px 0;
    }

    /* Remove bottom border, add right border */
    .stat {
        border-bottom: 1px solid var(--border);
        border-right: 1px solid var(--border);
    }

    /* Right column stats have no right border */
    .stat:nth-child(even) {
        border-right: none;
    }

    /* Bottom row stats have no bottom border */
    .stat:nth-child(3),
    .stat:nth-child(4) {
        border-bottom: none;
    }

    /* Proof of work — 2 columns */
    .pow__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ecosystem-card{
        grid-column: 1/3;
    }



    /* Services — 2 columns */
    .srv__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Wallet cards side by side */
    .footer__wallets {
        flex-direction: row;
    }

    .wallet {
        flex: 1;
    }

    .testi__grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =============================================
   TABLET LARGE — 768px and above
============================================= */
@media (min-width: 768px) {

    /* Nav side padding increases */
    .nav,
    .nav.scrolled {
        padding-left: var(--pad-tablet);
        padding-right: var(--pad-tablet);
    }

    /* Sections side padding increases */
    .section {
        padding: 100px var(--pad-tablet);
    }

    .container {
        padding: 0 var(--pad-tablet);
    }

    .stats-wrap {
        padding: 0 var(--pad-tablet);
    }

    .footer {
        padding: 56px var(--pad-tablet);
    }

    /* About — 2 columns, photo left text right */
    .about__grid {
        grid-template-columns: 1fr 1.15fr;
        /*gap: 64px;*/
        gap:40px;
        align-items: center;
    }

    .about__photo{
        height:100%;
        aspect-ratio: 5/8;
        border:2px solid white;
    }

    /* Footer bottom row goes horizontal */
    .footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    /* Proof of work head goes horizontal */
    .pow__head {
        flex-direction: column;
        /*align-items: flex-end;
        justify-content: space-between;*/
    }

}


/* =============================================
   DESKTOP — 1024px and above
============================================= */
@media (min-width: 1024px) {

    /* Nav — show links and CTA, hide burger */
    .nav__links {
        display: flex;
        gap: 36px;
    }

    .nav__links a {
        font-size: 0.8rem;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--w50);
        transition: var(--transition);
    }

    .nav__links a:hover {
        color: var(--w);
    }

    .nav__cta {
        display: inline-flex;
        align-items: center;
        padding: 10px 26px;
        border-radius: var(--radius-full);
        border: 1px solid var(--purple);
        color: var(--purple-light);
        font-size: 0.82rem;
        font-weight: 500;
        letter-spacing: 0.04em;
        transition: var(--transition);
    }

    .nav__cta:hover {
        background: var(--purple);
        color: var(--w);
        box-shadow: 0 0 28px var(--purple-glow);
    }

    .nav__burger {
        display: none;
    }

    /* Nav padding goes full desktop */
    .nav,
    .nav.scrolled {
        padding-left: var(--pad-section);
        padding-right: var(--pad-section);
    }

    .nav.scrolled {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    /* Sections full desktop padding */
    .section {
        padding: 120px var(--pad-section);
    }

    .container {
        padding: 0 8px;
    }

    .stats-wrap {
        padding: 0 var(--pad-section);
        /*margin-bottom: 120px;*/
    }

    .footer {
        padding: 56px var(--pad-section);
    }

    /* Stats — 4 columns */
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Fix borders for 4 column layout */
    .stat {
        border-bottom: none;
        border-right: 1px solid var(--border);
    }

    .stat__num{
        font-size: clamp(44px, 5.5vw, 70px)
    }

    .hundred-plus{
        border-left: 1px solid var(--border);
    }


    .stat:last-child {
        border-right: none;
    }

    /* About gap increases on desktop */
    .about__grid {
        gap: 60px;
    }

    .about__photo{
        aspect-ratio:4/5.1;
    }


    /* Proof of work — 3 columns */
    .pow__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /*.pow__grid {
        grid-template-columns: repeat(3, 1fr);
    }*/

    /* Ecosystem card spans full width */
    .pow__card--eco {
        grid-column: 1 / -1;
    }

    /* Services — 3 columns */
    .srv__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .contact__socials{
        flex-direction: row;
        flex-wrap:nowrap;
    }

    /* Hero padding increases */
    .hero {
        padding: 135px var(--pad-section) 100px;
    }

}


/* =============================================
   LARGE DESKTOP — 1280px and above
============================================= */
@media (min-width: 1280px) {

    /* Container max width kicks in */
    .container {
        max-width: var(--max-width);
        margin: 0 auto;
    }

    .pow__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .pow__card--eco {
        grid-row: 4/5;
        grid-column: 2/4;
    }

    .about__grid {
        grid-template-columns: 0.7fr 1.15fr;

    }

    .about__photo{
        aspect-ratio: 4/5.1;
    }

}