/* =============================================================================
   Home page (Home.aspx) only.

   Home.aspx uses no master page, so nothing in this file can reach any of the
   other pages in the application. It is linked from Home.aspx alone.

   Every rule here exists to override a SymphonyMain.css rule that assumes the
   hero holds a single centred line of text, or that the cards hold free-standing
   buttons. Each block says which rule it is working around and why.
   ============================================================================= */

/* ----------------------------------------------------------------- hero ---- */

/* Symphony pins the hero to height:39vw with overflow:hidden. Two columns need
   more room, so the box is taller and the photo is told to cover it. */
.heroContainer { height: 46vw; min-height: 470px; }
.heroImage { height: 100% !important; object-fit: cover; }

/* Space between the headline and the two boxes. */
.heroBoxes { margin-top: 45px; }

/* The two hero boxes: white-bordered cards over the photo. */
.heroBox {
    border: 1px solid #fff;
    border-radius: 6px;
    background-color: rgba(0,0,0,.38);
    padding: 22px 18px;
    margin-bottom: 15px;
}

.heroBox h6 { margin-bottom: 10px; }
.heroBox .heroText-subheadline { margin-bottom: 18px; }

/* Side by side the two boxes have different amounts of content, so match their
   heights - with a visible border, uneven boxes read as a mistake. Flex on the
   row overrides the float grid; the col-* width percentages still apply. */
@media (min-width: 992px) {
    .heroBoxes { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
    .heroBoxes > div { display: -webkit-flex; display: flex; }
    .heroBoxes .heroBox { -webkit-flex: 1 1 auto; flex: 1 1 auto; width: 100%; }
}

/* The card section nests a .row directly inside another .row. Each carries
   margin: 0 -15px to cancel its container's padding, so nested they double up and
   the content sits 26px wider than the container on both sides - a sideways scroll
   at any width where the container cannot absorb it. A .row should hold .col-*,
   not another .row; zeroing the inner one is the least invasive correction. */
#page .row > .row { margin-left: 0; margin-right: 0; }

/* Same story one level up: Symphony's .container is sized from the viewport width
   including the scrollbar, so a .row hanging -15px off each side of it overflows by
   a few pixels in the 992-1215px band. The columns carry their own 15px padding, so
   dropping the negative margin costs nothing visually and removes the scroll. */
#page .container > .row { margin-left: 0; margin-right: 0; }

/* Card row. The four cards hold different amounts of copy, so their buttons landed
   at four different heights and vertical positions. Stretch the cards to a common
   height and push each button to the bottom, so the row of buttons shares one
   baseline. Flex overrides the float grid; the col-* widths still apply. */
@media (min-width: 992px) {
    .cardRow { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
    .cardRow > div { display: -webkit-flex; display: flex; }
    .cardRow .thumbnail {
        display: -webkit-flex; display: flex;
        -webkit-flex-direction: column; flex-direction: column;
        width: 100%;
    }
    .cardRow .caption {
        display: -webkit-flex; display: flex;
        -webkit-flex-direction: column; flex-direction: column;
        -webkit-flex: 1 1 auto; flex: 1 1 auto;
    }
    /* the button, or the <p> wrapping it, is always the last child */
    .cardRow .caption > :last-child { margin-top: auto; margin-bottom: 0; }

    /* Three buttons sit inside a <p>; the whitespace around them creates a stray
       line box that left those buttons 5px above the one that is a direct child.
       Making the <p> a flex container drops whitespace-only nodes, so the <p> is
       exactly as tall as its button and all four bottoms line up. */
    .cardRow .caption > p:last-child { display: -webkit-flex; display: flex; }
}

/* "Join the list" fits on one line (63px) while the other three labels wrap to two
   (92px), which left the row of buttons uneven. Size them all for two lines. */
.cardRow .btn-block {
    min-height: 92px;
    width: 100%;
    /* Symphony gives .btn-block a 4.5px vertical margin, which sat inside the
       wrapping <p> and pushed three of the four buttons up off the shared baseline. */
    margin: 0;
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    -webkit-justify-content: center; justify-content: center;
}

/* Between 992 and 1199 the four columns narrow to about 213px and the longest label
   ("Find local bell ringing opportunities") needs a third line, so the two-line
   height is not enough to keep the row even in that band. */
@media (min-width: 992px) and (max-width: 1199px) {
    .cardRow .btn-block { min-height: 120px; }
}

/* Mobile: let the hero grow with its content instead of clipping it. The fixed
   39vw / 180px box is far shorter than two stacked boxes, which is what caused
   the overlapping text. */
/* These are prefixed with #page to raise specificity. Symphony centres the hero
   with ":not(.preview-container):not(.slide-preview-custom) .heroText-container"
   inside @media (min-width:768px) - specificity (0,3,0), which beats a plain
   .heroText-container (0,1,0). Without #page the translate survives, the hero
   content shifts up by half its height, and the headline and first box are clipped
   off the top of the hero between 768px and 991px. */
@media (max-width: 991px) {
    #page .heroContainer { height: auto; min-height: 0; }
    #page .heroText-container {
        position: relative;
        height: auto;
        top: auto;
        -webkit-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
    #page .heroText {
        top: auto;
        -webkit-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
        padding: 30px 10px;
    }
    .heroBoxes { margin-top: 25px; }

    /* The page nests .row inside .row; each carries negative side margins, which
       compound and push content past the viewport, giving a sideways scroll on a
       phone. Zero them out on small screens - the columns keep their own padding. */
    #page .row { margin-left: 0; margin-right: 0; }
}