/* =====================================================
   13ο Γυμνάσιο Καλλιθέας – «Σωκράτης»
   Δημόσια ιστοσελίδα
   ===================================================== */


/* =====================================================
   Χρωματική ταυτότητα
   ===================================================== */

:root {
    --school-blue: #002040;
    --school-gold: #a87520;
    --school-cream: #f4f1e8;
}


/* =====================================================
   Header / Λογότυπο
   ===================================================== */

.container-header {
    background-image: none;
}


/* Επάνω περιοχή κεφαλίδας */

.container-header .grid-child:first-child {
    width: 100%;
    max-width: none;

    background-color: var(--school-cream);
}


/* Περιοχή λογοτύπου */

.container-header .navbar-brand {
    width: 100%;
    max-width: 100%;

    padding: 0.8rem 1rem;

    background-color: var(--school-cream);

    border: none;
    border-bottom: 2px solid rgba(168, 117, 32, 0.75);
    border-radius: 0;
}


.container-header .brand-logo {
    display: block;

    width: 100%;
    max-width: 100%;
}


.container-header .navbar-brand img {
    display: block;

    width: 100%;
    max-width: 70rem;
    height: auto;

    margin-inline: auto;
}


/* =====================================================
   Κύριο μενού
   ===================================================== */

.container-header .container-nav {
    width: 100%;
    max-width: none;

    background-color: var(--school-blue);
}


/* Σύνδεσμοι */

.container-header .mod-menu > li > a {
    padding: 0.75rem 1rem;

    color: #ffffff;

    font-weight: 600;
    line-height: 1.35;
}


/* Hover / focus */

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.12);

    border-radius: 0.4rem;
}


/* Keyboard focus */

.container-header .mod-menu a:focus-visible {
    outline: 0.2rem solid var(--school-gold);
    outline-offset: 0.2rem;
}


/* Κεντράρισμα κύριου μενού σε μεγάλες οθόνες */

@media (min-width: 769px) {

    .container-header .container-nav {
        justify-content: center;
    }

    .container-header .container-nav nav {
        margin-inline: auto;
    }

    .container-header .mod-menu {
        justify-content: center;
        margin-inline: auto;
    }
}


/* Λογότυπο σε μικρές οθόνες */

@media (max-width: 768px) {

    .container-header .navbar-brand {
        padding: 0.6rem;
    }

    .container-header .navbar-brand img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
    }
}


/* =====================================================
   Γρήγορη πρόσβαση
   ===================================================== */

.school-quicklinks {
    width: min(100%, 1050px);

    margin: 1.25rem auto 1.75rem;
}


/* 5 κουμπιά σε μία γραμμή στο desktop */

.school-quicklinks .mod-menu {
    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 1rem;

    margin: 0;
    padding: 0;

    list-style: none;
}


.school-quicklinks .mod-menu > li {
    margin: 0;
    padding: 0;
}


/* Κουμπιά */

.school-quicklinks .mod-menu > li > a {
    display: flex;

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

    min-height: 5.5rem;

    padding: 1rem 1.25rem;

    color: var(--school-blue);
    background-color: var(--school-cream);

    border: 2px solid var(--school-blue);
    border-bottom: 4px solid var(--school-gold);
    border-radius: 0.65rem;

    text-align: center;
    text-decoration: none;

    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}


/* Hover / focus */

.school-quicklinks .mod-menu > li > a:hover,
.school-quicklinks .mod-menu > li > a:focus {
    color: #ffffff;
    background-color: var(--school-blue);

    text-decoration: none;

    transform: translateY(-2px);
}


.school-quicklinks .mod-menu > li > a:focus-visible {
    outline: 0.2rem solid var(--school-gold);
    outline-offset: 0.2rem;
}


/* Tablet */

