/* Madboys Version 17 — refreshed horizontal backgrounds, compact Home cards
   and legible ribbon punctuation. */

:root {
  --v17-ribbon-red: #e42720;
}

/* Ribbon phrases are separate flex items in the desktop composition. A real
   gap prevents their separators from visually sticking to either phrase. */
body.madboys-site.site-final.site-production .screen:not(.home) .ribbon {
  color: var(--v17-ribbon-red) !important;
  column-gap: .34em !important;
  word-spacing: normal !important;
}

body.madboys-site.site-final.site-production .screen:not(.home) .ribbon :is(
  .hl-blue,
  .blueword,
  .hl-red,
  .dotword
) {
  color: var(--v17-ribbon-red) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.78), 0 0 12px rgba(228,39,32,.32) !important;
}

/* Missions intentionally keeps its three-colour grammar. Its final phrase is
   the reference red used by every two-part ribbon. */
body.madboys-site.site-final.site-production section.missions .ribbon .hl-blue {
  color: #5065ff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.76), 0 0 12px rgba(80,101,255,.3) !important;
}

body.madboys-site.site-final.site-production section.missions .ribbon .hl-red {
  color: var(--v17-ribbon-red) !important;
}

@media (min-width: 900px) and (min-aspect-ratio: 1.001/1) {
  /* The supplied 1920×1080 set is used by every horizontal desktop tier,
     including compact desktop. Portrait/mobile artwork remains untouched. */
  body.site-final.site-production section.home :is(.canvas, .spread-art) {
    background-image: url('/assets/madboys.screen.01.home/background-desktop.webp') !important;
  }

  body.site-final.site-production section.missions :is(.canvas, .spread-art) {
    background-image: url('/assets/madboys.screen.02.missions/background-desktop.webp') !important;
  }

  body.site-final.site-production section.builds :is(.canvas, .spread-art) {
    background-image: url('/assets/madboys.screen.03.builds/background-desktop.webp') !important;
  }

  body.site-final.site-production section.council :is(.canvas, .spread-art) {
    background-image: url('/assets/madboys.screen.04.council/background-desktop.webp') !important;
  }

  body.site-final.site-production section.stories :is(.canvas, .spread-art) {
    background-image: url('/assets/madboys.screen.05.stories/background-desktop.webp') !important;
  }

  body.site-final.site-production section.expansion :is(.canvas, .spread-art) {
    background-image: url('/assets/madboys.screen.06.expansion/background-desktop.webp') !important;
  }

  body.site-final.site-production section.blood :is(.canvas, .spread-art) {
    background-image: url('/assets/madboys.screen.07.blood/background-desktop.webp') !important;
  }

  body.site-final.site-production section.rewards :is(.canvas, .spread-art) {
    background-image: url('/assets/madboys.screen.08.rewards/background-desktop.webp') !important;
  }

  body.site-final.site-production .screen :is(.canvas, .spread-art) {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
  }
}

/* Compact desktop Home cards follow the successful Expansion-card treatment:
   art is cropped by the outer card itself and touches its top/bottom frame.
   The arrow leaves the text grid and becomes a corner action. */
@media (min-width: 1180px) and (min-aspect-ratio: 6/5) and (max-width: 1499px),
       (min-width: 1180px) and (min-aspect-ratio: 6/5) and (max-height: 849px) {
  body.madboys-site.site-final.site-production section.home .home-cards .feature-card {
    position: relative !important;
    grid-template-columns: clamp(148px, 12vw, 190px) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas: "icon title" "icon text" !important;
    column-gap: clamp(14px, 1.15vw, 20px) !important;
    padding: 0 56px 0 0 !important;
    overflow: hidden !important;
  }

  body.madboys-site.site-final.site-production section.home .home-cards .feature-card img {
    grid-area: icon !important;
    align-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
    border-radius: 18px 10px 10px 18px !important;
    object-fit: cover !important;
  }

  body.madboys-site.site-final.site-production section.home .home-cards .feature-card h3 {
    grid-area: title !important;
    align-self: end !important;
    margin: 0 0 5px !important;
    padding-top: 16px !important;
    text-align: left !important;
  }

  body.madboys-site.site-final.site-production section.home .home-cards .feature-card p {
    grid-area: text !important;
    align-self: start !important;
    margin: 0 !important;
    padding-bottom: 16px !important;
    text-align: left !important;
  }

  body.madboys-site.site-final.site-production section.home .home-cards .feature-card::after {
    grid-area: auto !important;
    position: absolute !important;
    top: 11px !important;
    right: 11px !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    align-self: auto !important;
    justify-self: auto !important;
    z-index: 3 !important;
  }
}