/* CHANAWAY5000 | Wendy's x X Games case study */
.xg-case{--xg-blue:#0866f5;color:#111;background:#fff;font-family:Barlow,Arial,sans-serif}
.xg-case *{box-sizing:border-box}
.xg-wrap{width:min(1200px,calc(100% - 48px));margin-inline:auto}
.xg-blue{color:var(--xg-blue)}
.xg-label,.xg-eyebrow{font:700 .78rem/1.4 Barlow,Arial,sans-serif;letter-spacing:.13em;text-transform:uppercase}
.xg-label{color:var(--xg-blue);margin:0 0 22px}
.xg-case h1,.xg-case h2,.xg-case h3{font-family:aBlackLives,Impact,'Arial Black',sans-serif;letter-spacing:-.035em;font-weight:900;text-transform:uppercase;margin:0}
.xg-case h2{font-size:clamp(2.3rem,5vw,5.3rem);line-height:1.04}
.xg-case h2 em{font-style:normal;color:var(--xg-blue)}
.xg-case p{line-height:1.6}

/* Hero */
.xg-hero{min-height:clamp(580px,66vw,780px);position:relative;display:flex;align-items:center;overflow:hidden}
.xg-hero__image{position:absolute;inset:0;background-image:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.98) 23%,rgba(255,255,255,.79) 43%,rgba(255,255,255,.08) 77%),url('../images/xgames/hero-ruben.webp');background-size:cover;background-position:center 53%;transform:none}
.xg-hero__content{position:relative;z-index:1;padding-block:110px}
.xg-hero h1{font-size:clamp(4rem,9vw,9rem);line-height:.93;max-width:740px}
.xg-hero__dek{font-size:clamp(1.1rem,1.65vw,1.5rem);max-width:540px;margin:30px 0 0}
.xg-eyebrow{margin-bottom:24px}

/* Project facts */
.xg-facts{background:#101010;color:#fff}
.xg-facts__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-block:35px}
.xg-facts__grid div{display:flex;flex-direction:column;gap:6px}
.xg-facts strong{font-size:clamp(2.7rem,5vw,5rem);font-weight:900;line-height:1}
.xg-facts span{font-size:.86rem;text-transform:uppercase;letter-spacing:.07em}

