/* /resources (resource_library.html): search-first header, types in four groups, Start here steps,
   latest resources with type chips, Load more and a sign-up band. Card tags use public-photo-tag.css. */
.rl-page { background:#fff; color:#042238; font-family:"Open Sans", system-ui, sans-serif; }
body #main-content .rl-page :is(h1, h2, h3) { font-family:Poppins, "Open Sans", sans-serif !important; }
.rl-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Header */
.rl-hero { padding:44px max(32px, calc((100% - 1176px) / 2)) 56px; text-align:center; }
.rl-crumbs { justify-content:center; }
.rl-crumbs li { display:inline-flex; align-items:center; }
.rl-hero h1 { margin:0 0 12px; font:700 46px/1.15 Poppins, sans-serif; color:#042238; }
.rl-sub { margin:0 auto; max-width:62ch; font-size:18px; line-height:1.6; color:#33475B; }
.rl-search { display:flex; align-items:center; gap:4px; max-width:720px; height:60px; margin:24px auto 0; padding:0 6px 0 0; border:1px solid #CBD2E0; border-radius:4px; background:#fff; }
.rl-search:hover { border-color:#6B48E0; }
.rl-search:focus-within { border-color:#6B48E0; outline:2px solid #6B48E0; outline-offset:1px; }
.rl-search input { flex:1; min-width:0; height:100%; margin:0; padding:0 16px; border:0 !important; border-radius:0; box-shadow:none !important; background:transparent !important; font:17px "Open Sans", sans-serif; color:#042238; outline:none; }
.rl-search button { height:44px; padding:0 20px; font:700 13px/1 "Open Sans", sans-serif; letter-spacing:.05em; text-transform:uppercase; cursor:pointer; }
.rl-tries { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin:16px 0 0; font-size:14px; color:#5B6B7C; }
.rl-tries a { min-height:36px; display:inline-flex; align-items:center; padding:0 14px; border:1px solid #CBD2E0; border-radius:18px; background:#fff; color:#042238; text-decoration:none; }
.rl-tries a:hover, .rl-tries a:focus-visible { border-color:#6B48E0; color:#6B48E0; }

/* Sections */
.rl-sec { max-width:1240px; margin:0 auto; padding:48px 32px 0; scroll-margin-top:96px; }
.rl-sec h2 { margin:0 0 20px; font:600 28px/1.25 Poppins, sans-serif; color:#042238; }

/* Browse by type */
.rl-groups { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:20px; }
.rl-group { padding:16px; border:2px solid #E6E9F0; border-radius:4px; }
.rl-group h3 { margin:0 0 6px; font:700 13px/1.3 "Open Sans", sans-serif !important; letter-spacing:.08em; text-transform:uppercase; color:#6B48E0; }
.rl-group ul { list-style:none; margin:0; padding:0; }
.rl-group a { display:flex; align-items:center; gap:12px; min-height:48px; color:#042238; text-decoration:none; }
.rl-group a img { flex:0 0 32px; width:32px; height:32px; }
.rl-group a span { font-weight:600; font-size:15px; }
.rl-group a b { margin-left:auto; font-weight:600; font-size:14px; color:#5B6B7C; }
.rl-group a:hover span, .rl-group a:focus-visible span { color:#6B48E0; text-decoration:underline; }

/* Start here */
.rl-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; }
.rl-steps a { display:flex; align-items:center; gap:14px; height:100%; padding:18px; border:1px solid #E6E9F0; border-radius:4px; background:#fff; box-shadow:8px 8px 0 0 #E2D7FB; text-decoration:none; }
.rl-steps a:hover b, .rl-steps a:focus-visible b { color:#6B48E0; text-decoration:underline; }
.rl-num { flex:0 0 40px; height:40px; display:grid; place-items:center; border-radius:50%; background:#6B48E0; color:#fff; font:700 18px/1 Poppins, sans-serif; }
.rl-steps b { display:block; color:#042238; font-size:16px; }
.rl-steps span span { font-size:14px; color:#5B6B7C; }

/* Latest and results */
.rl-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin-bottom:24px; }
.rl-head h2 { margin:0; }
.rl-chips { display:flex; flex-wrap:wrap; gap:8px; }
.rl-chips a { min-height:36px; display:inline-flex; align-items:center; padding:0 14px; border:1px solid #CBD2E0; border-radius:18px; background:#fff; color:#042238; font-size:14px; text-decoration:none; }
.rl-chips a:hover, .rl-chips a:focus-visible { border-color:#6B48E0; color:#6B48E0; }
.rl-chips a[aria-current] { background:#D1F48C; border-color:#D1F48C; color:#1B1C1A; font-weight:600; }
.rl-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:40px 32px; }
.rl-card { display:flex; flex-direction:column; }
.rl-media { position:relative; display:block; aspect-ratio:16 / 9; border-radius:4px; overflow:hidden; background:#E2E6EF; box-shadow:0 2px 8px rgba(4,34,56,.12); }
.rl-media > img:not(.rl-icon) { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.rl-card:hover .rl-media > img:not(.rl-icon) { transform:scale(1.03); }
.rl-media-icon { display:grid; place-items:center; background:linear-gradient(135deg, #F1ECFF, #E6F4FF); }
.rl-icon { width:72px; height:72px; }
.rl-meta { margin:14px 0 4px; font:600 13px/1.3 "Open Sans", sans-serif; letter-spacing:.03em; text-transform:uppercase; color:#5B6B7C; }
.rl-card h3 { margin:0 0 6px; font:700 20px/1.3 Poppins, sans-serif; }
.rl-card h3 a { color:#042238; text-decoration:none; }
.rl-card h3 a:hover, .rl-card h3 a:focus-visible { color:#6B48E0; text-decoration:underline; }
.rl-text { margin:0; font-size:15px; line-height:1.55; color:#33475B; }
.rl-more { display:flex; justify-content:center; margin-top:44px; }
.rl-more a { min-height:44px; display:inline-flex; align-items:center; padding:0 24px; font:700 13px/1 "Open Sans", sans-serif; letter-spacing:.05em; text-transform:uppercase; text-decoration:none; }
.rl-empty { padding:24px 0; }
.rl-empty h3 { margin:0 0 6px; font:600 20px Poppins, sans-serif; }
.rl-empty p { margin:0; }

/* Sign-up band */
.rl-cta { margin-top:72px; padding:60px 16px 68px; text-align:center; background:#F6F4FD; }
.rl-cta h2 { margin:0 auto; max-width:760px; font:700 32px/1.25 Poppins, sans-serif; color:#042238; }
.rl-cta p { margin:12px 0 24px; font-size:18px; color:#33475B; }
.rl-cta-btns { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.rl-cta-btns a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 24px; font:700 13px/1 "Open Sans", sans-serif; letter-spacing:.05em; text-transform:uppercase; text-decoration:none; }

@media (max-width:1000px) {
  .rl-groups { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .rl-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:36px 24px; }
}
@media (max-width:640px) {
  .rl-hero { padding:20px 16px 36px; text-align:left; }
  .rl-crumbs { justify-content:flex-start; }
  .rl-hero h1 { font-size:31px; }
  .rl-sub { font-size:16px; }
  .rl-search { height:56px; margin-top:18px; }
  .rl-search input { font-size:16px; padding:0 12px; }
  .rl-tries { justify-content:flex-start; }
  .rl-tries a { min-height:44px; }
  .rl-sec { padding:36px 16px 0; }
  .rl-sec h2 { font-size:23px; }
  .rl-groups, .rl-steps, .rl-grid { grid-template-columns:1fr; }
  .rl-grid { gap:32px; }
  .rl-chips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; width:100%; }
  .rl-chips a { flex:none; min-height:44px; }
  .rl-card h3 { font-size:19px; }
  .rl-cta { margin-top:52px; padding:44px 16px 52px; }
  .rl-cta h2 { font-size:25px; }
}
@media (prefers-reduced-motion:reduce) { .rl-media > img { transition:none; } .rl-card:hover .rl-media > img { transform:none; } }