/* =========================================
   1. SINGLE MASKIN LAYOUT (Bild + Info)
   ========================================= */

.single-maskin-wrapper {
    width: 100%;
    box-sizing: border-box;
}

/* Tillbaka-länk */
.single-maskin-back {
    margin-bottom: 20px;
}
.single-maskin-back a {
    text-decoration: none;
    font-weight: bold;
    color: #333;
}

/* Huvudlayout (Grid) - Mobil först (1 kolumn) */
.single-maskin-main {
    display: grid;
    grid-template-columns: 100%;
    gap: 40px;
    align-items: start;
    margin-bottom: 60px;
}

/* Desktop-vy: Aktiveras över 900px */
@media (min-width: 900px) {
    .single-maskin-main {
        grid-template-columns: 55% 40%; /* Bild 55%, Info 40% */
    }
}

/* Bild på single-sidan */
.single-maskin-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* Info-del */
.single-maskin-meta-label {
    text-transform: uppercase;
    font-size: 0.85em;
    color: #777;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

.single-maskin-description {
    margin-bottom: 30px;
}

/* Specifikations-box */
.single-maskin-specs {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 30px;
    border-left: 4px solid #333;
}
.single-maskin-specs p {
    margin: 0 0 10px 0;
}
.single-maskin-specs strong {
    display: block;
    margin-bottom: 5px;
}

.single-maskin-action {
    margin-top: 20px;
}

.single-maskin-related {
    border-top: 1px solid #ddd;
    padding-top: 40px;
    margin-top: 60px;
}


/* =========================================
   2. FILTER KNAPPAR (Från Arkiv-sidan)
   ========================================= */
.maskin-filter-container { 
    margin-bottom: 30px; 
    display: flex; 
    gap: 10px; 
    flex-wrap: wrap; 
}

.maskin-filter-btn {
    padding: 10px 20px;
    border: 2px solid #ddd;
    background: #fff;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
    transition: all 0.3s;
}

.maskin-filter-btn:hover, 
.maskin-filter-btn.active {
    background: #0037ac; /* Kundens färg */
    color: #fff;
    border-color: #0037ac;
}


/* =========================================
   3. GRID & KORT (Gemensamt för Arkiv & Single)
   ========================================= */

/* Grid Layout */
.maskin-grid {
    display: grid;
    /* Använder 300px enligt din original-css */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

/* Kort Design - Wrapper */
.maskin-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;       /* Säkerställer att innehållet fyller kortet */
    flex-direction: column;
}

.maskin-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Länken runt/i kortet */
.maskin-card-link,
.maskin-card a {
    text-decoration: none; 
    color: inherit; 
    display: flex;       /* Ändrat till flex för att sträcka ut innehåll */
    flex-direction: column;
    height: 100%; 
}

/* Bild-wrapper (Hanterar både Arkivets och Single-sidans klassnamn) */
.maskin-img-wrapper,
.maskin-card-image {
/* uh
    height: 200px;
    overflow: hidden;
    background: #f0f0f0;
    flex-shrink: 0; /* Hindrar bilden från att krympa */
    
    width: 100%;
    position: relative; /* Nödvändigt för aspect-ratio tricket om webbläsaren är gammal, men vi kör modernt först */
    
    /* BEST PRACTICE: Lås proportionerna.*/
    aspect-ratio: 580 / 480; 
    
    background: #f0f0f0;
    overflow: hidden;
    flex-shrink: 0;
}

/* Bilden */
.maskin-img-wrapper img,
.maskin-card-image img {
/* uh
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
*/

    width: 100%;
    height: 100%;
    object-fit: cover; /* Ser till att bilden fyller ytan utan att deformeras */
    display: block;
    transition: transform 0.5s;
    
    /* Positionering: Centrera bilden om den måste beskäras lite */
    object-position: center;
}

.maskin-card:hover .maskin-img-wrapper img,
.maskin-card:hover .maskin-card-image img { 
    transform: scale(1.05); 
}

/* Innehåll i kortet (Hanterar både Arkivets och Single-sidans klassnamn) */
.maskin-content,
.maskin-card-body { 
    padding: 20px; 
    flex-grow: 1; /* Trycker ner knappen/botten */
    display: flex;
    flex-direction: column;
}

/* Element inuti kortet */
.maskin-cat,
.single-maskin-meta-label { /* Matchar kategori-utseendet */
    font-size: 0.85em; 
    text-transform: uppercase; 
    color: #888; 
    letter-spacing: 1px; 
    display: block; 
    margin-bottom: 5px; 
}

.maskin-title,
.maskin-card-title { 
    margin: 0 0 10px 0; 
    font-size: 1.25em; 
    font-weight: bold;
}

.maskin-meta { 
    font-size: 0.9em; 
    color: #555; 
    margin-bottom: 15px; 
}

.maskin-btn,
.maskin-card-cta { 
    font-weight: bold; 
    color: #333; 
    text-decoration: none; 
    margin-top: auto; /* Trycker ner denna till botten av kortet */
    display: block;
}

/* =========================================
   KNAPPAR & CTA (Grid-version)
   ========================================= */

/* Huvudbehållare för knapparna */
.single-maskin-actions {
    margin-top: 30px;
    
    /* LÖSNING FÖR ÖVERLAPP: Vi använder Grid istället för Flex.
       Grid-celler kan aldrig överlappa varandra. */
    display: grid;
    
    /* LOGIK: 
       "repeat(auto-fit, minmax(220px, 1fr))" betyder:
       Försök lägga knapparna bredvid varandra. 
       Men om utrymmet blir mindre än 220px per knapp -> Stapla dem automatiskt. */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    
    gap: 20px; /* Säkert mellanrum som inte äter av bredden */
    width: 100%; /* Håll oss inom containern */
    box-sizing: border-box;
}

/* Återställning av WordPress knapp-wrapper för att passa i Grid */
.single-maskin-actions .wp-block-button {
    margin: 0 !important; /* Ta bort temanas marginaler som puttar ut knappen */
    width: 100%;
    display: block;
}

/* --- KNAPPSTILAR --- */

/* 1. GRUNDSTIL (Gäller alla knappar) */
.single-maskin-actions .wp-block-button__link {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center;
    gap: 10px; 
}

/* 3. PRIMÄR KNAPP (Textfärg) */
/* Tvingar texten att vara vit (om temat bråkar) */
.single-maskin-actions .wp-block-button__link:not(.maskin-btn-secondary) {
    color: #ffffff !important;
}

/* 4. SEKUNDÄR KNAPP (Maila förfrågan) */
.maskin-btn-secondary {
    background-color: transparent !important;
    color: #0037ac !important;
    border: 2px solid #0037ac !important;
    box-shadow: none !important;
}

.maskin-btn-secondary:hover {
    background-color: #f0f5ff !important;
    color: #002a80 !important;
}

/* --- VISA/DÖLJ LOGIK --- */
.btn-view-mobile { display: block !important; }
.btn-view-desktop { display: none !important; }

@media (min-width: 900px) {
    .btn-view-mobile { display: none !important; }
    .btn-view-desktop { display: block !important; }
}

@media (max-width: 500px) {
    .single-maskin-actions {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================
   GLOBAL FIX FÖR TELEFON-KNAPPAR (Inject Method)
   ========================================= */

/* 1. Skapa ikonen automatiskt före texten */
.btn-view-mobile .wp-block-button__link::before,
.btn-view-desktop .wp-block-button__link::before {
    content: "📞"; /* Här skjuter vi in luren */
    display: inline-block;
    margin-right: 0; /* Mellanrum till texten */
    
    /* 2. DEN BEVISADE LÖSNINGEN */
    /* Detta gör ikonen kritvit oavsett vad webbläsaren vill */
    filter: grayscale(100%) brightness(1000%);
}

/* 3. Justera knappens layout så ikonen hamnar rätt * /
.btn-view-mobile .wp-block-button__link,
.btn-view-desktop .wp-block-button__link {
    display: flex !important;
    align-items: center;
    justify-content: center;
}
    */