/* Editorial sections */
.xg-section,.xg-impact{padding-block:clamp(85px,11vw,160px)}
.xg-split{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(28px,6vw,95px)}
.xg-split>div>p{font-size:clamp(1.08rem,1.5vw,1.34rem);max-width:710px;margin:25px 0 0}
.xg-statement{background:#f2f2f2;padding-block:clamp(85px,11vw,150px)}
.xg-statement h2{font-size:clamp(3.5rem,8vw,8.5rem);max-width:1050px}
.xg-statement__aside{font-size:clamp(1.2rem,2vw,1.65rem);max-width:560px;margin:40px 0 0 auto}

/* Challenge with campaign decks */
.xg-challenge-layout{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(250px,.9fr);gap:clamp(20px,3vw,46px);align-items:center}
.xg-challenge-layout>div:nth-child(2)>p{max-width:560px;font-size:clamp(1.05rem,1.45vw,1.3rem);margin-top:22px}
.xg-challenge-layout h2{font-size:clamp(2.6rem,4.5vw,5.1rem)}
.xg-decks{display:grid;grid-template-columns:1fr 1fr;gap:8px;height:430px;min-width:0}
.xg-decks img{width:100%;height:100%;object-fit:cover;min-width:0}

/* Cultural fluency */
.xg-insight{display:grid;grid-template-columns:1.15fr 1fr;min-height:570px;background:#f2f2f2}
.xg-insight__photo{min-height:570px;overflow:hidden}
.xg-insight__photo img{width:100%;height:100%;object-fit:cover;display:block}
.xg-insight__copy{padding:clamp(60px,8vw,130px) clamp(28px,6vw,100px);align-self:center}
.xg-insight__copy h2{font-size:clamp(3rem,5.6vw,6.2rem)}
.xg-insight__copy>p:not(.xg-label){max-width:540px;font-size:clamp(1.1rem,1.4vw,1.3rem);margin-top:24px}

/* My role */
.xg-role{background:#101010;color:#fff;padding:0;display:grid;grid-template-columns:1fr 1fr;min-height:500px}
.xg-role .xg-label{color:#83b2ff}
.xg-role__copy{padding:clamp(65px,8vw,120px) 48px;display:flex;justify-content:flex-end}
.xg-role__inner{width:min(550px,100%)}
.xg-role__inner h2{font-size:clamp(2.8rem,4.5vw,5.3rem)}
.xg-role__inner>p:not(.xg-label){font-size:clamp(1.05rem,1.3vw,1.22rem);margin-top:25px;line-height:1.6}
.xg-role__photo{min-height:500px}
.xg-role__photo img{width:100%;height:100%;object-fit:cover;display:block}

/* Work / videos */
.xg-work h2{margin-bottom:55px}
.xg-video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.xg-video__trigger{border:0;padding:0;display:block;width:100%;position:relative;aspect-ratio:16/9;background:#111;cursor:pointer;overflow:hidden}
.xg-video__trigger img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.xg-video__trigger:hover img{transform:scale(1.03)}
.xg-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#111;font-size:25px;box-shadow:0 8px 30px #0005}
.xg-video__meta{padding-top:18px}
.xg-video__meta p{font-size:.76rem;letter-spacing:.13em;color:var(--xg-blue);font-weight:800;margin:0 0 5px}
.xg-video__meta h3{font-size:clamp(1.6rem,2.5vw,2.6rem)}
.xg-video__meta a{display:inline-block;margin-top:12px;color:inherit;text-underline-offset:4px}

/* Impact */
.xg-impact{background:#f4f4f4}

/* Video modal */
.xg-modal[hidden]{display:none}
.xg-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px}
.xg-modal__scrim{position:absolute;inset:0;background:#000e}
.xg-modal__panel{position:relative;width:min(980px,100%);background:#111;padding:48px 16px 16px}
.xg-modal__frame{aspect-ratio:16/9}
.xg-modal__frame iframe{width:100%;height:100%;border:0}
.xg-modal__close{position:absolute;right:14px;top:5px;background:none;border:0;color:#fff;font-size:34px;cursor:pointer}
.xg-modal__panel>a{display:inline-block;margin-top:12px;color:#fff;font:600 14px Barlow,Arial,sans-serif}
.xg-video__trigger:focus-visible,.xg-modal__close:focus-visible{outline:3px solid var(--xg-blue);outline-offset:3px}

/* Tablet */
@media(max-width:1050px){
  .xg-challenge-layout{grid-template-columns:120px 1fr}
  .xg-decks{grid-column:2;height:360px}
  .xg-insight__copy{padding:60px 35px}
}

/* Mobile */
@media(max-width:760px){
  .xg-wrap{width:calc(100% - 36px)}
  .xg-hero{min-height:600px;align-items:flex-end}
  .xg-hero__image{background-image:linear-gradient(0deg,#fff 0%,rgba(255,255,255,.94) 27%,rgba(255,255,255,.3) 72%),url('../images/xgames/hero-ruben.webp');background-position:40% center;transform:none}
  .xg-hero__content{padding-block:100px 55px}
  .xg-hero h1{font-size:clamp(3.6rem,12vw,6rem)}
  .xg-facts__grid{grid-template-columns:repeat(2,1fr);gap:30px 18px}
  .xg-split{grid-template-columns:1fr;gap:12px}
  .xg-video-grid{grid-template-columns:1fr}
  .xg-statement__aside{margin-left:0}
  .xg-section,.xg-impact{padding-block:75px}
  .xg-challenge-layout{grid-template-columns:1fr}
  .xg-decks{grid-column:auto;height:330px}
  .xg-insight,.xg-role{grid-template-columns:1fr}
  .xg-insight__photo{min-height:310px;height:340px}
  .xg-insight__copy{padding:65px 22px}
  .xg-role__copy{padding:70px 22px}
  .xg-role__photo{height:350px;min-height:350px}
}

/* X GAMES | BODY TYPOGRAPHY REFINEMENT */

.xg-case .xg-split > div > p,
.xg-case .xg-challenge-layout > div:nth-child(2) > p,
.xg-case .xg-insight__copy > p:not(.xg-label),
.xg-case .xg-role__inner > p:not(.xg-label) {
    font-family: Barlow, Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0;
    margin: 0 0 18px;
    max-width: 620px;
}

/* Maintain separation between headlines and copy */

.xg-case .xg-split h2 + p,
.xg-case .xg-challenge-layout h2 + p,
.xg-case .xg-insight__copy h2 + p,
.xg-case .xg-role__inner h2 + p {
    margin-top: 26px;
}

/* Consistent paragraph rhythm */

.xg-case .xg-split > div > p:last-child,
.xg-case .xg-challenge-layout > div:nth-child(2) > p:last-child,
.xg-case .xg-insight__copy > p:last-child,
.xg-case .xg-role__inner > p:last-child {
    margin-bottom: 0;
}

/* Mobile typography */

@media (max-width: 760px) {
    .xg-case .xg-split > div > p,
    .xg-case .xg-challenge-layout > div:nth-child(2) > p,
    .xg-case .xg-insight__copy > p:not(.xg-label),
    .xg-case .xg-role__inner > p:not(.xg-label) {
        font-size: 1rem;
        line-height: 1.65;
        margin-bottom: 16px;
    }
}