/* =====================================================================
   JOBTIMIST.GR — ΔΗΜΟΣΙΑ ΣΕΛΙΔΑ ΕΤΑΙΡΕΙΑΣ (Λ2)
   =====================================================================

   Χρησιμοποιούνται ΜΟΝΟ οι μεταβλητές που ορίζει το `main.css`:
   --primary, --dark, --dark-grey, --secondary-grey, --border,
   --light-grey, --lightest-grey, --white, --radius

   ΔΕΝ χρησιμοποιούνται ονόματα όπως --text-primary ή --border-color:
   δεν υπάρχουν στο έργο, και μια τιμή με προεπιλογή θα έδειχνε σωστή
   αλλά δεν θα ακολουθούσε μελλοντική αλλαγή του θέματος.

   Οι κάρτες αγγελιών (.jcard*) κληρονομούν το `jobs.css`, που
   φορτώνεται μαζί με αυτό το αρχείο από το `index.php`.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. ΚΕΦΑΛΙΔΑ ΕΤΑΙΡΕΙΑΣ
   --------------------------------------------------------------------- */

.emp-hero {
    background: var(--light-grey);
    padding: 40px 0;
    border-bottom: 1px solid var(--border);
}

.emp-hero-card {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    background: var(--white);
    padding: 32px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

/* --- Λογότυπο / αρχικά --- */

.emp-logo-wrap {
    flex: 0 0 auto;
    width: 120px;
    height: 120px;
    border-radius: 16px;
    background: var(--light-grey);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.emp-logo {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    object-fit: contain;
    padding: 0;
    border-radius: 14px;
    display: block;
}

/*
   Τα αρχικά της επωνυμίας όταν λείπει λογότυπο. Ίδια λογική με τα
   προφίλ υποψηφίων, ώστε ο ιστότοπος να μοιάζει ένα πράγμα.
*/
.emp-initials {
    font-size: 40px;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: 1px;
}

/* --- Κύριο σώμα --- */

.emp-hero-body {
    flex: 1 1 auto;
    min-width: 0;
}

.emp-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.emp-name {
    font-size: 30px;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.2;
    /*
       Το `word-break` προστατεύει από πολύ μεγάλες επωνυμίες χωρίς
       κενά, που αλλιώς θα έσπρωχναν τη διάταξη οριζόντια.
    */
    overflow-wrap: anywhere;
}

.emp-verified {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    background: rgba(216, 27, 89, 0.08);
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.emp-category {
    font-size: 15px;
    color: var(--secondary-grey);
    margin-bottom: 16px;
}

/* --- Στοιχεία (τοποθεσία, μέγεθος, έτος, ιστότοπος) --- */

.emp-facts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 0;
    padding: 0;
}

.emp-fact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--dark-grey);
}

.emp-fact i {
    color: var(--secondary-grey);
    font-size: 14px;
}

.emp-site-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.emp-site-link:hover {
    text-decoration: underline;
}

/* --- Δεξιά στήλη με τον αριθμό θέσεων --- */

.emp-hero-aside {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-left: 28px;
    border-left: 1px solid var(--border);
    align-self: stretch;
    justify-content: center;
    min-width: 170px;
}

.emp-stat {
    text-align: center;
}

.emp-stat-num {
    display: block;
    font-size: 40px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.emp-stat-label {
    display: block;
    font-size: 13px;
    color: var(--secondary-grey);
    margin-top: 4px;
}

.emp-all-jobs {
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
   2. ΠΕΡΙΓΡΑΦΗ
   --------------------------------------------------------------------- */

.emp-about {
    padding: 40px 0 0;
}

.emp-section-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 18px;
}

.emp-jobs-count {
    font-weight: 600;
    color: var(--secondary-grey);
}

.emp-description {
    font-size: 16px;
    line-height: 1.75;
    color: var(--dark-grey);
    /*
       Το μήκος γραμμής περιορίζεται για αναγνωσιμότητα. Κείμενο
       πλάτους 1200px κουράζει το μάτι και χάνεται η σειρά.
    */
    max-width: 760px;
}

/* ---------------------------------------------------------------------
   3. ΑΓΓΕΛΙΕΣ
   --------------------------------------------------------------------- */

.emp-jobs {
    padding: 40px 0 60px;
}

/*
   Το πλέγμα ακολουθεί τη σελίδα αγγελιών: αυτόματη προσαρμογή με
   ελάχιστο πλάτος κάρτας, ώστε να μη χρειάζονται breakpoints για
   κάθε ενδιάμεσο μέγεθος οθόνης.
*/
.emp-jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
}

/* --- Κενή κατάσταση --- */

.emp-empty {
    text-align: center;
    padding: 50px 20px;
    background: var(--light-grey);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.emp-empty-icon {
    font-size: 42px;
    color: var(--palette-grey);
    margin-bottom: 14px;
}

.emp-empty-text {
    font-size: 16px;
    color: var(--dark-grey);
    margin-bottom: 20px;
}

/* ---------------------------------------------------------------------
   4. ΚΙΝΗΤΟ
   ---------------------------------------------------------------------
   Η κεφαλίδα γίνεται κατακόρυφη κάτω από 900px, που είναι το ίδιο
   σημείο αλλαγής με την κάτω μπάρα του ιστότοπου. Έτσι δεν υπάρχει
   ενδιάμεσο πλάτος όπου η σελίδα δείχνει μισοπροσαρμοσμένη.
   --------------------------------------------------------------------- */

@media (max-width: 900px) {
    .emp-hero {
        padding: 24px 0;
    }

    .emp-hero-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 18px;
        padding: 24px 18px;
    }

    .emp-title-row,
    .emp-facts {
        justify-content: center;
    }

    .emp-name {
        font-size: 24px;
    }

    /*
       Η δεξιά στήλη γίνεται οριζόντια γραμμή κάτω από τα στοιχεία.
       Το κάθετο περίγραμμα γίνεται οριζόντιο, αλλιώς θα εμφανιζόταν
       μια αδικαιολόγητη γραμμή στο πλάι.
    */
    .emp-hero-aside {
        flex-direction: row;
        gap: 20px;
        padding: 18px 0 0;
        border-left: none;
        border-top: 1px solid var(--border);
        width: 100%;
        min-width: 0;
    }

    .emp-stat-num {
        font-size: 32px;
    }

    .emp-jobs-grid {
        /*
           Μία κολόνα στο κινητό. Το `minmax(320px, 1fr)` θα ξεχείλιζε
           σε οθόνες 320px, όπου το περιθώριο του `container` αφήνει
           λιγότερο από 320px διαθέσιμο πλάτος.
        */
        grid-template-columns: 1fr;
    }

    .emp-about,
    .emp-jobs {
        padding-top: 28px;
    }
}

/* ---------------------------------------------------------------------
   5. ΕΚΤΥΠΩΣΗ
   --------------------------------------------------------------------- */

@media print {
    .emp-hero {
        background: none;
    }

    .emp-hero-card,
    .emp-empty {
        border: 1px solid #ccc;
    }

    .emp-all-jobs {
        display: none;
    }
}