/* The resources listing (/resources/, archive-resource.php), premium layout: resources.css of
   UES_Resources_Premium_Mockup.html (mail 031), with the mockup hero (.phero.list) mapped to the live photo hero
   (.hero.rhero.list). Loads on the listing only, after resource.css (the posts' cards, downloads, questions, numbers,
   reveal) and compliance.css (the hub hero panel and guide cards). Source of truth: ues-homepage git repo on
   Manny's machine. v1.0 */
.hero.rhero.list .copy{max-width:700px}
.hero.rhero.list .lede{color:#DCE2E7;font-size:18px;line-height:1.6;margin:0 0 14px;max-width:640px}
.hero.rhero.list .cta-row{margin-top:8px}

/* newest guide */
.feat{display:grid;grid-template-columns:1.05fr 1fr;gap:36px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);transition:box-shadow .2s,border-color .2s}
html.rjs .feat.rv{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .2s,border-color .2s}
.feat:hover{border-color:var(--ink);box-shadow:0 14px 34px rgba(18,22,26,.10)}
.feat .im{position:relative;align-self:stretch;min-height:400px;background:var(--bg-3);overflow:hidden}
.feat .im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.feat .im picture{display:block;height:100%}
.feat:hover .im img{transform:scale(1.04)}
.feat .tag{position:absolute;left:18px;top:18px;background:var(--yellow);color:var(--ink);font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;border-radius:99px}
.feat .bd{padding:34px 38px 34px 0}
.feat .pm{font-size:14.5px;color:var(--slate);margin:0 0 12px}
.feat .pm b{color:var(--ink);font-weight:700}
.feat h2{font-size:clamp(24px,2.5vw,32px);line-height:1.15;margin:0 0 12px;letter-spacing:-.01em;text-wrap:balance}
.feat p.sum{font-size:17px;color:var(--slate);line-height:1.6;margin:0 0 16px}
.feat ul{list-style:none;padding:0;margin:0 0 24px}
.feat li{position:relative;padding-left:28px;margin:0 0 9px;font-size:15.5px;line-height:1.5;color:var(--ink)}
.feat li svg{position:absolute;left:0;top:2px;width:18px;height:18px}
.feat .go{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.feat .go::after{content:"\2192";transition:transform .2s}
.feat:hover .go::after{transform:translateX(4px)}

/* guide cards: the date and reading time on one line */
.rel .k .sp{margin:0 6px;color:var(--line)}
.list-foot{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:22px;font-size:15px;color:var(--slate)}
.list-foot .pages a{font-weight:700;color:var(--ink)}
.list-foot .pages a+a{margin-left:14px}

/* the four rules guides on one row */
.rules .guide-grid{grid-template-columns:repeat(4,1fr)}
.rules .guide-card h3{font-size:18px}
.rules .guide-card p{font-size:14.5px}
.rules-more{margin-top:24px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}

/* downloads side by side */
.dl-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.dl-grid .dl{margin:0;height:100%}
.dl h3{font-size:19px;margin:6px 0 8px;line-height:1.3}
.dl p{font-size:15px;color:var(--slate);margin:0 0 14px;line-height:1.55}

/* common questions on a listing page */
.answers .pfaq{margin:0;border-top:0}
.pfaq .a .more{display:inline-block;margin-top:10px;font-weight:700;font-size:14.5px;color:var(--ink)}
.pfaq .a .more::after{content:"\2192";margin-left:6px}

/* state finder on its own */
.state .sfind{margin:0}

@media (max-width:1100px){.rules .guide-grid{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
  .feat{grid-template-columns:1fr;gap:0}
  .feat .im{min-height:0;aspect-ratio:16/10}
  .feat .bd{padding:22px 22px 26px}
  .dl-grid{grid-template-columns:1fr}
}
@media (max-width:640px){.rules .guide-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.feat,.feat .im img,.feat .go::after{transition:none}.feat:hover .im img{transform:none}}
@media print{.hero.rhero.list .hero-panel,.list-foot .pages,.state{display:none!important}}
