/* The Loop membership page: templates/page-the-loop.html, pattern trionz/the-loop. Form styles: blocks/newsletter/style.css. */
.tz-loop { --tz-gutter-x: var(--wp--style--root--padding-left, clamp(16px, 4vw, 48px)); --tz-edge: max(var(--tz-gutter-x), calc((100% - 1320px) / 2)); }
.tz-loop > * { margin-block: 0; }
.tz-loop .tz-eyebrow { margin: 0 0 12px; }
.tz-loop-h2 { margin: 0; font-size: clamp(32px, 3.4vw, 44px); line-height: 1.1; font-weight: 500; }

/* Breadcrumbs */
.tz-loop-crumbs { padding: 24px var(--tz-edge) 0; }
.tz-loop-crumbs .tz-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

/* Hero */
.tz-loop-hero { padding: 32px var(--tz-edge) 0; }
.tz-loop-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); background: var(--tz-ink); color: var(--tz-surface); }
.tz-loop-hero__text { display: flex; flex-direction: column; gap: 22px; padding: 49px; }
.tz-loop-hero .tz-loop-hero__eyebrow { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--tz-sand); }
.tz-loop-hero__title { margin: 0; font-size: clamp(48px, 5.4vw, 76px); line-height: .96; font-weight: 500; color: var(--tz-surface); }
.tz-loop-hero__intro { margin: 0; max-width: 32em; font-size: 18px; line-height: 30px; color: #d8d0c4; }
.tz-loop-hero__intro strong { color: var(--tz-surface); font-weight: 600; }
.tz-loop-hero__terms { margin: -8px 0 0; max-width: 37em; font-size: 14px; line-height: 22px; color: #b8ada0; }
.tz-loop-hero__media { position: relative; min-height: 560px; margin: 0; overflow: hidden; }
/* Photo is cropped around the couple (1280x768); centred so both stay in frame at any width. */
.tz-loop-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* How it works */
.tz-loop-steps { padding: 96px var(--tz-edge) 24px; }
.tz-loop-steps .tz-loop-h2 { margin-bottom: 40px; }
.tz-loop-steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--tz-line); }
.tz-loop-steps__list li { display: flex; flex-direction: column; gap: 12px; padding: 32px 32px 8px 0; }
.tz-loop-steps__n { font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: 40px; line-height: 40px; color: #8a6a45; }
.tz-loop-steps__list h3 { margin: 0; font-size: 26px; line-height: 32px; font-weight: 500; }
.tz-loop-steps__list p { margin: 0; font-size: 15px; line-height: 25px; color: #3a3833; }

/* What you get */
.tz-loop-perks { padding: 72px var(--tz-edge) 96px; }
.tz-loop-perks__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.tz-loop-perks__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 30% 50%; }
.tz-loop-perks__list { display: flex; flex-direction: column; margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--tz-line); }
.tz-loop-perks__list li { display: grid; grid-template-columns: 28px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--tz-line); }
.tz-loop-perks__list svg { margin-top: 3px; color: var(--tz-forest); }
.tz-loop-perks__list span { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 24px; color: #3a3833; }
.tz-loop-perks__list strong { font-family: var(--wp--preset--font-family--display); font-size: 23px; line-height: 28px; font-weight: 400; color: var(--tz-ink); }
.tz-loop-perks__note { margin: 24px 0 0; font-size: 14px; line-height: 22px; color: var(--tz-muted); }

/* Good to know */
.tz-loop-faq { background: var(--tz-stone); }
.tz-loop-faq__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; padding: 88px var(--tz-edge); }
.tz-loop-faq__head p:not(.tz-eyebrow) { margin: 14px 0 0; font-size: 15px; line-height: 25px; color: #3a3833; }
.tz-loop-faq__head a { color: var(--tz-forest); }
.tz-loop-faq__list { border-top: 1px solid rgba(28, 28, 26, .16); }
.tz-loop-faq__item { border-bottom: 1px solid rgba(28, 28, 26, .16); }
.tz-loop-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; list-style: none; cursor: pointer; }
.tz-loop-faq__item summary::-webkit-details-marker { display: none; }
.tz-loop-faq__item summary span { font-family: var(--wp--preset--font-family--display); font-size: 23px; line-height: 28px; transition: color .2s ease; }
.tz-loop-faq__item summary:hover span { color: var(--tz-forest); }
.tz-loop-faq__plus { flex: none; transition: transform .25s ease; }
.tz-loop-faq__item[open]:not(.is-closing) .tz-loop-faq__plus { transform: rotate(45deg); }
.tz-loop-faq__item .tz-acc__body p { margin: 0; padding: 0 48px 24px 0; font-size: 15px; line-height: 25px; color: #3a3833; }

/* The photo is a wide shot of two people, so side by side it only fits both above 1400px (where the text column
   is short enough). 1081-1400px: stack it under the text in a 2:1 frame (1080px down uses the 16:10 frame below). */
@media (min-width: 1081px) and (max-width: 1400px) {
	.tz-loop-hero__inner { grid-template-columns: 1fr; }
	.tz-loop-hero__media { min-height: 0; aspect-ratio: 2 / 1; }
	.tz-loop-hero__media img { object-position: 50% 0%; }
}
@media (max-width: 1080px) {
	.tz-loop-hero__inner, .tz-loop-perks__inner, .tz-loop-faq__inner { grid-template-columns: 1fr; }
	.tz-loop-hero__media { min-height: 0; aspect-ratio: 16 / 10; }
	.tz-loop-perks__inner, .tz-loop-faq__inner { gap: 40px; }
	.tz-loop-perks__img { aspect-ratio: 16 / 10; }
}
@media (max-width: 900px) {
	.tz-loop-steps__list { grid-template-columns: 1fr; }
	.tz-loop-steps__list li { padding-right: 0; border-bottom: 1px solid var(--tz-line); padding-bottom: 28px; }
}
@media (max-width: 640px) {
	.tz-loop-hero { padding-left: 0; padding-right: 0; padding-top: 20px; }
	.tz-loop-hero__text { padding: 40px var(--tz-gutter-x); }
	.tz-loop-steps { padding-top: 64px; }
	.tz-loop-perks { padding: 48px var(--tz-edge) 64px; }
	.tz-loop-faq__inner { padding: 64px var(--tz-edge); }
	.tz-loop-faq__item .tz-acc__body p { padding-right: 0; }
}