/* /homes-for-troops/ -- template-homes-for-troops.php.

   The page is .om-* reuse; these are the two layouts the design system has no component for:
   artwork beside copy, and a three-up row of photo cards. Everything else on the page is the
   shared hero, section, lead, CTA and text link. */

/* --- Hero: the old site's banner ------------------------------------------------------------
   The artwork is 3200x1405 and carries its own composition: flags left and right, a saluting
   silhouette in the middle, and a white band across the foot. So it is `cover` from the top,
   and the padding keeps the copy in the upper two thirds where the field is blue -- text that
   drifts into that white band disappears.

   The h1 and lead are white here rather than the navy the light hero uses, and the rule is
   written against .om-hero--compact's own selectors so it holds inside design-om.css's
   breakpoints. */
.hft-hero {
    background: #0b2f63 url('../img/troops-hero.jpg') center top / cover no-repeat;
    padding: 64px 0 150px;
}
.om-page .hft-hero h1 { color: #fff; }
.om-page .hft-hero .om-hero-lead { color: #e6edf7; }
/* The flags run up both edges of the artwork, so the copy is held to the middle. */
.hft-hero .om-hero__inner { max-width: 760px; margin: 0 auto; }

@media (max-width: 760px) {
    /* Cover on a narrow viewport crops the flags out and leaves a blue field, which is fine,
       but the white foot climbs; less bottom padding keeps the button off it. */
    .hft-hero { padding: 40px 0 90px; }
}

/* --- Intro: the artwork beside the explanation --------------------------------------------- */
.hft-intro {
    display: flex;
    align-items: center;
    gap: 48px;
}
.hft-intro__art {
    flex: 0 0 340px;
    width: 340px;
    height: auto;
}
.hft-intro__copy { max-width: 660px; }
.hft-intro__copy h2 {
    margin: 0 0 14px;
    text-align: left;
    font-size: 30px;
    line-height: 1.22;
}
.hft-intro__copy p {
    margin: 0 0 12px;
    color: #5e6874;
    font-size: 16px;
    line-height: 1.6;
}

/* --- The Veterans -------------------------------------------------------------------------- */
.hft-vets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    margin-top: 28px;
}
.hft-vet {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e4e7ee;
    border-radius: 12px;
    overflow: hidden;
}
/* A fixed ratio, because the three stills are 1174x654, 1294x661 and 1258x649 -- close enough
   to look wrong side by side, and object-fit settles it without cropping anyone out of frame. */
.hft-vet__photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}
.hft-vet h3 {
    margin: 20px 22px 8px;
    color: #032d60;
    font-size: 18px;
    line-height: 1.3;
}
.hft-vet p {
    margin: 0 22px;
    color: #5e6874;
    font-size: 15px;
    line-height: 1.6;
}
/* Pinned to the foot so the three links line up under stories of different lengths. */
.hft-vet__link {
    margin: 16px 22px 22px !important;
    align-self: flex-start;
    margin-top: auto !important;
    /* .om-text-link is white with !important for the navy hero it was written for; on a white
       card that is nothing at all. */
    color: #032d60 !important;
}
.hft-vet__link:hover { color: #dd8210 !important; }

@media (max-width: 980px) {
    .hft-vets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .hft-intro { flex-direction: column; align-items: flex-start; gap: 24px; }
    .hft-intro__art { flex: 0 0 auto; width: 240px; }
    .hft-intro__copy h2 { font-size: 26px; }
    .hft-vets { grid-template-columns: minmax(0, 1fr); }
}