/* John Morley Flat Roofing: four systems as tabs beside a photo that changes */
.jm.flat { padding: clamp(72px, 8vw, 120px) 0; }
.jm.flat .sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 32px; margin-bottom: 48px; }
.jm .flat__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; align-items: stretch; }

.jm .flat__tabs { display: grid; gap: 10px; align-content: start; }
.jm .flat__tabs button { display: grid; gap: 4px; width: 100%; margin: 0; padding: 18px 20px; border: 1px solid var(--line); border-left: 4px solid transparent; border-radius: var(--r); background: var(--white); color: var(--slate); text-align: left; text-transform: none; letter-spacing: 0; white-space: normal; cursor: pointer; transition: border-color .2s, background-color .2s; }
.jm .flat__tabs button b { font: 800 26px/1 var(--font-display); text-transform: uppercase; }
.jm .flat__tabs button span { font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--mute); }
.jm .flat__tabs button:hover, .jm .flat__tabs button:focus { border-color: var(--lead-l); background: var(--white); color: var(--slate); }
.jm .flat__tabs button[aria-selected="true"] { border-color: var(--slate); border-left-color: var(--clay); }

/* every photo is in the page, stacked; the chosen one fades in */
.jm .flat__img { position: relative; overflow: hidden; margin: 0; border-radius: var(--r); min-height: 420px; background: var(--lime-2); }
.jm .flat__img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity .3s; }
.jm .flat__img img.is-on { opacity: 1; }
.jm .flat__img figcaption { position: absolute; left: 16px; bottom: 16px; z-index: 1; padding: 7px 14px; border-radius: var(--r); background: rgba(43, 43, 45, .84); color: #fff; font-size: 14px; font-weight: 600; }
.jm .flat__img figcaption[hidden] { display: none; }

@media (max-width: 1024px) {
	.jm .flat__in { grid-template-columns: 1fr; }
	.jm.flat .sec-head { grid-template-columns: 1fr; gap: 18px; }
}