/* ==========================================================
   Digital Hifazat
   ----------------------------------------------------------
   Loaded last in the head of resources/views/digital_hifazat.blade.php,
   after the microsite's own bundle, so these override it.

   The page is otherwise the original DigitalHifazat/index.html:
   this file only evens up the card rows, whose copy runs to
   different lengths and left every row ragged.
   ========================================================== */


/* ----------------------------------------------------------
   EXECUTION PLAN: the three coloured boxes
   ----------------------------------------------------------
   The headings run from one line to two and the paragraphs from
   three lines to five, so the three boxes ended at different
   heights. Stretching the row and letting each box fill its
   column levels them.
   ---------------------------------------------------------- */
#plan .row {
    align-items: stretch;
}

#plan .about-box {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#plan .about-box p:last-child {
    margin-bottom: 0;
}

/* The icon above each heading. They are 100px wide but different heights,
   so a fixed box keeps the three headings on the same line. */
#plan .pro-step img {
    display: block;
    width: 100px;
    height: 100px;
    object-fit: contain;
}


/* ----------------------------------------------------------
   LEARNING RESOURCES: the three cards
   ----------------------------------------------------------
   A picture over a coloured panel. The pictures are different
   shapes and the panels hold different amounts of copy, so both
   halves need levelling: one box for the picture, and the panel
   grows to fill what is left with the button pinned to its
   floor.
   ---------------------------------------------------------- */
#resources .row {
    align-items: stretch;
}

#resources .blog-item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#resources .blog-item .top {
    flex: 0 0 auto;
}

#resources .blog-item .top img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
}

#resources .blog-item .bottom {
    display: flex;
    flex: 1 1 auto;
}

#resources .about-box {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* The paragraph takes up the slack, which lines the three buttons up */
#resources .about-box p {
    flex: 1 1 auto;
}

/* .about-box is centred text, so the button is centred too — the old page
   left it in the flow and it inherited that */
#resources .about-box .btn {
    align-self: center;
}


/* ----------------------------------------------------------
   IN THE NEWS: the three cards
   ----------------------------------------------------------
   The microsite gives .blog-item no styling at all, so these
   three sat bare on the page background while every other card
   group on it is a panel. They get the same card treatment as
   the rest of the site: white, shadowed, picture cropped to a
   band, all three the same height with the Read More buttons on
   one line.
   ---------------------------------------------------------- */
#news .row {
    align-items: stretch;
}

#news .blog-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 30px;
    background-color: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    transition: .5s linear;
}

#news .blog-item:hover {
    transform: translate(0, -13px);
}

#news .blog-item .top {
    flex: 0 0 auto;
}

#news .blog-item .top img {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
}

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

#news .blog-item .bottom ul {
    padding-left: 0;
    margin-bottom: 10px;
}

/* Two lines reserved for the headline, so a short one does not leave its
   card shorter than the rest */
#news .blog-item .bottom h5 {
    line-height: 1.4;
    min-height: 2.8em;
}

#news .blog-item .bottom p {
    flex: 1 1 auto;
}

/* margin-top pins the row of buttons to the floor of the cards */
#news .blog-item .bottom > div:last-child {
    margin-top: auto;
}


/* ----------------------------------------------------------
   AWARENESS VIDEOS
   ----------------------------------------------------------
   Four clips, each with its own caption panel beneath it. The
   two stay separate blocks with a gap between them, the way
   DigitalHifazat has it — this only makes the four columns
   match each other.

   The <video> tags carried height="733px", an HTML attribute
   with a unit, which browsers ignore; each clip then rendered
   at its own aspect ratio. The posters are 768, 756, 768 and
   778 pixels wide against a common 1600 height, so the four
   videos ended at four different depths and dragged their
   captions out of line with them.
   ---------------------------------------------------------- */
#videos .row {
    align-items: stretch;
}

#videos .col-md-3 {
    display: flex;
    flex-direction: column;
}

/* The clip is the fixed part of the column.
   (Two of the four columns had a stray </div> that put .about-box inside
   .video-container instead of beside it; the view normalises all four to
   the same shape, so one rule covers them.) */
#videos .video-container {
    flex: 0 0 auto;
}

#videos video {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 8px;
    background-color: #000;
}

/* The caption is its own block: the gap keeps it separate from the clip, and
   it grows to fill whatever is left so the four columns end level. */
#videos .about-box {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    margin-top: 20px;
    border-radius: 8px;
}

#videos .about-box h5 {
    margin-bottom: 10px;
}

#videos .about-box p {
    margin-bottom: 0;
}