/* =========================================================
   AMERICAN EXTERIORS
   IMAGE BLOCKS WITH PHOTO BACKGROUND - SITE OVERRIDES
========================================================= */

/* =========================================================
   MODULE / GRID
========================================================= */
.image-blocks-photo-background-module .image-blocks-photo-background {--ae-card-red:var(--skin-primary,#c51f2d);--ae-card-dark:#111318;--ae-card-display:var(--skin-font-display,'Barlow Condensed',Arial,sans-serif);--ae-card-body:var(--skin-font-body,'Inter','Segoe UI',Arial,sans-serif);--ae-card-radius:var(--skin-radius,6px);--ae-card-shadow:var(--skin-shadow,0 18px 45px rgba(0,0,0,.24))}
.center-pane .image-blocks-photo-background-module .row {margin-left:-9px;margin-right:-9px}
.center-pane .image-blocks-photo-background-module [class*="col-lg-"] {padding-left:9px !important;padding-right:9px !important}
/* Center pane is already contained - remove the Flexi's second container constraint */
.center-pane .image-blocks-photo-background-module .image-blocks-photo-background > .container {width:100% !important;max-width:none !important;padding-left:0 !important;padding-right:0 !important}

/* =========================================================
   CARD
========================================================= */
.image-blocks-photo-background .photo-wrap {position:relative;min-height:340px !important;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;margin-bottom:18px;padding:28px !important;background-color:var(--ae-card-dark);background-position:center !important;background-size:cover !important;border-radius:var(--ae-card-radius);box-shadow:var(--ae-card-shadow);color:#FFFFFF;opacity:1 !important;transition:transform .25s ease,box-shadow .25s ease}
.image-blocks-photo-background .photo-wrap::before {content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(8,9,11,.08) 0%,rgba(8,9,11,.28) 38%,rgba(8,9,11,.92) 100%);transition:background .25s ease}
.image-blocks-photo-background .photo-wrap::after {content:"";position:absolute;left:0;right:0;bottom:0;height:5px;z-index:3;background:var(--ae-card-red);transform:scaleX(.28);transform-origin:left center;transition:transform .25s ease}
.image-blocks-photo-background [class*="col-lg-"]:hover .photo-wrap, .image-blocks-photo-background [class*="col-lg-"]:focus-within .photo-wrap {opacity:1 !important;transform:translateY(-2px);box-shadow:0 22px 50px rgba(0,0,0,.28)}
.image-blocks-photo-background [class*="col-lg-"]:hover .photo-wrap::before, .image-blocks-photo-background [class*="col-lg-"]:focus-within .photo-wrap::before {background:linear-gradient(180deg,rgba(8,9,11,.04) 0%,rgba(8,9,11,.20) 38%,rgba(8,9,11,.78) 100%)}
.image-blocks-photo-background [class*="col-lg-"]:hover .photo-wrap::after, .image-blocks-photo-background [class*="col-lg-"]:focus-within .photo-wrap::after {transform:scaleX(1)}
.image-blocks-photo-background .headline, .image-blocks-photo-background .description-wrap, .image-blocks-photo-background .ModuleEditLink {position:relative;z-index:2}

/* =========================================================
   TYPOGRAPHY
========================================================= */
.image-blocks-photo-background .headline, .image-blocks-photo-background .col-lg-2 .headline, .image-blocks-photo-background .col-lg-3 .headline, .image-blocks-photo-background .col-lg-4 .headline {margin:0 !important;color:#FFFFFF !important;font-family:var(--ae-card-display) !important;font-size:34px !important;font-weight:900 !important;letter-spacing:.01em;line-height:1 !important;text-transform:uppercase;text-shadow:0 3px 16px rgba(0,0,0,.48) !important}
.image-blocks-photo-background .description-wrap, .image-blocks-photo-background .col-lg-2 .description-wrap, .image-blocks-photo-background .col-lg-3 .description-wrap, .image-blocks-photo-background .col-lg-4 .description-wrap {width:100% !important}
.image-blocks-photo-background .description {max-width:95%;margin:11px 0 0 !important;color:#D4D6DA !important;font-family:var(--ae-card-body) !important;font-size:14px !important;font-weight:400;line-height:1.55 !important;text-shadow:0 2px 10px rgba(0,0,0,.55) !important}

/* =========================================================
   BUTTON / LINK TREATMENT
========================================================= */
.image-blocks-photo-background .image-blocks-photo-background-button {display:inline-flex !important;align-items:center;gap:8px;width:auto;margin:18px 0 0 !important;padding:0 !important;background:transparent !important;color:#FFFFFF !important;font-family:var(--ae-card-display) !important;font-size:16px !important;font-weight:800 !important;letter-spacing:.025em;line-height:1;text-align:left;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.image-blocks-photo-background .image-blocks-photo-background-button::after {content:"\2192";color:var(--ae-card-red);font-family:Arial,sans-serif;font-size:18px;font-weight:700;line-height:1;transition:transform .2s ease}
.image-blocks-photo-background .image-blocks-photo-background-buttonwrap {padding:0 !important;background:transparent !important}
.image-blocks-photo-background [class*="col-lg-"]:hover .image-blocks-photo-background-button::after, .image-blocks-photo-background [class*="col-lg-"]:focus-within .image-blocks-photo-background-button::after {transform:translateX(4px)}
.image-blocks-photo-background .image-blocks-photo-background-button:hover > div {background:transparent !important}

/* =========================================================
   CMS EDIT LINKS
========================================================= */
.image-blocks-photo-background .ModuleEditLink {text-shadow:none}

/* =========================================================
   RESPONSIVE
========================================================= */
@media only screen and (max-width:991px) {
.image-blocks-photo-background .photo-wrap {min-height:320px !important}
}

@media only screen and (max-width:700px) {
.center-pane .image-blocks-photo-background-module .row {margin-left:0;margin-right:0}
.center-pane .image-blocks-photo-background-module [class*="col-lg-"] {padding-left:0 !important;padding-right:0 !important}
.image-blocks-photo-background .photo-wrap {min-height:315px !important;margin-bottom:18px;padding:24px !important}
.image-blocks-photo-background .headline, .image-blocks-photo-background .col-lg-2 .headline, .image-blocks-photo-background .col-lg-3 .headline, .image-blocks-photo-background .col-lg-4 .headline {font-size:30px !important}
.image-blocks-photo-background .description {max-width:100%;font-size:14px !important}
}