/* For Consumer. Builds on the wellness page system in wellness.css (the body keeps .wellness-page and
   .wl-textured); these rules add the consumer art direction: everyday decisions, food, retail and
   connected-life imagery, and consumer line drawings in the expertise areas. */

/* Opener: dinner out, the bag, the weekend. Three windows instead of one portrait. */
.consumer-page .wl-hero-layout{grid-template-columns:1.3fr 1fr}
.consumer-page .wl-hero-type h1{font-size:clamp(44px,5.3vw,92px);text-wrap:wrap}
.consumer-page .wl-hero-type h1 em{white-space:normal;text-wrap:balance}
.wl-hero-mosaic{position:relative;width:100%;max-width:520px;aspect-ratio:520/620;justify-self:end}
.wl-mosaic-window{position:absolute;overflow:hidden;border-radius:4px;background:var(--merge-forest-green)}
.wl-mosaic-window img{width:100%;height:100%;object-fit:cover;display:block}
.wl-mosaic-main{left:0;top:8%;width:62%;height:84%;border-radius:4px 80px 4px 4px}
.wl-mosaic-main img{object-position:50% 50%}
.wl-mosaic-top{right:0;top:0;width:34%;height:42%;border-radius:4px 48px 4px 4px}
.wl-mosaic-top img{object-position:48% 30%}
.wl-mosaic-bottom{right:0;bottom:0;width:34%;height:54%;border-radius:4px 4px 48px 4px}
.wl-mosaic-bottom img{object-position:62% 50%}
.motion .wl-mosaic-window img{animation:wl-settle 1.8s var(--ease) both}
.motion .wl-mosaic-top img{animation-delay:.12s}
.motion .wl-mosaic-bottom img{animation-delay:.24s}
.consumer-page .wl-logo{height:24px}
.consumer-page .wl-logo-amex{height:30px}
.consumer-page .wl-logo-kroger{height:40px;aspect-ratio:128/80}
.consumer-page .wl-logo-kraft{height:22px;aspect-ratio:220/37}
.consumer-page .wl-logo-lg{height:36px;aspect-ratio:174/80}
.consumer-page .wl-logo-coach{height:32px}

/* What makes people choose: the marketer's words are struck through; the everyday decisions are the cards. */
.wl-lead-past{text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:var(--merge-viridian)}
.wl-meaning-dinner .wl-meaning-photo{border-radius:4px 90px 4px 4px}
.wl-meaning-deal .wl-meaning-photo{border-radius:60px 4px 4px 4px}
.wl-meaning-easier .wl-meaning-photo{border-radius:4px 4px 90px 4px}
.wl-meaning-dinner img{object-position:50% 50%}
.wl-meaning-phone img{object-position:55% 40%}
.wl-meaning-deal img{object-position:76% 40%}
.wl-meaning-easier img{object-position:42% 60%}
.consumer-page .wl-see-layer img{object-position:38% 40%}

/* The pinned passages use the whole text column; these paragraphs run longer than the wellness ones. */
.consumer-page .is-pinned .wl-see-text{grid-template-columns:minmax(0,1fr)}
.consumer-page .is-pinned .wl-see-text>p{max-width:560px}

