/*
 * CPG Properties — editorial photo footer
 *
 * Properties-only finishing layer. The shared Holding footer remains intact.
 */

body.cpg-body--properties .cpg-footer.cpg-footer {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0 !important;
    background: var(--cpg-panel-fixed, #16181b);
    color: #fff;
}

/* ==========================================================================
   FOOTER — built to the supplied reference
   Three stacked bands inside one container: the invitation, a hairline, the
   address and number beside the accounts behind a divider, a second hairline,
   then the base row with the legal line and the navigation.
   ========================================================================== */
body.cpg-body--properties .cpg-footer.cpg-footer { position: relative; isolation: isolate; }

.cpgf__inner {
    display: grid;
    padding-block: clamp(2.5rem, 4.5vw, 4.25rem) clamp(1.5rem, 2.5vw, 2.25rem);
}

/* --- band 1 — the invitation ---------------------------------------------- */
/* The invitation on the left, the way in on the right. */
.cpgf__top { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); align-items: end; }
.cpgf__lead { display: grid; gap: clamp(1rem, 2vw, 1.75rem); align-content: start; }

.cpgf__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    justify-self: start;
    min-height: 3.25rem;
    padding-inline: clamp(1.5rem, 3vw, 2.25rem);
    border: 1px solid rgba(255, 255, 255, .32);
    color: #FFFFFF;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .35s linear, color .35s linear, border-color .35s linear;
}
.cpgf__cta-icon { transition: transform .35s var(--cpg-ease, ease); }
.cpgf__cta:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--cpg-panel-fixed, #16181b); }
.cpgf__cta:hover .cpgf__cta-icon { transform: translateX(4px); }

.cpgf__title {
    margin: 0;
    max-width: 14ch;
    /* The reference sets this line in the text face at a light weight, not in
       the heavy display face the rest of the site uses for headings. */
    font-family: var(--cpg-font-body, inherit);
    font-size: clamp(2rem, 1rem + 3.4vw, 3.75rem);
    font-weight: 300;
    line-height: .98;
    letter-spacing: -.03em;
    color: #FFFFFF;
}
.cpgf__text {
    margin: 0;
    max-width: 48ch;
    font-size: clamp(.9375rem, .85rem + .45vw, 1.1875rem);
    font-weight: 300;
    line-height: 1.3;
    color: rgba(255, 255, 255, .55);
}

/* --- band 2 — address, number and the accounts ---------------------------- */
.cpgf__row {
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
    margin-block-start: clamp(2rem, 4vw, 3.25rem);
    padding-block-start: clamp(2rem, 4vw, 3.25rem);
    border-top: 1px solid rgba(255, 255, 255, .14);
}

/* Address and number, as two labelled blocks. */
.cpgf__details { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-content: start; }
.cpgf__detail { display: grid; gap: .5rem; align-content: start; }
.cpgf__detail-label {
    margin: 0;
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.3;
    color: rgba(255, 255, 255, .45);
}
.cpgf__detail-value {
    margin: 0;
    max-width: 22ch;
    /* The same text face the band above it uses. */
    font-family: var(--cpg-font-body, inherit);
    font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
    font-weight: 400;
    line-height: 1.45;
    color: #FFFFFF;
}
.cpgf__detail-value a { color: inherit; text-decoration: none; }
.cpgf__detail-value a:hover { text-decoration: underline; text-underline-offset: .2em; }

.cpgf__contact { display: grid; gap: clamp(1.25rem, 3vw, 2rem); align-content: start; justify-items: start; }

/* Round icon buttons, after the second reference: a hairline circle with the
   mark inside, filling on hover. */
.cpgf__socials { display: flex; flex-wrap: wrap; gap: .5rem; }
.cpgf__social {
    display: grid;
    place-items: center;
    width: 2.625rem;
    height: 2.625rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    color: #FFFFFF;
    transition: background-color .35s linear, color .35s linear, border-color .35s linear;
}
.cpgf__social svg { width: 1.1875rem; height: 1.1875rem; fill: currentColor; }
.cpgf__social:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--cpg-panel-fixed, #16181b); }
/* An account with no address published yet: the mark holds its place in the
   row and does nothing, rather than pointing somewhere it should not. */
