/* Purple Frog Signs — canonical Sign types and materials page. */

/* Dedicated Materials introduction. The media column is substantial on wide
   screens, then follows the copy in normal DOM order on tablet and mobile. */
.page--materials .materials-hero {
    position: relative;
    padding: clamp(3.5rem, 7vw, 6.6rem) 0 clamp(4rem, 7vw, 6.4rem);
    overflow: hidden;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-warm-white);
}

.page--materials .materials-hero::before {
    position: absolute;
    top: 0;
    left: max(var(--gutter), calc((100vw - 76rem) / 2));
    width: 5.5rem;
    height: .25rem;
    background: var(--color-accent);
    content: "";
}

.page--materials .materials-hero__grid {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem);
}

.page--materials .materials-hero--with-visual .materials-hero__grid {
    grid-template-columns: minmax(0, .56fr) minmax(20rem, .44fr);
}

.page--materials .materials-hero--without-visual .materials-hero__grid {
    grid-template-columns: minmax(0, 1fr);
}

.page--materials .materials-hero__copy {
    min-width: 0;
}

.page--materials .materials-hero__copy h1 {
    max-width: 50rem;
    margin-bottom: .45em;
    font-size: clamp(3rem, 5.15vw, 5.25rem);
    line-height: .99;
}

.page--materials .materials-hero__copy > p {
    max-width: 46rem;
    color: var(--color-text-muted);
    font-size: clamp(1.08rem, 1.45vw, 1.28rem);
    line-height: 1.62;
}

.page--materials .materials-hero__media {
    position: relative;
    min-width: 0;
    margin: 0;
}

.page--materials .materials-hero__media picture,
.page--materials .materials-hero__media img {
    display: block;
    width: 100%;
}

.page--materials .materials-hero__media img {
    aspect-ratio: 4 / 3;
    border-radius: .25rem;
    box-shadow: 0 24px 65px rgba(39, 19, 48, .18);
    object-fit: cover;
}

.page--materials .materials-hero__media > .proofing-placeholder {
    width: 100%;
    min-height: 0;
    aspect-ratio: 4 / 3;
}

.page--materials .materials-hero__media figcaption {
    margin-top: .75rem;
    color: var(--color-text-muted);
    font-size: .78rem;
}

.page--materials .materials-hero--without-visual .materials-hero__copy {
    max-width: 50rem;
}

.page--materials .materials-hero--without-visual .materials-hero__media {
    display: none;
}

.page--materials .materials-index__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The Materials contents index is a prominent, full-width anchor bar. */
.page--materials .materials-index {
    border-top: 1px solid rgba(255, 255, 255, .24);
    border-bottom: 1px solid rgba(255, 255, 255, .24);
    background: #A3165E;
}

.page--materials .materials-index a {
    min-height: 7rem;
    border-right-color: rgba(255, 255, 255, .28);
    color: #fff;
}

.page--materials .materials-index a:first-child {
    border-left-color: rgba(255, 255, 255, .28);
}

.page--materials .materials-index a:hover,
.page--materials .materials-index a:focus-visible {
    background: #7D1448;
    color: #fff;
}

.page--materials .materials-index a:focus-visible {
    position: relative;
    z-index: 1;
    outline: 0;
    box-shadow: inset 0 0 0 3px #fff;
}

.page--materials .materials-index span {
    color: rgba(255, 255, 255, .86);
}

/* This dark treatment is deliberately scoped to the Materials-page instance;
   shared Format Guide cards and their code-native diagrams remain unchanged. */
.page--materials #sign-types .format-visuals {
    border-top-color: rgba(255, 255, 255, .18);
    background-color: var(--gradient-deep-aubergine-solid, #271330);
    background-image: var(--gradient-deep-aubergine, linear-gradient(135deg, #16091F 0%, #271330 52%, #4A123A 100%));
    color: #fff;
}

.page--materials #sign-types .format-visuals__heading h2 {
    color: #fff;
}

.page--materials #sign-types .format-visuals__heading > p,
.page--materials #sign-types .format-visuals__note {
    color: rgba(255, 255, 255, .84);
}

.page--materials #sign-types .format-visuals .eyebrow {
    color: #F08ABB;
}

.page--materials #sign-types .format-visuals .eyebrow::before {
    background: #F08ABB;
}

/* Materials closes in flat brand magenta; the shared Products instance keeps
   its approved aubergine treatment because every rule is modifier-scoped. */
.page--materials .product-bespoke--materials {
    background: #A3165E;
    color: #fff;
}

.page--materials .product-bespoke--materials .product-bespoke__copy h2,
.page--materials .product-bespoke--materials .product-bespoke__copy .eyebrow {
    color: #fff;
}

.page--materials .product-bespoke--materials .product-bespoke__copy .eyebrow::before {
    background: #fff;
}

.page--materials .product-bespoke--materials .product-bespoke__copy p {
    color: rgba(255, 255, 255, .9);
}

