/* ==========================================================
   News and Events (list and story)
   ----------------------------------------------------------
   Loaded by news-events.blade.php and news-detail.blade.php
   via @push('styles'), so it lands after site.css.
   ========================================================== */


/* ----------------------------------------------------------
   THE LIST
   ----------------------------------------------------------
   The same card the Impact pages use: a picture on top and a
   white block beneath it. Titles and summaries come from the
   admin panel and run to any length, so the block is a column —
   the summary takes up the slack and Read More sits on the
   floor, which lines the row up.

   The height subtracts the margin: .equal-cards stretches the
   column, so a card at height:100% fills it edge to edge and
   the rows end up touching.
   ---------------------------------------------------------- */
.news-card {
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.news-card .blog-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 0;
}

.news-card .top {
    flex: 0 0 auto;
}

.news-card .top img {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 0;
}

.news-card .bottom {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 20px;
}

.news-card .bottom ul {
    margin-bottom: 10px;
}

/* Two lines reserved for the headline, so a short one does not leave its
   card shorter than the rest */
.news-card .bottom h3 {
    font-size: 19px;
    line-height: 1.4;
    min-height: 2.8em;
    margin-bottom: 10px;
}

.news-card .bottom p {
    flex: 1 1 auto;
    margin-bottom: 14px;
}

/* margin-top pins the link to the floor of the card; align-self stops the
   flex column stretching it into a full-width bar */
.news-card .card-foot {
    margin-top: auto;
    align-self: flex-start;
}


/* ----------------------------------------------------------
   PAGINATION
   ----------------------------------------------------------
   The view asks for Laravel's Bootstrap 5 pager, which matches
   the Bootstrap this theme already loads. These only put it in
   the site's colours and centre it.
   ---------------------------------------------------------- */
.news-pagination {
    margin-top: 20px;
}

/* Laravel's Bootstrap 5 view puts the "Showing x to y" line and the pager
   side by side. Stacked and centred reads better under a three-column grid. */
.news-pagination nav > div:last-child {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.news-pagination nav > div:last-child > div:first-child {
    text-align: center;
}

.news-pagination .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 0;
}

.news-pagination .page-link {
    min-width: 44px;
    text-align: center;
    color: #302c51;
    background-color: #fff;
    border: 1px solid #e5e6ff;
    border-radius: 4px;
    padding: 9px 14px;
    transition: .3s all ease;
}

.news-pagination .page-link:hover {
    background-color: #e5e6ff;
    color: #302c51;
}

.news-pagination .page-link:focus {
    box-shadow: none;
}

.news-pagination .page-item.active .page-link {
    background-color: #ff6015;
    border-color: #ff6015;
    color: #fff;
}

.news-pagination .page-item.disabled .page-link {
    color: #adb5bd;
    background-color: #f7f7f9;
}


/* ----------------------------------------------------------
   THE STORY
   ----------------------------------------------------------
   The body is written in the admin panel's editor, so it can
   contain anything. These keep whatever it contains inside the
   column.
   ---------------------------------------------------------- */
.news-date {
    color: #757575;
    margin-bottom: 6px;
}

.news-body {
    line-height: 1.8;
}

.news-body img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin: 10px 0;
}

.news-body iframe,
.news-body table {
    max-width: 100%;
}

.news-body table {
    display: block;
    overflow-x: auto;
}


/* ----------------------------------------------------------
   SIDEBAR
   ---------------------------------------------------------- */
.widget-area .post-inner img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 4px;
}

.widget-area .post-inner h4 {
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 4px;
}


/* ==========================================================
   THEMED PAGE ONLY
   ----------------------------------------------------------
   Applies only while the page carries the premium theme
   (body.home-premium, set by the @section in the Blade file).
   Drop that one line and the page returns to how it was.
   ========================================================== */


/* ----------------------------------------------------------
   SPACE BETWEEN THE ROWS OF NEWS CARDS
   ----------------------------------------------------------
   .equal-cards matches the cards' heights but adds no vertical
   spacing, so each row of news items sat directly on the one
   above. The margin matches the 24px Bootstrap already puts
   between the columns, so the gaps match in both directions.
   ---------------------------------------------------------- */
body.home-premium .equal-cards > [class*="col-"] {
    margin-bottom: 24px;
}


/* The pager's first block is a bare Previous/Next pair meant for phones
   (d-sm-none), and the rule above forces the full pager on at every width,
   so a phone showed both. The full one has the numbers; it is the one kept. */
.news-pagination nav > div:first-child {
    display: none !important;
}


/* ----------------------------------------------------------
   THE STORY'S SIDEBAR
   ----------------------------------------------------------
   The theme stretches every .blog-item to the height of its
   column, which suits a grid of equal cards. Here the card is
   one video thumbnail with the list of stories under it in the
   same column, so the stretch pushed the list out of the column
   altogether -- on a phone, over the footer.
   ---------------------------------------------------------- */
body.home-premium .donation-details-area .col-lg-4 .blog-item {
    height: auto;
}