/* ============================================================
   GEO BANNER — our design, locked in.

   EVERY RULE IS SCOPED TO .geo-banner. That is not tidiness, it is
   the whole point. The markup also carries .subpage-banner, which is
   the CLIENT SITE's own class for its ordinary subpage heroes
   (fences/, gates/, contact/ ...). This file was originally lifted
   out of the master site's css/_critical.css with those class names
   intact, so every client's own .subpage-banner rules landed on our
   markup and the geo hero rendered differently on every site.

   Accent Fence is the case that caught it: their master.css sets
   .subpage-banner-content { text-align: center }. We never declared
   text-align, so their value won, the h1 centred across 1170px while
   the 600px paragraph stayed pinned left, and the hero looked broken.
   Nobody "grabbed" their design -- we were squatting on their class
   name.

   .geo-banner (0,2,0) outranks a bare .subpage-banner (0,1,0), so
   ours wins on EVERY site regardless of load order or what the host
   happens to declare. Keep the scope on any rule added here.

   WE DECLARE ALIGNMENT; WE INHERIT TYPE. text-align is layout and is
   ours (left -- Matt, 2026-07-16). font-family/size stay inherited on
   purpose: the h1 should look like that client's h1s.
   ============================================================ */

.geo-banner {
    position: relative;
    overflow: hidden;
    min-height: 500px;
}

.geo-banner picture img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.geo-banner .subpage-banner-filter {
    position: relative;
    z-index: 2;
    min-height: inherit;
    display: flex;
    align-items: center;
    padding: 60px 0;
    background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.45) 70%, rgba(0,0,0,0.05) 100%);
}

.geo-banner .subpage-banner-content {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    /* Declared, not defaulted. Left is the design: the gradient is dark on the
       left and near-clear on the right, so centred text drifts onto the bright
       side and loses contrast. A host that centres its own heroes must not
       reach in here. */
    text-align: left;
}

.geo-banner h1 {
    color: #fff;
    margin-top: 0;
    text-align: left;
}

.geo-banner p {
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
    max-width: 600px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    margin-bottom: 0;
    text-align: left;
}

@media (max-width: 767px) {
    .geo-banner {
        min-height: 0;
    }
    .geo-banner .subpage-banner-filter {
        min-height: 0;
        padding: 50px 0;
        background: rgba(0, 0, 0, 0.55);
    }
}