/* ==========================================================================
 * v1.09.60 — Spotlight responsive parity + clean semantic visuals
 * Canonical geometry mirrors the accepted SachYHoc recommendation component.
 * This block intentionally outranks legacy YHLS hero/mobile rules.
 * ========================================================================== */
#syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial{
  width:min(100%,545px)!important;max-width:545px!important;margin-inline:auto!important;padding:18px!important;
  border:1px solid rgba(190,212,229,.86)!important;border-radius:28px!important;background:rgba(255,255,255,.92)!important;
  box-shadow:0 30px 72px rgba(27,76,112,.16)!important;backdrop-filter:blur(18px)!important;overflow:visible!important;
}
#syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-topline{
  display:flex!important;align-items:center!important;justify-content:space-between!important;flex-direction:row!important;
  gap:16px!important;margin:0!important;padding:2px 2px 16px!important;
}
#syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-topline small{
  display:flex!important;align-items:center!important;gap:9px!important;margin:0!important;padding:0!important;
  color:#16324d!important;font-size:18px!important;font-weight:850!important;letter-spacing:0!important;line-height:1.2!important;
}
#syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-topline small>span{
  display:grid!important;place-items:center!important;width:36px!important;height:36px!important;flex:0 0 36px!important;
  border-radius:12px!important;background:linear-gradient(145deg,#087fc2,#0b9ead)!important;color:#fff!important;
  font-size:17px!important;box-shadow:0 8px 20px rgba(8,127,194,.22)!important;
}
#syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-refresh{
  display:grid!important;place-items:center!important;width:38px!important;height:38px!important;min-height:38px!important;flex:0 0 38px!important;
  padding:0!important;border:1px solid #dce8f1!important;border-radius:11px!important;background:#f8fbfd!important;color:#357096!important;box-shadow:none!important;
}
#syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-stage{
  position:relative!important;display:grid!important;grid-template-columns:145px minmax(0,1fr)!important;grid-template-rows:1fr!important;
  gap:20px!important;align-items:center!important;min-height:276px!important;padding:18px!important;
  border:1px solid #e2edf4!important;border-radius:21px!important;background:linear-gradient(140deg,#fbfdff,#f2f8fc)!important;overflow:hidden!important;
}
#syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-media{
  position:relative!important;grid-column:1!important;grid-row:1!important;display:grid!important;place-items:center!important;
  width:145px!important;height:196px!important;min-height:196px!important;max-height:196px!important;margin:0!important;align-self:center!important;
  overflow:hidden!important;border-radius:18px!important;background:linear-gradient(145deg,#f2f8fc,#eaf4fb)!important;
  box-shadow:inset 0 0 0 1px #dce9f1!important;
}
#syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-media img[data-yhls-spotlight-image]{
  position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;padding:0!important;
  object-fit:contain!important;object-position:center!important;transform:none!important;filter:none!important;background:transparent!important;
}
#syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial.is-article .yhls-spotlight-media{
  background:#e8eff5!important;box-shadow:0 11px 26px rgba(25,59,88,.16)!important;
}
#syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial.is-article .yhls-spotlight-media img[data-yhls-spotlight-image]{
  object-fit:contain!important;object-position:center!important;
}
#syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-visual-mark,
#syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-visual-type,
#syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial [data-yhls-spotlight-mark],
#syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial [data-yhls-spotlight-visual-type]{display:none!important}
#syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-copy{
  position:relative!important;z-index:2!important;grid-column:2!important;grid-row:1!important;display:flex!important;min-width:0!important;
  flex-direction:column!important;align-items:flex-start!important;align-self:stretch!important;justify-content:center!important;padding:0!important;
}
#syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-kicker-row{
  display:block!important;width:100%!important;margin:0 0 8px!important;
}
#syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-kicker-row>span{display:none!important}
#syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-tag{
  margin:0!important;color:#087fc2!important;font-size:14px!important;font-weight:850!important;letter-spacing:.105em!important;line-height:1.25!important;
}
#syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-copy h2{
  display:-webkit-box!important;margin:0!important;overflow:hidden!important;color:#132d48!important;font-size:24px!important;line-height:1.16!important;
  letter-spacing:-.025em!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical!important;
}
#syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-description{
  display:-webkit-box!important;overflow:hidden!important;margin:10px 0 0!important;color:#5d7187!important;font-size:14px!important;line-height:1.6!important;
  -webkit-line-clamp:3!important;-webkit-box-orient:vertical!important;
}
#syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-meta{
  display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:6px!important;max-width:100%!important;margin-top:10px!important;
  color:#7c8c9d!important;font-size:14px!important;line-height:1.4!important;
}
#syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-cta{
  display:flex!important;align-items:center!important;gap:8px!important;width:auto!important;min-height:0!important;margin-top:auto!important;padding:13px 0 0!important;
  border:0!important;border-radius:0!important;background:transparent!important;color:#087fc2!important;font-size:14px!important;font-weight:820!important;box-shadow:none!important;
}
#syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-types{
  display:flex!important;gap:6px!important;margin-top:12px!important;padding:5px!important;border:0!important;border-radius:14px!important;
  background:#f1f6f9!important;overflow-x:auto!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;
}
#syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-types button{
  display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;min-height:38px!important;flex:1 0 auto!important;
  padding:0 9px!important;border:0!important;border-radius:10px!important;background:transparent!important;color:#687c90!important;font-size:14px!important;font-weight:720!important;white-space:nowrap!important;box-shadow:none!important;
}
@media (min-width:721px) and (max-width:1080px){
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial{width:min(100%,760px)!important;max-width:760px!important;margin-left:0!important}
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-stage{display:grid!important;grid-template-columns:150px minmax(0,1fr)!important;grid-template-rows:1fr!important;gap:20px!important;min-height:250px!important}
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-media{grid-column:1!important;grid-row:1!important;width:150px!important;height:190px!important;min-height:190px!important;max-height:190px!important}
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-copy{grid-column:2!important;grid-row:1!important;padding:0!important}
}
@media (max-width:720px){
  #syh-app.yhls-app .yhls-hero .yhls-hero-visual{display:block!important;width:100%!important;min-height:0!important;margin-top:4px!important}
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial{width:100%!important;max-width:none!important;padding:13px!important;border-radius:22px!important;box-shadow:0 18px 44px rgba(27,76,112,.13)!important}
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-topline{padding:1px 1px 12px!important;flex-direction:row!important}
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-topline small{font-size:16px!important}
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-topline small>span{width:33px!important;height:33px!important;flex-basis:33px!important;border-radius:10px!important;font-size:15px!important}
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-refresh{width:34px!important;height:34px!important;min-height:34px!important;flex-basis:34px!important}
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-stage{display:grid!important;grid-template-columns:92px minmax(0,1fr)!important;grid-template-rows:1fr!important;gap:14px!important;align-items:center!important;min-height:210px!important;padding:14px!important;border-radius:17px!important}
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-media{grid-column:1!important;grid-row:1!important;width:92px!important;height:128px!important;min-height:128px!important;max-height:128px!important;border-radius:14px!important;align-self:center!important}
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-copy{grid-column:2!important;grid-row:1!important;align-self:stretch!important;justify-content:center!important;padding:0!important}
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-tag{margin-bottom:0!important;font-size:14px!important}
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-copy h2{font-size:19px!important;line-height:1.16!important;-webkit-line-clamp:3!important}
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-description{margin-top:7px!important;font-size:14px!important;line-height:1.5!important;-webkit-line-clamp:3!important}
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-meta{margin-top:7px!important;font-size:14px!important}
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-cta{width:auto!important;justify-content:flex-start!important;padding-top:9px!important;font-size:14px!important}
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-types{margin-top:9px!important;padding:4px!important}
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-types button{min-height:36px!important;padding:0 9px!important;font-size:14px!important}
}
@media (max-width:420px){
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-stage{display:grid!important;grid-template-columns:80px minmax(0,1fr)!important;grid-template-rows:1fr!important;gap:12px!important;min-height:202px!important;padding:12px!important}
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-media{grid-column:1!important;grid-row:1!important;width:80px!important;height:112px!important;min-height:112px!important;max-height:112px!important}
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-copy{grid-column:2!important;grid-row:1!important}
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-copy h2{font-size:18px!important}
}

