/* Promotion Engine: Maker Stories, gift guides, GEN7 badge. Uses the Storefront's colors. */

.wsm-sf-badge--gen7 { background: #B23B2E; color: #FFF8EC !important; letter-spacing: .02em; }

/* Story */
.wsm-promo-story__hero { position: relative; background: var(--sf-green-dark); color: #F7F2E4; }
.wsm-promo-story__hero > img { display: block; width: 100%; height: clamp(240px, 52vw, 560px); object-fit: cover; opacity: .55; }
.wsm-promo-story__head { position: relative; padding-top: 24px; padding-bottom: 28px; }
.wsm-promo-story__hero > img + .wsm-promo-story__head { position: absolute; left: 0; right: 0; bottom: 0; }
.wsm-promo-story__hero .wsm-sf-eyebrow { color: #D9C79A; }
.wsm-promo-story__hero .wsm-sf-title { color: #F7F2E4; max-width: 22ch; text-shadow: 0 2px 16px rgba(0,0,0,.35); }
.wsm-promo-story__hero .wsm-sf-crumbs a, .wsm-promo-story__hero .wsm-sf-crumbs span { color: #EDE3C4; }
.wsm-promo-story__by { margin: 10px 0 0; font-weight: 600; }
.wsm-promo-story__by a { color: #F7F2E4; text-decoration: underline; text-underline-offset: 3px; }
.wsm-promo-story__body { max-width: 760px; padding-top: 32px; padding-bottom: 16px; font-size: 1.1rem; line-height: 1.7; }
.wsm-promo-story__text h3 { font-size: 1.2rem; margin: 1.8em 0 .4em; color: var(--sf-green); }
.wsm-promo-story__text p { margin: 0 0 1em; }
.wsm-promo-story__quote { margin: 0 0 32px; padding: 4px 0 4px 22px; border-left: 4px solid var(--sf-brass); }
.wsm-promo-story__quote p { font: 400 clamp(1.3rem, 3.5vw, 1.75rem)/1.3 var(--sf-display); margin: 0 0 8px; color: var(--sf-ink); }
.wsm-promo-story__quote cite { font-style: normal; font-weight: 700; color: var(--sf-muted); }
.wsm-promo-story__quote cite::before { content: "— "; }
.wsm-promo-story__video { margin: 28px 0; }
.wsm-promo-story__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 28px 0; }
.wsm-promo-story__photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--sf-radius); }
@media (min-width: 700px) { .wsm-promo-story__photos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wsm-promo-story__share { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 8px; }

/* Lists of stories and guides */
.wsm-promo-stories { padding-top: 20px; padding-bottom: 40px; }
.wsm-promo-story-grid { display: grid; gap: 18px; margin-top: 20px; }
@media (min-width: 700px) { .wsm-promo-story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .wsm-promo-story-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wsm-promo-story-card { background: var(--sf-card); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); overflow: hidden; }
.wsm-promo-story-card a { display: block; color: inherit; text-decoration: none; height: 100%; }
.wsm-promo-story-card a:hover .wsm-promo-story-card__title { text-decoration: underline; }
.wsm-promo-story-card__img { background: var(--sf-parchment); aspect-ratio: 16 / 10; }
.wsm-promo-story-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wsm-promo-story-card__body { padding: 16px 18px 20px; }
.wsm-promo-story-card__title { font: 400 1.3rem/1.2 var(--sf-display); margin: 0 0 8px; }
.wsm-promo-pager { display: flex; justify-content: center; gap: 12px; margin: 28px 0 0; }

/* Gift guide */
.wsm-promo-guide__hero { position: relative; background: var(--sf-green-dark); color: #F7F2E4; margin-bottom: 24px; }
.wsm-promo-guide__hero > img { display: block; width: 100%; height: clamp(200px, 38vw, 420px); object-fit: cover; opacity: .45; }
.wsm-promo-guide__head { padding-top: 24px; padding-bottom: 28px; }
.wsm-promo-guide__hero.has-image .wsm-promo-guide__head { position: absolute; left: 0; right: 0; bottom: 0; }
.wsm-promo-guide__hero .wsm-sf-title { color: #F7F2E4; }
.wsm-promo-guide__hero .wsm-sf-eyebrow { color: #D9C79A; }
.wsm-promo-guide__hero .wsm-sf-intro { color: #EDE3C4; max-width: 60ch; }
.wsm-promo-guide__hero .wsm-sf-crumbs a, .wsm-promo-guide__hero .wsm-sf-crumbs span { color: #EDE3C4; }
.wsm-promo-guide__count { font-weight: 700; margin: 8px 0 0; color: #F7F2E4; }
.wsm-promo-guide__more { text-align: center; margin: 28px 0 40px; }