.cpgf__social.is-quiet { border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .38); cursor: default; }
.cpgf__social.is-quiet:hover { background: none; border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .38); }

.cpgf__email { margin: 0; }
.cpgf__email a {
    color: rgba(255, 255, 255, .5);
    font-size: .9375rem;
    text-decoration: none;
    transition: color .35s linear;
}
.cpgf__email a:hover { color: #FFFFFF; }

/* --- band 3 — legal, crosslink, navigation -------------------------------- */
.cpgf__base {
    display: grid;
    gap: 1.25rem;
    margin-block-start: clamp(2rem, 4vw, 3.25rem);
    padding-block-start: clamp(1.25rem, 2.5vw, 2rem);
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.cpgf__legal { display: grid; gap: .2rem; }
.cpgf__legal-line {
    margin: 0;
    font-size: .875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .5);
}
.cpgf__legal-name {
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .01em;
    color: #FFFFFF;
}

.cpgf__crosslink { display: flex; }
.cpgf__crosslink .cpg-crosslink {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .875rem;
    border: 1px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .75);
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .35s linear, border-color .35s linear;
}
.cpgf__crosslink .cpg-crosslink:hover { border-color: #FFFFFF; color: #FFFFFF; }

.cpgf__links { display: flex; flex-wrap: wrap; gap: .75rem 2.25rem; }
.cpgf__links a {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #FFFFFF;
    text-decoration: none;
    transition: opacity .35s linear;
}
.cpgf__links a:hover { opacity: .65; }

.cpgf a:focus-visible {
    outline: var(--cpg-focus-width) solid var(--cpg-focus-ring-on-ink, #FFFFFF);
    outline-offset: 3px;
}

@media (min-width: 48rem) {
    .cpgf__top { grid-template-columns: minmax(0, 1fr) auto; }
    .cpgf__cta { justify-self: end; }
}

@media (min-width: 64rem) {
    /* Address and number on the left, then the divider, then the accounts —
       the reference's proportions. The divider is the column border, so it
       disappears with the column on narrow screens. */
    .cpgf__row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
    .cpgf__details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cpgf__contact {
        padding-inline-start: clamp(2.5rem, 6vw, 6.75rem);
        border-left: 1px solid rgba(255, 255, 255, .14);
        align-self: stretch;
        align-content: center;
        /* The accounts sit on the band's right edge, opposite the details. */
        justify-items: end;
    }
    .cpgf__contact .cpgf__socials { justify-content: flex-end; }
    /* Nothing published on the left: the accounts then take the whole band
       rather than leaving the reference's left half empty. */
    .cpgf__row--solo { grid-template-columns: minmax(0, 1fr); }
    .cpgf__row--solo .cpgf__contact { padding-inline-start: 0; border-left: 0; }

    .cpgf__base { grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 1.5rem 2rem; }
    .cpgf__links { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
    .cpgf__social,
    .cpgf__email a,
    .cpgf__links a,
    .cpgf__crosslink .cpg-crosslink { transition: none; }
}

/* --------------------------------------------------------------------------
   Phones — the base row is driven by a thumb, so its links and the crosslink
   are given a 44px box to land in.
   -------------------------------------------------------------------------- */
@media (max-width: 47.999rem) {
    .cpgf__links { gap: .25rem 1.25rem; }
    .cpgf__links a { display: inline-flex; align-items: center; min-height: 2.75rem; }
    .cpgf__crosslink .cpg-crosslink { min-height: 2.75rem; }
    .cpgf__detail-value a,
    .cpgf__email a { display: inline-flex; align-items: center; min-height: 2.75rem; }
    .cpgf__social { width: 2.75rem; height: 2.75rem; }
}