/* ==========================================================================
 * v1.09.61 — desktop wide alignment + horizontal rhythm
 * Desktop only. Keep the accepted v1.09.60 tablet/mobile contract intact.
 * The Spotlight now occupies the full visual column so its right edge lands
 * on the same canonical shell edge used by Event/Spotlines sections below.
 * ========================================================================== */
@media (min-width:1081px){
  #syh-app.yhls-app .yhls-hero .syh-hero-visual.yhls-hero-visual{
    width:100%!important;
    min-width:0!important;
    justify-items:stretch!important;
    place-items:center stretch!important;
  }
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    padding:16px!important;
    border-radius:24px!important;
  }
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-topline{
    padding:0 2px 12px!important;
  }
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-stage{
    grid-template-columns:142px minmax(0,1fr)!important;
    gap:22px!important;
    min-height:220px!important;
    padding:16px 20px!important;
    border-radius:19px!important;
    align-items:center!important;
  }
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-media{
    width:142px!important;
    height:184px!important;
    min-height:184px!important;
    max-height:184px!important;
    border-radius:16px!important;
  }
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-copy{
    min-width:0!important;
    align-self:stretch!important;
    justify-content:center!important;
  }
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-kicker-row{
    margin-bottom:6px!important;
  }
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-copy h2{
    font-size:23px!important;
    line-height:1.14!important;
    -webkit-line-clamp:2!important;
  }
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-description{
    margin-top:7px!important;
    line-height:1.52!important;
    -webkit-line-clamp:2!important;
  }
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-meta{
    margin-top:7px!important;
  }
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-cta{
    margin-top:8px!important;
    padding-top:0!important;
  }
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-types{
    margin-top:10px!important;
  }
}
@media (min-width:1440px){
  #syh-app.yhls-app .yhls-hero .syh-hero-grid{
    grid-template-columns:minmax(0,.82fr) minmax(720px,1.18fr)!important;
    gap:clamp(38px,3vw,58px)!important;
  }
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-stage{
    grid-template-columns:150px minmax(0,1fr)!important;
    min-height:214px!important;
  }
  #syh-app.yhls-app .yhls-hero .yhls-spotlight-card.dynamic-editorial .yhls-spotlight-media{
    width:150px!important;
    height:184px!important;
  }
}