/* Expertise: each area keeps its own colour and a consumer line drawing. */
#restaurants{--wl-art:url("media/consumer/line-art/restaurants.svg");--wl-panel-bg:var(--merge-mint)}
.wl-cause#restaurants{--wl-panel-accent:var(--merge-forest-green)}
#retail{--wl-art:url("media/consumer/line-art/retail.svg");--wl-panel-bg:var(--merge-pale-mint)}
#cpg{--wl-art:url("media/consumer/line-art/cpg.svg");--wl-panel-bg:var(--merge-dark-green);--wl-panel-ink:var(--merge-web);--wl-panel-accent:var(--merge-mint)}
#telecommunications{--wl-art:url("media/consumer/line-art/telecom.svg");--wl-panel-bg:var(--merge-warm-gray)}
#financial-services{--wl-art:url("media/consumer/line-art/financial.svg");--wl-panel-bg:var(--merge-forest-green);--wl-panel-ink:var(--merge-web);--wl-panel-accent:var(--merge-mint)}
/* "Telecommunications" is the longest word on the page; give the open title a little more room. */
@media(min-width:901px){.consumer-page .wl-causes.is-accordion .wl-cause.is-open{grid-template-columns:minmax(260px,.8fr) minmax(0,2fr)}}
@media(min-width:901px){.consumer-page .wl-causes.is-accordion #telecommunications.is-open .wl-cause-title{font-size:clamp(24px,2vw,31px)}}
@media(min-width:901px) and (max-width:1100px){.consumer-page .wl-causes.is-accordion .wl-cause.is-open .wl-cause-title{font-size:26px}}
/* The same landscape field as wellness, turned the other way. */
.consumer-page .wl-landscape::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20900%22%20preserveAspectRatio%3D%22xMidYMin%20slice%22%3E%3Cpath%20fill%3D%22%23133b34%22%20d%3D%22M1600%200H0V260C270%20110%20430%20130%20570%20275S920%20510%201160%20380S1430%20300%201600%20420Z%22%2F%3E%3Cpath%20fill%3D%22%2300856c%22%20d%3D%22M0%20345C210%20225%20320%20295%20470%20430S740%20630%20930%20605C570%20775%20250%20720%200%20595Z%22%2F%3E%3C%2Fsvg%3E")}

/* Work */
.wl-case-subway,.wl-case-kroger{grid-column:span 7}
.wl-case-tmobile,.wl-case-land{grid-column:span 5}
.wl-case-subway>a{border-radius:60px 4px 4px 4px}
.wl-case-kroger>a{border-radius:4px 4px 60px 4px}
.wl-case-subway .wl-case-image>img{object-position:50% 45%}
.wl-case-tmobile .wl-case-image>img{object-position:62% 40%}
.wl-case-land .wl-case-image>img{object-position:50% 30%}
.wl-case-kroger .wl-case-image>img{object-position:72% 40%}
.wl-case-brand .wl-case-logo-subway,.wl-case-brand .wl-case-logo-tmobile{height:19px}
.wl-case-brand .wl-case-logo-land{height:28px;aspect-ratio:161/46}
.wl-case-brand .wl-case-logo-kroger{height:34px;aspect-ratio:128/80}
.consumer-page .wl-close-moments{font-size:clamp(24px,3.7vw,62px)}

@media(max-width:900px){
 .consumer-page .wl-hero-layout{grid-template-columns:1fr}
 .consumer-page .wl-hero-type h1{font-size:clamp(44px,11vw,100px)}
 .wl-hero-mosaic{max-width:none;aspect-ratio:16/10}
 .wl-mosaic-main{top:0;width:60%;height:100%}
 .wl-mosaic-top{width:37%;height:47%}
 .wl-mosaic-bottom{width:37%;height:49%}
}
@media(max-width:640px){
 .consumer-page .wl-hero-type h1{font-size:clamp(36px,10.2vw,44px)}
 .wl-hero-mosaic{aspect-ratio:1}
 .wl-mosaic-main{border-radius:4px 64px 4px 4px}
 .wl-mosaic-top{border-radius:4px 40px 4px 4px}
 .wl-mosaic-bottom{border-radius:4px 4px 40px 4px}
 .consumer-page .wl-logo-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 12px}
 .consumer-page .wl-logo{height:19px;max-width:100%;object-fit:contain}
 .consumer-page .wl-logo-amex{height:24px}
 .consumer-page .wl-logo-kroger{height:32px}
 .consumer-page .wl-logo-kraft{height:17px}
 .consumer-page .wl-logo-lg{height:28px}
 .consumer-page .wl-logo-coach{height:25px}
 .consumer-page .wl-case-image{height:300px}
 .consumer-page .wl-case-image::after{background:linear-gradient(180deg,color-mix(in srgb,var(--merge-dark-green) 22%,transparent) 0%,transparent 22%,color-mix(in srgb,var(--merge-dark-green) 55%,transparent) 48%,color-mix(in srgb,var(--merge-dark-green) 92%,transparent) 100%)}
 .consumer-page .wl-close-moments{font-size:21px}
}