/* Affiliate Marketing hub (prefix afm-). Family rules: fam-hub.css. */

/* Hero */
.afm-hero { --hero-h: 14.75rem; --hero-pos: 50% 30%; --hub-h1: 2.98rem; --hub-lead: 1.07rem; --hub-lead-w: 35rem; --hero-copy: 46rem; }
/* The photo starts a third of the way in (left side is the white copy area anyway) so the subject sits right of the copy */
.afm-hero .hero__bg { left: 30%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.afm-hero::before { --hero-fade: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 36%, rgba(255,255,255,.5) 52%, rgba(255,255,255,0) 62%); }
.afm-hero .hero__inner { padding-block: .95rem 1rem; }
.afm-hero .hero__lead { line-height: 1.3; }
.afm-hero .hub-feats { gap: .6rem 1.45rem; margin-top: 1rem; }
.afm-hero .hub-feats li { font-size: max(.76rem, 16px) /* rt-1019 */; color: var(--ink); }
.afm-hero .hub-feats strong { font-weight: 500; font-size: .76rem; }
.afm-note { right: 3.4%; top: 2.2rem; font-size: 1.32rem; transform: rotate(-6deg); }

/* Topic cards */
.afm-topics { padding-block: 1.05rem .4rem; }
.afm-cats { --gap: .65rem; }
.afm-cats .hub-cat { padding: .95rem .45rem .8rem .95rem; gap: .7rem; }
.afm-cats .ib { --s: 2.75rem; }

/* Main column */
.afm-main { --hub-aside: 30rem; --hub-gap: 1.6rem; padding-block: .85rem 1.25rem; }
.afm-posts { --gap: 1.1rem; }
.afm-posts .post-card__media { --ratio: 2.9 / 1; border-radius: 4px; }
.afm-posts .post-card__body { padding: .5rem 0 0; gap: .3rem; }
.afm-posts .post-card h3 { font-size: .86rem; line-height: 1.25; }
.afm-posts .meta { font-size: .74rem; gap: .2rem 1.6rem; }
.afm-posts .meta span + span { padding-left: 1.6rem; border-left: 1px solid #cfd8e3; margin-left: -.8rem; }
.afm-tools { margin-top: 1.4rem; }
.afm-tools__grid { --gap: .55rem; }

/* Sidebar */
.afm-kit { --cover-w: 9.4rem; --cover-r: -.75rem; --cover-t: .3rem; --cover-space: 9.2rem; --lead-title: 1.32rem; padding: 1.05rem 1.1rem .95rem; }
.afm-kit__head { display: flex; gap: .7rem; align-items: flex-start; }
.afm-kit__gift { width: 2.6rem; height: 2.6rem; color: var(--green-600); flex: none; margin-top: -.1rem; }
.afm-kit .lead-box__text { margin-top: .2rem; }
.afm-kit .form-inline { max-width: 20.4rem; }
.afm-kit .ticks { max-width: 21rem; }
.afm-main .hub-links { padding-bottom: .55rem; }

@media (max-width: 1100px) {
  .afm-note { display: none; }
}
@media (max-width: 760px) {
  .afm-hero { --hero-mobile-h: 200px; --hero-pos: 72% 25%; }
  .afm-hero .hero__bg { left: 0; -webkit-mask-image: none; mask-image: none; }
  .afm-posts .post-card__media { --ratio: 16 / 9; }
  .afm-posts .post-card h3 { font-size: 1rem; }
  .afm-kit { --cover-w: 6.5rem; --cover-space: 6.2rem; }
}
