/* =====================================================================
   CONTAINER SYSTEM
===================================================================== */

/* =====================================================================
	PAGE HERO BANNER - DEFAULT
===================================================================== */
.banner-wrap {
    background-color: var(--blue);
    padding-top: 56px;
    padding-bottom: 40px;
    margin-top: var(--setfixposcontent);
}

.banner-wrap .title-block-wrap {
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
}

.brand-name-risewrap,
.page-title-risewrap {
    overflow: hidden;
}

.banner-wrap .brand-name {
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--orange);
    animation: riseUp .6s ease forwards;
}

.banner-wrap .page-title {
    margin: 8px 0 0;
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.05;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--cream);
    animation: riseUp .8s ease both;
    animation-delay: .1s;
}

.banner-wrap .page-description {
    margin-top: 14px;
    font-size: 19px;
    line-height: 28px;
    font-weight: 300;
    color: var(--cream);
}

@keyframes riseUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* =====================================================================
	BASE CONTAINERS - GLOBAL
===================================================================== */

/* BAND WRAP - color bleeds to viewport edge, content stays in gutters -- */
.band-wrap {
    grid-column: full;
    display: grid;
    grid-template-columns: inherit;
    padding-top: var(--contenttopspacer);
    padding-bottom: var(--contentendspacer);
}

/* BLEED WRAP - content itself spans edge to edge ----------------------- */
.bleed-wrap {
    grid-column: full;
    display: grid;
    grid-template-columns: inherit;
    width: 100%;
}

/* INNER WRAP ----------------------------------------------------------- */
.inner-wrap {
    grid-column: content;
    width: 100%;
}

.bleed-wrap > .inner-wrap {
    grid-column: full;
}


/* =====================================================================
	COLUMNS
===================================================================== */
.is-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    align-items: center;
}

.is-thirds {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
    align-items: start;
}

.is-quarters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
    align-items: start;
}

.is-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--gap);
    align-items: start;
}

/* Reverse column order */
.is-reversed > .content-part,
.is-reversed > .left-part  { order: 2; }

.is-reversed > .image-part,
.is-reversed > .right-part { order: 1; }


/* =====================================================================
	MODIFIERS
===================================================================== */

/* Vertical alignment */
.is-top     { align-items: start; }
.is-middle  { align-items: center; }
.is-bottom  { align-items: end; }
.is-stretch { align-items: stretch; }

/* Gap */
.is-gap-tight   { gap: var(--gap-tight); }
.is-gap-tighter { gap: var(--gap-tighter); }
.is-gap-none    { gap: 0; }

/* Band padding */
.band-wrap.is-tight {
    padding-top: var(--contenttopspacer-tight);
    padding-bottom: var(--contentendspacer-tight);
}

.band-wrap.is-flush        { padding-top: 0; padding-bottom: 0; }
.band-wrap.is-flush-top    { padding-top: 0; }
.band-wrap.is-flush-bottom { padding-bottom: 0; }


/* =====================================================================
	PARTS
===================================================================== */

/* Two content columns */
.left-part,
.right-part,

/* Content + image */
.content-part {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.image-part {
    position: relative;
    overflow: hidden;
}

.image-part img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Logos, cutouts - no crop */
.image-part.is-contain img {
    height: auto;
    object-fit: contain;
}

/* Horizontal row inside a part - buttons, inline items */
.is-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-tighter);
}

.is-row.is-end    { justify-content: flex-end; }
.is-row.is-center { justify-content: center; }

/* Copy width cap inside a wide column */
.copy-limit {
    width: 100%;
    max-width: 1004px;
}


/* =====================================================================
	BACKGROUNDS
===================================================================== */
.bg-blue      { background-color: var(--blue);      color: var(--cream); }
.bg-mid-blue  { background-color: var(--mid-blue);  color: var(--cream); }
.bg-lite-blue { background-color: var(--lite-blue); color: var(--blue); }
.bg-orange    { background-color: var(--orange);    color: var(--white); }
.bg-red       { background-color: var(--red);       color: var(--white); }
.bg-yellow    { background-color: var(--yellow);    color: var(--blue); }
.bg-cream     { background-color: var(--cream);     color: var(--blue); }
.bg-white     { background-color: var(--white);     color: var(--body-text); }