/* The retreat's price ticket: the main part and the sunflower stub with the perforated edge (DESIGN.md 5C2) */
.wfg-rtk-wrap p, .wfg-rtk-wrap ul { margin: 0; }
.wfg-rtk { --cut: 290px; display: grid; grid-template-columns: minmax(0, 1fr) var(--cut); max-width: 900px; margin-inline: 0; filter: drop-shadow(0 18px 22px rgb(40 25 10 / .22)); }
.wfg-rtk__main { display: grid; gap: 12px; align-content: start; padding: clamp(24px, 3vw, 34px); border-radius: 18px 0 0 18px; background: var(--wfg-paper); -webkit-mask: radial-gradient(circle 14px at 100% 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 14px at 100% 100%, #0000 97%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle 14px at 100% 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 14px at 100% 100%, #0000 97%, #000) bottom / 100% 51% no-repeat; }
.wfg-rtk__title { font-family: var(--wfg-font-display); font-weight: var(--wfg-display-weight); letter-spacing: var(--wfg-display-track); font-size: clamp(1.45rem, 1.2rem + .9vw, 1.9rem); line-height: 1.15; color: var(--wfg-primary); }
.wfg-rtk__when { display: grid; color: var(--wfg-muted); }
.wfg-rtk__when b { color: var(--wfg-primary); font-size: 1.1rem; }
.wfg-rtk__covers { padding-top: 14px; border-top: 2px dashed var(--wfg-line); }
.wfg-rtk__stub { position: relative; display: grid; gap: 6px; align-content: center; justify-items: center; padding: 50px 22px 26px; text-align: center; color: var(--wfg-on-accent); border-radius: 0 18px 18px 0; background: radial-gradient(circle, rgb(30 50 38 / .35) 0 2.2px, transparent 2.8px) 0 0 / 3px 14px repeat-y, linear-gradient(rgb(255 255 255 / .12), rgb(255 255 255 / 0)), var(--stub-bg, var(--wfg-accent)); -webkit-mask: radial-gradient(circle 14px at 0 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 14px at 0 100%, #0000 97%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle 14px at 0 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 14px at 0 100%, #0000 97%, #000) bottom / 100% 51% no-repeat; }
.wfg-rtk__stub::before { content: ""; position: absolute; inset: 0; background: rgb(255 255 255 / .22); -webkit-mask: var(--wfg-doodle) 0 0 / 150px; mask: var(--wfg-doodle) 0 0 / 150px; pointer-events: none; }
.wfg-rtk__stub > * { position: relative; }
.wfg-rtk__hold { display: grid; justify-items: center; line-height: 1.25; }
.wfg-rtk__hold span { font-weight: 600; font-size: .95rem; }
.wfg-rtk__hold b { font-family: var(--wfg-font-display); font-weight: var(--wfg-display-weight); letter-spacing: var(--wfg-display-track); font-size: clamp(2.8rem, 2.2rem + 2vw, 3.6rem); line-height: 1.05; color: var(--wfg-primary); }
.wfg-rtk__or { display: flex; align-items: center; gap: 10px; width: 100%; margin: 4px 0; font: 400 1.3rem/1 var(--wfg-font-hero); color: var(--wfg-primary); }
.wfg-rtk__or::before, .wfg-rtk__or::after { content: ""; flex: 1; border-top: 2px dashed rgb(30 50 38 / .35); }
.wfg-rtk__full { font-weight: 600; }
.wfg-rtk__full b { font-family: var(--wfg-font-display); font-weight: var(--wfg-display-weight); font-size: 1.35rem; color: var(--wfg-primary); }
.wfg-rtk__mp { display: block; font-size: .85rem; font-weight: 600; opacity: .85; }
.wfg-rtk__big { font-family: var(--wfg-font-display); font-weight: var(--wfg-display-weight); letter-spacing: var(--wfg-display-track); font-size: clamp(1.7rem, 1.4rem + 1vw, 2.1rem); line-height: 1.1; color: var(--wfg-primary); }
.wfg-rtk__txt { font-size: .95rem; line-height: 1.45; max-width: 30ch; }
.wfg-rtk__btn { margin-top: 12px; width: 100%; justify-content: center; background: var(--wfg-primary); color: var(--wfg-on-primary); }
.wfg-rtk__btn:hover { background: var(--wfg-primary-2); color: var(--wfg-on-primary); }
.wfg-rtk__small { font-size: .88rem; }
.wfg-rtk__small a { color: var(--wfg-primary); font-weight: 700; text-decoration-color: currentColor; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.wfg-rtk__left { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 62px; height: 62px; padding: 6px; border-radius: 50%; background: var(--wfg-pop); color: var(--wfg-on-pop); font: 700 .74rem/1.05 var(--wfg-font-body); text-align: center; rotate: 12deg; box-shadow: 0 4px 8px rgb(0 0 0 / .18); }
.wfg-rtk__left--full { background: var(--wfg-primary); color: var(--wfg-on-primary); font-size: 1rem; }
.wfg-rtk--full, .wfg-rtk--past { --stub-bg: var(--wfg-soft); }
@media (width < 640px) {
	.wfg-rtk { grid-template-columns: minmax(0, 1fr); filter: drop-shadow(0 14px 16px rgb(40 25 10 / .2)); }
	.wfg-rtk__main { border-radius: 18px 18px 0 0; -webkit-mask: radial-gradient(circle 14px at 0 100%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 100%, #0000 97%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 14px at 0 100%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 100%, #0000 97%, #000) right / 51% 100% no-repeat; }
	.wfg-rtk__stub { padding-top: 40px; border-radius: 0 0 18px 18px; background: radial-gradient(circle, rgb(30 50 38 / .35) 0 2.2px, transparent 2.8px) 0 0 / 14px 3px repeat-x, linear-gradient(rgb(255 255 255 / .12), rgb(255 255 255 / 0)), var(--stub-bg, var(--wfg-accent)); -webkit-mask: radial-gradient(circle 14px at 0 0, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 0, #0000 97%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 14px at 0 0, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 0, #0000 97%, #000) right / 51% 100% no-repeat; }
}
