/* Shoppable Program CTA (Global Component). It starts as an exact copy of the
   Program CTA: the shared .featured-section / .featured-card presentation in
   compatibility.css, plus the Program CTA's own rules repeated here under the
   Shoppable class names, so its layout can change without touching the
   Program CTA. Loaded on Blog Post and News Article. */

/* compatibility.css: Inter for the component. */
.playerscout-shoppable-program-cta,
.playerscout-shoppable-program-cta * {
  font-family: var(--ps-font-heading) !important;
}
/* Square corners on the image and the black panel. */
.playerscout-shoppable-program-cta .featured-card { border-radius:0; }
/* Black panel with light copy: the card's own #070907, white headline and
   #b0b0b0 description (compatibility.css .featured-card). */
.playerscout-shoppable-program-cta .featured-card > div > span { color:var(--ps-color-purple-bright, #8a49f5); }
/* The eyebrow takes the image pill's colour (chosen per version in Global
   Components); the dark pill's #181818 would vanish on black, so it is white. */
.playerscout-shoppable-program-cta .featured-card > div > .playerscout-shoppable-program-cta__eyebrow--orange { color:#f08418; }
.playerscout-shoppable-program-cta .featured-card > div > .playerscout-shoppable-program-cta__eyebrow--yellow { color:#d8a824; }
.playerscout-shoppable-program-cta .featured-card > div > .playerscout-shoppable-program-cta__eyebrow--dark { color:#fff; }
/* Rollover: the image darkens and zooms inside its own frame (the figure
   clips it), so the frame never moves or grows. */
.playerscout-shoppable-program-cta .playerscout-shoppable-program-cta__media:hover img,
.playerscout-shoppable-program-cta .featured-card:focus-within .playerscout-shoppable-program-cta__media img { filter:brightness(.7); transform:scale(1.045); }

/* Image with its overlay: the image keeps the card's .featured-card>img
   geometry; the device icon, pill, title and shading match the cards on the
   PlayerScout programme store (program.playerscout.co.uk/store). */
.playerscout-shoppable-program-cta__media {
  position:relative;
  width:400px;
  flex:0 0 400px;
  margin:0;
  overflow:hidden;
}
/* Scoped twice to outrank the global img[width][height] { height:auto } rule. */
.playerscout-shoppable-program-cta .playerscout-shoppable-program-cta__media img {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:filter .4s ease,transform .4s ease;
}
/* The whole image links to the CTA destination. */
.playerscout-shoppable-program-cta .featured-card .playerscout-shoppable-program-cta__media-link,
.playerscout-shoppable-program-cta .featured-card .playerscout-shoppable-program-cta__media-link:hover {
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  min-height:0;
  padding:0;
  border-radius:0;
  background:none;
}
.playerscout-shoppable-program-cta__media::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,0) 30%, rgba(0,0,0,.14) 55%, rgba(0,0,0,.6) 100%);
  pointer-events:none;
}
.playerscout-shoppable-program-cta__overlay {
  position:absolute;
  right:32px;
  bottom:36px;
  left:32px;
  z-index:1;
  text-shadow:rgba(0,0,0,.35) 0 1px 14px;
  pointer-events:none;
  container-type:inline-size;
}
.playerscout-shoppable-program-cta__device {
  display:block;
  width:50px;
  height:auto;
  aspect-ratio:600 / 410;
  margin:0 0 14px;
  /* The theme's global margin-block reset (style.css) would remove this. */
  margin-bottom:14px !important;
  stroke:#fff;
  fill:none;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.playerscout-shoppable-program-cta .playerscout-shoppable-program-cta__pill {
  display:table;
  margin:0 0 10px;
  margin-bottom:10px !important;
  padding:7px 12px 6px;
  border-radius:999px;
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-shadow:none;
}
.playerscout-shoppable-program-cta .playerscout-shoppable-program-cta__pill--purple { background:var(--ps-color-purple-bright, #8a49f5); }
.playerscout-shoppable-program-cta .playerscout-shoppable-program-cta__pill--orange { background:#f08418; }
.playerscout-shoppable-program-cta .playerscout-shoppable-program-cta__pill--yellow { background:#d8a824; color:#111; }
.playerscout-shoppable-program-cta .playerscout-shoppable-program-cta__pill--dark { background:#181818; }
.playerscout-shoppable-program-cta .playerscout-shoppable-program-cta__title {
  display:-webkit-box;
  margin:0;
  overflow:hidden;
  color:#fff;
  /* The store's 42px title, reduced only as far as the image needs so the
     longest line (its length is set on the element) stays on one line. */
  font-size:30px;
  font-size:min(42px, calc(100cqw / (var(--ps-title-chars, 16) * .68)));
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.04em;
  text-transform:uppercase;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

/* Programme details and Learn More, in place of the button: the icons, labels,
   dividers and arrow link from the programme store cards, in white and grey on the black panel. */
.playerscout-shoppable-program-cta .playerscout-shoppable-program-cta__details {
  display:flex;
  flex-direction:column;
  gap:16px;
  width:100%;
  container-type:inline-size;
}
.playerscout-shoppable-program-cta .playerscout-shoppable-program-cta__divider {
  width:100%;
  height:0;
  margin:0;
  border:0;
  border-top:1px solid var(--wp--preset--color--grey-900, #565656);
  background:none;
}
.playerscout-shoppable-program-cta .playerscout-shoppable-program-cta__meta {
  display:grid;
  grid-template-columns:repeat(4, auto);
  justify-content:space-between;
  width:100%;
  margin:0;
  padding:0;
  list-style:none;
}
.playerscout-shoppable-program-cta .playerscout-shoppable-program-cta__meta-item {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  min-width:0;
  margin:0;
  padding:0 0 0 clamp(14px, 1.8vw, 32px);
  border-left:1px solid var(--wp--preset--color--grey-900, #565656);
}
.playerscout-shoppable-program-cta .playerscout-shoppable-program-cta__meta-item:first-child { padding-left:0; border-left:0; }
.playerscout-shoppable-program-cta .playerscout-shoppable-program-cta__meta-item svg {
  width:25px;
  height:25px;
  overflow:visible;
  fill:none;
  stroke:#fff;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.playerscout-shoppable-program-cta .playerscout-shoppable-program-cta__meta-label {
  color:var(--wp--preset--color--muted-grey, #9a9a9a);
  font-size:10px;
  font-weight:800;
  line-height:1.3;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
}
.playerscout-shoppable-program-cta .featured-card .playerscout-shoppable-program-cta__learn {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:0;
  padding:7px 0;
  border:0;
  border-radius:0;
  background:none;
  color:#fff;
  font-size:18px;
  font-weight:700;
  line-height:normal;
  text-decoration:none;
  transition:gap .2s, color .2s;
}
.playerscout-shoppable-program-cta .featured-card .playerscout-shoppable-program-cta__learn:hover,
.playerscout-shoppable-program-cta .featured-card .playerscout-shoppable-program-cta__learn:focus-visible {
  gap:18px;
  background:none;
  color:var(--ps-color-purple-bright, #8a49f5);
}
/* Learn More's hover colour follows the image pill, like the eyebrow; on the
   dark pill it stays white (#181818 would vanish on black). */
.playerscout-shoppable-program-cta .featured-card .playerscout-shoppable-program-cta__learn--orange:hover,
.playerscout-shoppable-program-cta .featured-card .playerscout-shoppable-program-cta__learn--orange:focus-visible { color:#f08418; }
.playerscout-shoppable-program-cta .featured-card .playerscout-shoppable-program-cta__learn--yellow:hover,
.playerscout-shoppable-program-cta .featured-card .playerscout-shoppable-program-cta__learn--yellow:focus-visible { color:#d8a824; }
.playerscout-shoppable-program-cta .featured-card .playerscout-shoppable-program-cta__learn--dark:hover,
.playerscout-shoppable-program-cta .featured-card .playerscout-shoppable-program-cta__learn--dark:focus-visible { color:#fff; }
.playerscout-shoppable-program-cta .featured-card .playerscout-shoppable-program-cta__learn:focus-visible { outline:3px solid var(--ps-color-purple-bright, #8a49f5); outline-offset:3px; }
.playerscout-shoppable-program-cta .playerscout-shoppable-program-cta__learn svg {
  width:18px;
  height:18px;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:3.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* Two details per row, as on the programme store's narrow cards, whenever the
   four labels would not fit across (phones and the 1001-1080px squeeze). */
@container (max-width:419px) {
  .playerscout-shoppable-program-cta .playerscout-shoppable-program-cta__meta { grid-template-columns:1fr 1fr; justify-content:stretch; row-gap:18px; }
  .playerscout-shoppable-program-cta .playerscout-shoppable-program-cta__meta-item { padding-left:16px; }
  .playerscout-shoppable-program-cta .playerscout-shoppable-program-cta__meta-item:nth-child(odd) { padding-left:0; border-left:0; }
}
@media (prefers-reduced-motion:reduce) {
  .playerscout-shoppable-program-cta .playerscout-shoppable-program-cta__media img,
  .playerscout-shoppable-program-cta .featured-card .playerscout-shoppable-program-cta__learn { transition:none; }
}

@media (max-width:1000px) {
  .playerscout-shoppable-program-cta__media { width:100%; height:360px; flex-basis:auto; }
}
@media (max-width:767px) {
  /* The 16:10 phone image plus 50px: the spacer's padding follows the image width. */
  .playerscout-shoppable-program-cta__media { height:auto; aspect-ratio:auto; }
  .playerscout-shoppable-program-cta__media::before { content:""; display:block; padding-top:calc(62.5% + 50px); }
  .playerscout-shoppable-program-cta__overlay { right:24px; bottom:24px; left:24px; }
}

/* blog-post-dynamic.css: the Blog Post section geometry. */
.blog-post .playerscout-shoppable-program-cta {
  position: relative !important;
  inset: auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: flex !important;
  justify-content: center !important;
  padding: 20px 80px 40px !important;
  background: #fff !important;
}
@media (max-width: 1000px) {
  .blog-post .playerscout-shoppable-program-cta {
    padding-right: 40px !important;
    padding-left: 40px !important;
  }
}
@media (max-width: 767px) {
  .blog-post .playerscout-shoppable-program-cta {
    padding: 20px 16px 40px !important;
  }
}

/* News Article: its own section, spaced and styled like the Program CTA's
   (compatibility-news-article.css, compatibility.css and news-article.css). */
.news-article .playerscout-news-shoppable-program-cta-section {
  box-sizing:border-box;
  width:100%;
  padding-bottom:50px;
  background:#fff;
}
.news-article .playerscout-news-shoppable-program-cta-section > .playerscout-shoppable-program-cta {
  width:100%;
}
@media (min-width:825px) {
  .news-article .playerscout-news-shoppable-program-cta-section { margin-top:40px !important; }
}
.news-article .playerscout-news-shoppable-program-cta-section .featured-section { padding-bottom:0 !important; }
.news-article .playerscout-news-shoppable-program-cta-section .featured-card > div > span { font-weight:600 !important; line-height:normal !important; text-transform:uppercase !important; }
.news-article .playerscout-news-shoppable-program-cta-section .featured-card h2 { font-weight:900 !important; }
.news-article .playerscout-news-shoppable-program-cta-section .featured-card > div > p { font-family:"Source Sans 3",Arial,sans-serif !important; font-size:16px !important; line-height:26px !important; color:#b0b0b0 !important; }