/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */



 .tutor-btn
 {
  border-radius: 36px !important;
 }


 /* --- Główny kontener --- */
.lmsInstr {
    max-width: 1290px;
    width: 100%;
    margin: 45px auto; /* 45px góra/dół, auto lewo/prawo (wyśrodkowanie) */
    padding: 0 20px;   /* Marginesy wewnętrzne, żeby treść nie dotykała krawędzi ekranu */
    box-sizing: border-box;
}

/* --- Sekcja O Instruktorze --- */
.lmsInstrAbout {
    max-width: 900px;
    margin: 0 auto; /* Wyśrodkowanie bloku wewnątrz rodzica */
    
    /* Ustawienie układu siatki (Grid) */
    display: grid;
    /* Dwie kolumny: pierwsza dopasowana do zdjęcia, druga zajmuje resztę */
    grid-template-columns: min-content 1fr; 
    /* Wiersze dopasowane do treści */
    grid-template-rows: auto auto 1fr; 
    column-gap: 40px; /* Odstęp między zdjęciem a tekstem */
    align-items: center; /* Wyrównanie w pionie */
}

/* --- Zdjęcie Instruktora --- */
.lmsInstrPhoto {
    max-width: 300px;
    width: 100%; /* Skalowanie w dół jeśli ekran jest mniejszy */
    height: auto;
    object-fit: cover; /* Zachowanie proporcji zdjęcia */
    border-radius: 8px; /* Opcjonalnie: lekkie zaokrąglenie rogów */
    
    /* Zdjęcie zajmuje 2 wiersze (obok Imienia i Tytułu) */
    grid-column: 1;
    grid-row: 1 / 3; 
}

/* --- Imię i Nazwisko --- */
.lmsInstrName {
    grid-column: 2;
    grid-row: 1;
    align-self: end; /* Dociągnięcie do dołu komórki (bliżej tytułu) */
    margin: 0 0 5px 0; /* Mały odstęp pod imieniem */
    font-size: 2.2rem; /* Przykładowa wielkość */
    line-height: 1.2;
}

/* --- Tytuł zawodowy --- */
.lmsInstrTitle {
    grid-column: 2;
    grid-row: 2;
    align-self: start; /* Dociągnięcie do góry komórki (bliżej imienia) */
    margin: 0;
    font-size: 1.2rem;
    color: #666; /* Przykładowy kolor szary */
}

/* --- Bio Instruktora --- */
.lmsInstrBio {
    grid-column: 1 / -1; /* Rozciągnięcie na całą szerokość (obie kolumny) */
    grid-row: 3;
    margin-top: 30px; /* Odstęp od sekcji zdjęcia */
    line-height: 1.6;
}

/* --- Sekcja Kursów (Poniżej) --- */
.lmsInstrCourses {
    margin-top: 60px;
    /* Opcjonalnie wyśrodkowanie treści kursów jeśli potrzebne */
    text-align: left; 
}

/* =========================================
   RESPONSYWNOŚĆ (Dla telefonów i tabletów)
   ========================================= */
@media (max-width: 768px) {
    .lmsInstrAbout {
        grid-template-columns: 1fr; /* Jedna kolumna */
        grid-template-rows: auto;
        justify-items: center; /* Wyśrodkowanie elementów poziomo */
        text-align: center;
    }

    .lmsInstrPhoto {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 20px;
        max-width: 200px; /* Zmniejszenie zdjęcia na telefonie */
    }

    .lmsInstrName {
        grid-column: 1;
        grid-row: 2;
        align-self: center;
    }

    .lmsInstrTitle {
        grid-column: 1;
        grid-row: 3;
        align-self: center;
    }

    .lmsInstrBio {
        grid-column: 1;
        grid-row: 4;
        text-align: left; /* Bio zazwyczaj lepiej czyta się wyrównane do lewej */
    }
}




/* Próba ustawienia Firmy i NIP w jednej linii w Checkout Blokowym */
@media (min-width: 768px) {
    /* To jest kontener sekcji adresu */
    .wc-block-components-address-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    /* Pola, które mają być na całą szerokość (Imię, Nazwisko, Ulica, Kraj) */
    .wc-block-components-address-form > div {
        grid-column: 1 / -1;
    }

    /* Wyjątek: Firma (znajdź odpowiednią klasę lub kolejność) */
    /* UWAGA: W blokach trudno wycelować w konkretne pole bez wtyczki dodającej klasy */
    /* Poniższe to przykład, który zadziała, jeśli Firma i NIP są obok siebie w kodzie */
}




/* Główny kontener siatki */
.trc {
    display: grid;
    /* 4 kolumny na desktopie */
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin: 40px 0;
    align-items: stretch;
}

/* Styl pojedynczej karty, żeby wszystkie były równe */
.trcs {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e0e0e0;
    /* Opcjonalne obramowanie */
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
}

/* Tablet: 2 kolumny */
@media (max-width: 1024px) {
    .trc {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: 1 kolumna */
@media (max-width: 767px) {
    .trc {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}