/* ========================================
   Hero
======================================== */

.machines-hero{
    position: relative;
    height: 60vh;
    display: flex;
    align-items: center;
    background: url("../images/maskinering-hero.jpg") center center/cover no-repeat;
    color: #fff;
}

.machines-overlay{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
}

.machines-hero-content{
    position: relative;
    z-index: 2;
    max-width: 700px;
}

.machines-hero-content span{
    display: inline-block;
    margin-bottom: 20px;
    color: var(--primary);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: 2px;
}

.machines-hero-content h1{
    color: #fff;
    margin-bottom: 25px;
}

.machines-hero-content p{
    max-width: 650px;
}


/* ========================================
   Intro
======================================== */

.machines-intro{
    text-align: center;
}

.machines-intro .section-divider{
    margin: 20px auto 35px;
}

.narrow{
    max-width: 850px;
    margin: 0 auto;
}


/* ========================================
   Maskiner
======================================== */

.machine{
    border-top: 1px solid #ececec;
}

.machine-grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 80px;
    align-items: center;
}

.machine-grid.reverse .machine-image{
    order: 2;
}

.machine-grid.reverse .machine-content{
    order: 1;
}


/* ========================================
   Bilder
======================================== */

.machine-image{
    overflow: hidden;
}

.machine-image{

    display:flex;
    align-items:center;
    justify-content:center;

}

.machine-image img{

    width:100%;
    max-width:100%;
    height:auto;
    display:block;

}

.machine-image:hover img{
    transform:scale(1.03);
}


/* ========================================
   Tekst
======================================== */

.machine-category{

    display:inline-block;

    margin-bottom:18px;

    color:var(--primary);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:2px;

}

.machine-content h2{

    margin-bottom:0;

}

.machine-content .section-divider{

    margin:18px 0 30px;

}

.machine-content p{

    margin-bottom:35px;

    line-height:1.8;

}


/* ========================================
   Tabell
======================================== */

.machine-table{

    width:100%;

    border-collapse:collapse;

}

.machine-table th{

    width:180px;

    text-align:left;

    padding:16px 0;

    font-weight:600;

    border-bottom:1px solid #ececec;

}

.machine-table td{

    padding:16px 0;

    border-bottom:1px solid #ececec;

}


/* ========================================
   Responsive
======================================== */

/* ========================================
   MACHINES – TABLET
======================================== */

@media (max-width: 991px){

    .machine-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .machine-grid.reverse .machine-image{
        order:1;
    }

    .machine-grid.reverse .machine-content{
        order:2;
    }

    .machine-image img{
        width:100%;
        height:450px;
        object-fit:cover;
    }
}


/* ========================================
   MACHINES – MOBILE
======================================== */

@media (max-width: 600px){

    /* Hero */

    .machines-hero{
        height:auto;
        min-height:400px;
        align-items:flex-end;
    }

    .machines-hero .container{
        padding-bottom:40px;
    }

    .machines-overlay{
        background:linear-gradient(
            180deg,
            rgba(0,0,0,.18) 0%,
            rgba(0,0,0,.50) 50%,
            rgba(0,0,0,.82) 100%
        );
    }

    .machines-hero-content span{
        margin-bottom:12px;
        font-size:12px;
    }

    .machines-hero-content h1{
        margin-bottom:18px;
        font-size:36px;
    }

    .machines-hero-content p{
        font-size:16px;
        line-height:1.6;
    }


    /* Intro */

    .machines-intro .section-divider{
        margin:18px auto 25px;
    }


    /* Maskiner */

    .machine-grid{
        gap:28px;
    }

    .machine-image img{
        height:240px;
        object-fit:cover;
    }

    .machine-category{
        margin-bottom:12px;
        font-size:12px;
    }

    .machine-content h2{
        font-size:28px;
    }

    .machine-content .section-divider{
        margin:15px 0 22px;
    }

    .machine-content p{
        margin-bottom:25px;
        line-height:1.7;
    }


    /* Tabell */

    .machine-table th,
    .machine-table td{
        padding:13px 0;
        vertical-align:top;
        font-size:14px;
    }

    .machine-table th{
        width:120px;
        padding-right:15px;
    }


    /* Ekstern lenke */

    .machine-link{
        margin-top:16px;
        font-size:14px;
    }
}


/* ========================================
   MACHINES – SMALL MOBILE
======================================== */

@media (max-width: 400px){

    .machines-hero{
        min-height:370px;
    }

    .machines-hero-content h1{
        font-size:32px;
    }

    .machine-image img{
        height:220px;
    }

    .machine-content h2{
        font-size:25px;
    }

    .machine-table th{
        width:105px;
    }

    .machine-table th,
    .machine-table td{
        font-size:13px;
    }
}


.machine-link{
    display:inline-block;
    margin-top:18px;
    color:var(--primary);
    font-size:0.95rem;
    font-weight:600;
    text-decoration:none;
    transition:0.3s;
}

.machine-link:hover{
    opacity:0.7;
    transform:translateX(3px);
}