.page--materials .product-bespoke--materials .button--light {
    border-color: #fff;
    background: #fff;
    color: #271330;
}

.page--materials .product-bespoke--materials .button--light:hover,
.page--materials .product-bespoke--materials .button--light:focus-visible {
    border-color: #FBFAF7;
    background: #FBFAF7;
    color: #7D1448;
}

.page--materials .product-bespoke--materials .button--outline-light {
    border-color: rgba(255, 255, 255, .86);
    background: #7D1448;
    color: #fff;
}

.page--materials .product-bespoke--materials .button--outline-light:hover,
.page--materials .product-bespoke--materials .button--outline-light:focus-visible {
    border-color: #fff;
    background: #271330;
    color: #fff;
}

.page--materials .product-bespoke--materials a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
    box-shadow: 0 0 0 2px #271330;
}

.page--materials .materials-guide-anchor {
    scroll-margin-top: 7rem;
}

.page--materials .material-card__applications {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(39, 19, 48, .11);
    font-size: .76rem;
}

/* Owner-assigned CMS images retain the same robust, editorial treatment as
   the established shared guides: full-width 4:3 crops, readable captions and
   an adjacent disclosure where the record is marked as illustrative. */
.page--materials .format-card__inner {
    display: flex;
    height: 100%;
    flex-direction: column;
}

.page--materials .format-card--with-image .format-card__media picture,
.page--materials .format-card--with-image .format-card__media img,
.page--materials .material-card__media picture,
.page--materials .material-card__media img {
    display: block;
    width: 100%;
}

.page--materials .format-card--with-image .format-card__media img,
.page--materials .material-card__media img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.page--materials .format-card__media figcaption,
.page--materials .material-card__media figcaption {
    padding: .65rem .75rem;
    border-top: 1px solid rgba(39, 19, 48, .1);
    background: #FBFAF7;
    color: #1E1D22;
    font-size: .72rem;
    line-height: 1.45;
}

.page--materials .format-card > .image-disclosure,
.page--materials .material-card__media > .image-disclosure {
    margin: 0 1.2rem 1.2rem;
}

/* Preserve the established code-native diagrams for records added after the
   original shared format/material stylesheet was created. */
.page--materials .format-card--folded-sign-tray .format-card__diagram i:nth-child(1) {
    top: 20%;
    left: 16%;
    width: 65%;
    height: 58%;
    border: .18rem solid #271330;
    background: #fff;
    box-shadow: inset 0 .45rem #A3165E, 0 12px 22px rgba(39, 19, 48, .14);
}

.page--materials .format-card--folded-sign-tray .format-card__diagram i:nth-child(2) {
    top: 25%;
    left: 81%;
    width: 8%;
    height: 58%;
    background: #8E8390;
    transform: skewY(38deg);
    transform-origin: top left;
}

.page--materials .format-card--folded-sign-tray .format-card__diagram i:nth-child(3) {
    top: 78%;
    left: 21%;
    width: 67%;
    height: 8%;
    background: #B5AFB5;
    transform: skewX(42deg);
    transform-origin: top left;
}

.page--materials .format-card--folded-sign-tray .format-card__diagram i:nth-child(4) {
    top: 42%;
    left: 28%;
    width: 40%;
    height: 4%;
    background: #271330;
    box-shadow: 0 .65rem 0 rgba(39, 19, 48, .25);
}

