/* ==========================================================================
   Home hero — slider on the left, principal / chairman messages on the right.
   Only applies when at least one message is published; without them the
   slider keeps the theme's original full-bleed layout.
   ========================================================================== */

.main-slider.has-hero-messages {
    --hero-height: 672px;
    min-height: 0;
    padding: 22px 0;
    background-color: #f6f7f9;
}

.main-slider.has-hero-messages .hero-row {
    --bs-gutter-x: 22px;
}

.main-slider.has-hero-messages .slider-wrapper .image {
    height: var(--hero-height);
    border-radius: var(--thm-radius);
}

/* No dark wash over the slide, and the caption sits at the bottom of the
   slide rather than being centred over it. */
.main-slider.has-hero-messages .slide-overlay {
    display: none;
}

.main-slider.has-hero-messages .slider-caption {
    align-items: flex-end;
    padding-bottom: 28px;
}

/* With the wash gone the white caption sits straight on the photo, so it needs
   a shadow to stay readable over bright areas. */
.main-slider.has-hero-messages .wrap-caption h1,
.main-slider.has-hero-messages .wrap-caption .text {
    text-shadow: 0 2px 10px rgba(0, 0, 0, .65), 0 1px 2px rgba(0, 0, 0, .5);
}

.main-slider.has-hero-messages .slider-caption .container {
    width: 100%;
    max-width: 100%;
    padding-left: 28px;
    padding-right: 28px;
}

.main-slider.has-hero-messages .c-left .wrap-caption,
.main-slider.has-hero-messages .c-right .wrap-caption {
    width: 100%;
    margin-left: 0;
}

.main-slider.has-hero-messages h1 {
    font-size: 34px;
    line-height: 40px;
    margin-bottom: 12px;
}

.main-slider.has-hero-messages .text {
    font-size: 15px;
}

.main-slider.has-hero-messages .link-btn .btn {
    padding: 9px 22px;
}


/* Message cards ---------------------------------------------------------- */

.hero-message-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Heading across the top, then the photo (with the name and designation under
   it) on the left and the message to its right. */
.hero-message {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 14px 16px 16px;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-top: 3px solid var(--thm-primary);
    border-radius: var(--thm-radius);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

/* Two columns, two rows: photo over the name block on the left, the message
   over the Read More link on the right. The message row takes the slack so the
   text can sit centred in it, and the link lines up beside the name block. */
.hero-message-row {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 30% 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
        "photo  body"
        "person foot";
    column-gap: 14px;
    row-gap: 8px;
}

.hero-message-body {
    grid-area: body;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;   /* the message sits centred in its row */
}

.hero-message-foot {
    grid-area: foot;
    min-width: 0;
    display: flex;
    align-items: center;   /* link centred against the name block */
    justify-content: flex-end;
}

.hero-message-heading {
    margin: 0 0 10px;
    color: var(--thm-text);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.hero-message-photo {
    grid-area: photo;
    align-self: start;
    overflow: hidden;
    aspect-ratio: 5 / 6;   /* 3:2 portrait - taller than it is wide */
    border-radius: var(--thm-radius);
    background-color: #f2f4f7;
}

.hero-message-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border: 1px solid #000;
}

.hero-message-person {
    grid-area: person;
    display: flex;
    flex-direction: column;
    justify-content: center;   /* centred in its row, so the link lines up with it */
    min-width: 0;
    overflow-wrap: anywhere;
}

.hero-message-name {
    color: var(--thm-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.hero-message-designation {
    color: var(--thm-secondary-text);
    font-size: 13px;
    line-height: 1.3;
}

.hero-message-text {
    /* sized to its content: growing it would let lines spill past the clamp */
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    color: var(--thm-secondary-text);
    font-size: 14px;
    line-height: 1.6;
}

.hero-message-link {
    margin-top: 0;
    align-self: center;
    color: var(--thm-primary);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.hero-message-link:hover,
.hero-message-link:focus {
    color: var(--thm-hover);
}


/* Stacked below lg — the columns sit under each other, heights go natural  */

@media (min-width: 992px) {
    .main-slider.has-hero-messages .hero-message-col {
        height: var(--hero-height);
    }
}

@media (max-width: 991.98px) {
    .main-slider.has-hero-messages {
        --hero-height: 432px;
    }
    .main-slider.has-hero-messages .hero-message-col {
        margin-top: 18px;
    }
    .main-slider.has-hero-messages h1 {
        font-size: 28px;
        line-height: 34px;
    }
    /* The column is no longer height-constrained here, so the cards size to
       their content instead of sharing a fixed height. */
    .hero-message {
        flex: 0 0 auto;
    }
    .hero-message-text {
        -webkit-line-clamp: 8;
    }
}

/* Below lg the cards are full width, so a percentage aside would make the
   portrait photo enormous - cap it instead. */
@media (max-width: 991.98px) {
    .hero-message-row {
        grid-template-columns: 190px 1fr;
    }
}

/* Phones: photo and its caption on top, then the message, then the link */
@media (max-width: 575.98px) {
    .hero-message-row {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "photo"
            "person"
            "body"
            "foot";
        row-gap: 10px;
    }
    /* the column is full width now, so cap the photo itself */
    .hero-message-photo {
        max-width: 190px;
    }
}

@media (max-width: 575.98px) {
    .main-slider.has-hero-messages {
        --hero-height: 312px;
        padding: 14px 0;
    }
    .main-slider.has-hero-messages h1 {
        font-size: 22px;
        line-height: 28px;
    }
}


/* ==========================================================================
   Full message page (home/message/<chairman|principal>)
   ========================================================================== */

.message-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 28px 30px 34px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-top: 3px solid var(--thm-primary);
    border-radius: var(--thm-radius);
}

.message-page-head {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px solid #eee;
}

.message-page-photo img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--thm-primary);
}

.message-page-name {
    margin: 0 0 4px;
    color: var(--thm-text);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}

.message-page-designation {
    display: block;
    color: var(--thm-secondary-text);
    font-size: 15px;
}

.message-page-body {
    color: var(--thm-secondary-text);
    font-size: 16px;
    line-height: 1.9;
    text-align: justify;
}

@media (max-width: 575.98px) {
    .message-page {
        padding: 20px 18px 24px;
    }
    .message-page-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .message-page-photo img {
        width: 84px;
        height: 84px;
    }
    .message-page-body {
        font-size: 15px;
        text-align: left;
    }
}