/*
 * martel/our-story
 *
 * Enqueued by Blocks::enqueue_section_block_styles(), NOT by block.json `style`.
 *
 * In brand.css the eyebrow and year were silently overridden: `.martel-story__left p`
 * and `.martel-story__item p` are element-qualified (0,1,1) and outranked
 * `.is-style-eyebrow` and `.martel-story__year` (0,1,0), so the eyebrow rendered
 * 17px/600 instead of the site-standard 14px/700 and the year rendered 15px/600
 * in 62% white instead of 13px/700 in red-bright. Both now render as intended:
 * the eyebrow inherits its own style unopposed, and the body rule below excludes
 * the year with :not() rather than competing with it on specificity.
 */
.martel-story { position: relative; background: var(--wp--preset--color--slate-light); padding: 130px var(--wp--custom--gutter) 80px; }
.martel-story::before { content: ""; position: absolute; inset: 0; background: url('/wp-content/themes/ollie-child/assets/images/blueprint-map.png') right -280px center / cover no-repeat; opacity: .34; mix-blend-mode: screen; pointer-events: none; }
.martel-story > * { position: relative; z-index: 2; }
.martel-story__grid { max-width: 1340px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: start; }

.martel-story__left { position: sticky; top: 120px; max-width: 512px; padding-right: 72px; }
.martel-story__left > * { margin-top: 0; margin-bottom: 0; }
.martel-story__left .is-style-eyebrow { color: rgba(255,255,255,.62); margin-bottom: 26px; }
.martel-story__left h2 { font-size: clamp(34px, 3.4vw, 52px); line-height: 1.04; letter-spacing: var(--wp--custom--letter-spacing--tight); margin: 0; text-wrap: balance; }
.martel-story__body { margin-top: 26px; }
.martel-story__body p { font-size: 17px; font-weight: 600; line-height: 1.62; color: rgba(255,255,255,.74); margin: 0; }
.martel-story__body p + p { margin-top: 1em; }
.martel-story__left .wp-block-buttons { margin-top: 36px; }

.martel-story__timeline { position: relative; }
.martel-story__timeline::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 2px; background: var(--wp--preset--color--border-dark); }
.martel-story__item { position: relative; padding-left: 52px; margin-bottom: 52px; }
.martel-story__item:last-child { margin-bottom: 0; }
.martel-story__item::before { content: ""; position: absolute; left: -7px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--wp--preset--color--primary); box-shadow: 0 0 0 5px rgba(200,16,46,.16); }
.martel-story__item--today::before { background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.14); }
.martel-story__item > * { margin-top: 0; margin-bottom: 0; }
.martel-story__item p:not(.martel-story__year) { font-size: 15px; font-weight: 600; line-height: 1.62; color: rgba(255,255,255,.62); margin: 0; }
.martel-story__item h3 { font-size: 23px; font-weight: 700; line-height: 1.14; color: #fff; margin: 0 0 10px; }
/* red-bright is only 3.77:1 on slate-light; #FF8088 is the nearest tint that clears 4.5:1 (4.70:1). */
/* No text-transform: Sweet Sans draws lowercase as small caps at figure height, so
   "1980s" keeps the s level with the digits; uppercase made it tower over them.
   Type labels like TODAY in capitals in the field. */
.martel-story__year { display: block; font-size: 13px; font-weight: 700; letter-spacing: .18em; color: #FF8088; margin: 0 0 12px; }
.martel-story__item--today .martel-story__year { color: #fff; }
.martel-story__item-img { margin-top: 22px; aspect-ratio: 16/10; overflow: hidden; }
.martel-story__item-img img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1024px) {
	.martel-story { padding: 96px 28px 64px; }
	.martel-story__grid { grid-template-columns: 1fr; gap: 44px; }
	.martel-story__left { position: static; top: auto; max-width: none; padding-right: 0; }
	.martel-story__item { padding-left: 42px; }
	.martel-story__timeline::before { left: 5px; }
	.martel-story__item::before { left: 0; width: 12px; height: 12px; }
}
@media (max-width: 640px) {
	.martel-story { padding: 64px 18px 48px; }
	.martel-story__item { margin-bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) { .martel-story__item-img img, .martel-story__item::before { transition: none; } }