.page--materials .format-card--lightbox .format-card__diagram {
    background: linear-gradient(145deg, #271330, #4A2147);
}

.page--materials .format-card--lightbox .format-card__diagram i:nth-child(1) {
    top: 20%;
    right: 16%;
    bottom: 20%;
    left: 16%;
    border: .45rem solid #271330;
    background: #fff;
    box-shadow: inset 0 0 2.5rem rgba(163, 22, 94, .24), 0 0 1.8rem rgba(255, 255, 255, .35);
}

.page--materials .format-card--lightbox .format-card__diagram i:nth-child(2) {
    top: 39%;
    left: 29%;
    width: 42%;
    height: .28rem;
    background: #A3165E;
    box-shadow: 0 .75rem #271330;
}

.page--materials .format-card--lightbox .format-card__diagram i:nth-child(3),
.page--materials .format-card--lightbox .format-card__diagram i:nth-child(4) {
    bottom: 14%;
    width: 15%;
    height: .22rem;
    background: rgba(255, 255, 255, .55);
}

.page--materials .format-card--lightbox .format-card__diagram i:nth-child(3) { left: 24%; }
.page--materials .format-card--lightbox .format-card__diagram i:nth-child(4) { right: 24%; }

.page--materials .format-card--freestanding-display .format-card__diagram i:nth-child(1) {
    top: 13%;
    right: 27%;
    bottom: 20%;
    left: 27%;
    border: .25rem solid #271330;
    border-top: .5rem solid #A3165E;
    background: linear-gradient(150deg, #fff 0 58%, #EEEAE6 59%);
    box-shadow: 0 1rem 2rem rgba(39, 19, 48, .15);
}

.page--materials .format-card--freestanding-display .format-card__diagram i:nth-child(2) {
    right: 21%;
    bottom: 15%;
    left: 21%;
    height: 7%;
    border-radius: 50%;
    background: #271330;
}

.page--materials .format-card--freestanding-display .format-card__diagram i:nth-child(3),
.page--materials .format-card--freestanding-display .format-card__diagram i:nth-child(4) {
    bottom: 11%;
    width: 24%;
    height: .2rem;
    background: #271330;
}

.page--materials .format-card--freestanding-display .format-card__diagram i:nth-child(3) { left: 22%; transform: rotate(-7deg); }
.page--materials .format-card--freestanding-display .format-card__diagram i:nth-child(4) { right: 22%; transform: rotate(7deg); }

.page--materials .material-card--banner-pvc .material-card__diagram {
    background: linear-gradient(145deg, #FBFAF7, #DED8D4);
}

.page--materials .material-card--banner-pvc .material-card__diagram span {
    top: 18%;
    left: 23%;
    width: 54%;
    height: 62%;
    border: 1px solid rgba(39, 19, 48, .25);
    background: linear-gradient(145deg, #fff 0 56%, rgba(163, 22, 94, .3) 57%);
    box-shadow: 0 18px 30px rgba(39, 19, 48, .16);
}

.page--materials .material-card--banner-pvc .material-card__diagram span:nth-child(2) {
    left: 20%;
    width: .42rem;
    border: 0;
    background: #271330;
}

.page--materials .material-card--banner-pvc .material-card__diagram span:nth-child(3) {
    right: 20%;
    left: auto;
    width: .42rem;
    border: 0;
    background: #271330;
}

.page--materials .material-card--mesh .material-card__diagram {
    background-color: #A3165E;
    background-image: radial-gradient(rgba(255, 255, 255, .72) 1px, transparent 1.5px);
    background-size: 9px 9px;
}

.page--materials .material-card--mesh .material-card__diagram span {
    top: 17%;
    left: 24%;
    width: 52%;
    height: 65%;
    border: 1px solid rgba(255, 255, 255, .7);
    background: repeating-linear-gradient(135deg, rgba(39, 19, 48, .18) 0 2px, transparent 2px 8px);
    box-shadow: 0 18px 30px rgba(39, 19, 48, .3);
}

.page--materials .material-card--mesh .material-card__diagram span:nth-child(2) {
    left: 22%;
    width: .5rem;
    border: 0;
    background: #FBFAF7;
}

.page--materials .material-card--mesh .material-card__diagram span:nth-child(3) {
    right: 22%;
    left: auto;
    width: .5rem;
    border: 0;
    background: #FBFAF7;
}

.page--materials .material-card--paper-display-media .material-card__diagram span {
    top: 18%;
    left: 22%;
    width: 56%;
    height: 62%;
    border: 1px solid rgba(39, 19, 48, .13);
    background: #fff;
    transform: rotate(-8deg);
}

.page--materials .material-card--paper-display-media .material-card__diagram span:nth-child(2) {
    left: 26%;
    background: #EEEAE6;
    transform: rotate(0);
}

.page--materials .material-card--paper-display-media .material-card__diagram span:nth-child(3) {
    left: 30%;
    border-top: .45rem solid #A3165E;
    background: linear-gradient(#fff 0 35%, #ECE8E4 35% 38%, #fff 38% 53%, #ECE8E4 53% 56%, #fff 56%);
    transform: rotate(7deg);
}

@media (max-width: 56rem) {
    .page--materials .materials-hero--with-visual .materials-hero__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .page--materials .materials-hero__copy {
        order: 1;
    }

    .page--materials .materials-hero__media {
        width: 100%;
        order: 2;
    }

}

@media (max-width: 40rem) {
    .page--materials .materials-hero {
        padding: 3rem 0 4rem;
    }

    .page--materials .materials-hero__grid {
        gap: 2rem;
    }

    .page--materials .materials-hero__copy h1 {
        font-size: clamp(2.7rem, 11vw, 4rem);
    }

    .page--materials .materials-index {
        overflow: visible;
    }

    .page--materials .materials-index__grid {
        width: auto;
        grid-template-columns: 1fr;
    }

    .page--materials .materials-index a {
        min-height: 4.5rem;
        border-left: 1px solid rgba(255, 255, 255, .28);
    }

    .page--materials .materials-index a:first-child {
        border-bottom: 1px solid rgba(255, 255, 255, .28);
    }

    .page--materials .product-bespoke--materials .button-row {
        align-items: stretch;
        flex-direction: column;
    }

    .page--materials .product-bespoke--materials .button {
        width: 100%;
        min-height: 3.25rem;
    }
}