@media (max-width: 1000px) {

    .school-quicklinks .mod-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Κινητά */

@media (max-width: 600px) {

    .school-quicklinks .mod-menu {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .school-quicklinks .mod-menu > li > a {
        min-height: 4.5rem;
    }
}


/* =====================================================
   Μήνυμα του μήνα
   ===================================================== */

.monthly-message {
    margin-block: 1.5rem 2rem;
}


/* Κεντρική κάρτα */

.monthly-message-card {
    display: grid;

    grid-template-columns: minmax(220px, 380px) 1fr;

    gap: 1.5rem;

    width: min(100%, 1050px);

    margin-inline: auto;
    padding: 1rem;

    background-color: var(--school-cream);

    border: 1px solid rgba(0, 32, 64, 0.15);
    border-bottom: 3px solid var(--school-gold);
    border-radius: 0.8rem;

    box-shadow: 0 0.25rem 0.8rem rgba(0, 32, 64, 0.10);
}


/* Εικόνα */

.monthly-message-image {
    display: flex;

    align-items: center;
    justify-content: center;
}


.monthly-message-image img {
    display: block;

    width: 100%;
    max-width: 380px;
    height: auto;

    border-radius: 0.5rem;
}


/* Κείμενο */

.monthly-message-text {
    display: flex;
    flex-direction: column;

    justify-content: center;

    text-align: left;
}


.monthly-message-text p {
    margin-bottom: 0.8rem;

    line-height: 1.65;
}


/* Κινητά */

@media (max-width: 768px) {

    .monthly-message-card {
        grid-template-columns: 1fr;

        gap: 1rem;
    }

    .monthly-message-image img {
        max-width: 420px;
    }

    .monthly-message-text {
        text-align: center;
    }
}


/* =====================================================
   Τελευταίες Ανακοινώσεις
   ===================================================== */

.school-announcements {
    width: min(100%, 1050px);

    margin: 1.5rem auto 1rem;
    padding: 1rem 1.25rem;

    background-color: #ffffff;

    border: 1px solid rgba(0, 32, 64, 0.12);
    border-bottom: 3px solid var(--school-gold);
    border-radius: 0.8rem;

    box-shadow: 0 0.2rem 0.7rem rgba(0, 32, 64, 0.08);
}


/* Λίστα */

.school-announcements ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


/* Κάθε ανακοίνωση */

.school-announcements li {
    display: flex;
    align-items: baseline;

    gap: 0.9rem;

    padding: 0.7rem 0;

    border-bottom: 1px solid rgba(0, 32, 64, 0.10);
}


.school-announcements li:last-child {
    border-bottom: none;
}


/* Ημερομηνία */

.school-announcements time,
.school-announcements .mod-articles-category-date {
    flex: 0 0 auto;

    color: var(--school-gold);

    font-size: 0.95rem;
    font-weight: 600;
}


/* Τίτλος ανακοίνωσης */

.school-announcements a {
    color: var(--school-blue);

    font-weight: 600;
    text-decoration: none;
}


.school-announcements a:hover,
.school-announcements a:focus {
    text-decoration: underline;
}


/* Κινητά */

@media (max-width: 768px) {

    .school-announcements li {
        display: block;
    }

    .school-announcements time,
    .school-announcements .mod-articles-category-date {
        display: block;

        margin-bottom: 0.2rem;
    }
}


/* =====================================================
   Σύνδεσμος "Όλες οι Ανακοινώσεις"
   ===================================================== */

.all-announcements-link {
    width: min(100%, 1050px);

    margin: 0 auto 2rem;
    padding: 0;

    text-align: right;
}


.all-announcements-link a {
    display: inline-block;

    padding: 0.25rem 0;

    color: var(--school-blue);
    background: transparent;

    border: 0;

    font-weight: 600;
    text-decoration: none;

    box-shadow: none;
}


.all-announcements-link a:hover,
.all-announcements-link a:focus {
    color: var(--school-gold);

    text-decoration: underline;
}

/* =====================================================
   Σελίδα Ανακοινώσεων
   ===================================================== */

/* Κεντρική περιοχή λίστας */

.com-content-category {
    width: min(100%, 1050px);
    margin-inline: auto;
}


/* Πίνακας ανακοινώσεων */

.com-content-category .category {
    width: 100%;

    border-collapse: collapse;

    background-color: #ffffff;

    border: 1px solid rgba(0, 32, 64, 0.12);
    border-bottom: 3px solid var(--school-gold);
    border-radius: 0.7rem;

    overflow: hidden;
}


/* Επικεφαλίδα */

.com-content-category .category thead {
    background-color: var(--school-cream);
}

.com-content-category .category th {
    padding: 0.8rem 1rem;

    color: var(--school-blue);

    font-weight: 700;
    text-align: left;

    border-bottom: 2px solid rgba(0, 32, 64, 0.15);
}


/* Γραμμές */

.com-content-category .category td {
    padding: 0.8rem 1rem;

    vertical-align: middle;

    border-bottom: 1px solid rgba(0, 32, 64, 0.10);
}

.com-content-category .category tbody tr:last-child td {
    border-bottom: 0;
}


/* Σύνδεσμοι άρθρων */

.com-content-category .category a {
    color: var(--school-blue);

    font-weight: 600;
    text-decoration: none;
}

.com-content-category .category a:hover,
.com-content-category .category a:focus {
    color: var(--school-gold);

    text-decoration: underline;
}


/* Σελιδοποίηση */

.com-content-category .pagination {
    margin-top: 1.5rem;
    justify-content: center;
}


/* Κινητά */

@media (max-width: 600px) {

    .com-content-category .category th,
    .com-content-category .category td {
        padding: 0.65rem 0.6rem;
    }

    .com-content-category .category {
        font-size: 0.95rem;
    }
}

/* =====================================================
   Το Σχολείο μας - Κάρτες ενοτήτων
   ===================================================== */

.school-section-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1rem;

    width: min(100%, 1050px);

    margin: 1.5rem auto 2rem;
}


/* Κάρτες */

.school-section-card {
    display: flex;

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

    min-height: 7rem;

    padding: 1.2rem;

    color: var(--school-blue);
    background-color: var(--school-cream);

    border: 1px solid rgba(0, 32, 64, 0.18);
    border-bottom: 4px solid var(--school-gold);
    border-radius: 0.7rem;

    box-shadow: 0 0.2rem 0.65rem rgba(0, 32, 64, 0.08);

    text-align: center;
    text-decoration: none;

    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}


/* Hover / focus */

.school-section-card:hover,
.school-section-card:focus {
    color: #ffffff;
    background-color: var(--school-blue);

    text-decoration: none;

    transform: translateY(-2px);

    box-shadow: 0 0.35rem 0.9rem rgba(0, 32, 64, 0.14);
}


.school-section-card:focus-visible {
    outline: 0.2rem solid var(--school-gold);
    outline-offset: 0.2rem;
}


/* Tablet */

@media (max-width: 900px) {

    .school-section-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Κινητό */

@media (max-width: 600px) {

    .school-section-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .school-section-card {
        min-height: 5rem;
    }
}

/* =====================================================
   Σελίδα Μαθήματα - 2 x 2 κάρτες
   ===================================================== */

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


/* Κινητά */

@media (max-width: 600px) {

    .lessons-grid {
        grid-template-columns: 1fr;
    }

}

/* =====================================================
   Τίτλοι ενοτήτων
   ===================================================== */

.section-heading {
    width: min(100%, 1050px);

    margin: 2rem auto 1rem;

    color: var(--school-blue);

    font-size: 1.35rem;
    font-weight: 700;

    border-bottom: 2px solid var(--school-gold);

    padding-bottom: 0.35rem;
}


/* =====================================================
   Εκπαιδευτικό έργο
   ===================================================== */

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


/* Οι δύο τελευταίες κάρτες κεντραρισμένες στη δεύτερη σειρά */

.educational-grid .school-section-card:nth-child(4) {
    grid-column: 1 / 2;
}

.educational-grid .school-section-card:nth-child(5) {
    grid-column: 2 / 3;
}


/* Tablet */

@media (max-width: 900px) {

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

    .educational-grid .school-section-card:nth-child(4),
    .educational-grid .school-section-card:nth-child(5) {
        grid-column: auto;
    }
}


/* Κινητό */

@media (max-width: 600px) {

    .educational-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {

    .educational-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   Εκδρομές - Πρότυπο άρθρου
   ===================================================== */
/* =====================================================
   Εκδρομές
   ===================================================== */

.excursion-page {
    width: min(100%, 1050px);
    margin-inline: auto;
}


/* ------------------------------
   Γραμμές εγγράφων
   ------------------------------ */

.excursion-doc-row {
    display: grid;

    gap: 1rem;

    margin: 1rem 0;
}


/* Μονή κάρτα */

.excursion-doc-row-single {
    grid-template-columns: minmax(0, 1fr);
}


/* Τρεις προσφορές */

.excursion-offers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* Κάρτα εγγράφου */

.excursion-doc-card {
    display: flex;
    flex-direction: column;

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

    min-height: 6rem;

    padding: 1rem 1.25rem;

    color: var(--school-blue);
    background-color: var(--school-cream);

    border: 1px solid rgba(0, 32, 64, 0.18);
    border-bottom: 4px solid var(--school-gold);
    border-radius: 0.7rem;

    text-align: center;
    text-decoration: none;

    box-shadow: 0 0.2rem 0.65rem rgba(0, 32, 64, 0.08);

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}


.excursion-doc-card span {
    font-size: 1.05rem;
    font-weight: 700;
}


.excursion-doc-card small {
    margin-top: 0.35rem;

    font-size: 0.9rem;
    font-weight: 400;

    opacity: 0.8;
}


.excursion-doc-card:hover,
.excursion-doc-card:focus {
    color: #ffffff;
    background-color: var(--school-blue);

    text-decoration: none;

    transform: translateY(-2px);
}


/* ------------------------------
   Κείμενο εκδρομής
   ------------------------------ */

.excursion-story {
    margin: 1rem 0 2rem;

    padding: 1.25rem 1.5rem;

    background-color: #ffffff;

    border: 1px solid rgba(0, 32, 64, 0.12);
    border-bottom: 3px solid var(--school-gold);
    border-radius: 0.8rem;

    box-shadow: 0 0.2rem 0.7rem rgba(0, 32, 64, 0.08);
}


.excursion-story p {
    margin-bottom: 1rem;

    line-height: 1.7;
}


/* ------------------------------
   Gallery φωτογραφιών
   ------------------------------ */

.excursion-gallery {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 0.8rem;

    margin-top: 1.5rem;
}


.excursion-gallery img {
    display: block;

    width: 100%;
    height: 220px;

    object-fit: cover;

    border-radius: 0.55rem;
}


/* Tablet */

@media (max-width: 900px) {

    .excursion-offers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .excursion-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Κινητό */

@media (max-width: 600px) {

    .excursion-offers,
    .excursion-gallery {
        grid-template-columns: 1fr;
    }

    .excursion-doc-card {
        min-height: 5rem;
    }

    .excursion-gallery img {
        height: auto;
    }

    .excursion-story {
        padding: 1rem;
    }
}

/* =====================================================
   Εκδρομές - στάδιο σε αναμονή
   ===================================================== */

.excursion-doc-card.is-pending {
    color: rgba(0, 32, 64, 0.65);
    background-color: #f5f5f3;

    border-color: rgba(0, 32, 64, 0.18);
    border-bottom-color: rgba(168, 117, 32, 0.45);

    box-shadow: none;

    cursor: default;
}

.excursion-doc-card.is-pending small {
    color: #666;
    opacity: 1;

    font-style: italic;
}

.excursion-doc-card.is-pending:hover,
.excursion-doc-card.is-pending:focus {
    color: rgba(0, 32, 64, 0.65);
    background-color: #f5f5f3;

    transform: none;
}