/* ==========================================================================
   „Ин и Ян“ (/in-i-yan/): двете половини в горната част, Ян и Ин, двойките с
   продуктовите карти (products.css), пакетите.
   ========================================================================== */

/* горе вдясно: Ян и Ин - две кръгли снимки, които се допират, знакът по средата */
.nd-yy-duo { position: relative; justify-self: end; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 520px); }
.nd-yy-duo__half { position: relative; margin: 0; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.nd-yy-duo__half img { width: 100%; height: 100%; object-fit: cover; }
.nd-yy-duo__half--yang { box-shadow: 0 0 0 3px rgba(230, 203, 140, .55), 0 30px 60px -30px rgba(0, 0, 0, .6); }
.nd-yy-duo__half--yin { margin-left: -14%; margin-top: 22%; box-shadow: 0 0 0 3px rgba(156, 198, 182, .5), 0 30px 60px -30px rgba(0, 0, 0, .6); }
.nd-yy-duo__half figcaption { position: absolute; left: 50%; bottom: 12%; translate: -50% 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 8px; border-radius: 999px; font-size: .9rem; font-weight: 600; color: var(--ink); background: rgba(255, 253, 248, .92); }
.nd-yy-duo__half figcaption .nd-i { width: 24px; height: 24px; padding: 4px; border-radius: 50%; }
.nd-yy-duo__half--yang figcaption .nd-i { color: var(--jade-950); background: var(--gold-grad) border-box; }
.nd-yy-duo__half--yin figcaption .nd-i { color: var(--jade-300); background: var(--jade-800); }
.nd-yy-duo__mark { position: absolute; left: 50%; top: 52%; translate: -64% -50%; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: #0b1b15; box-shadow: 0 0 0 4px rgba(230, 203, 140, .4); }
.nd-yy-duo__mark .nd-pair__yy { width: 56px; height: 56px; }

/* Ян и Ин */
.nd-yy-poles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 10px 0 22px; }
.nd-yy-pole { position: relative; overflow: hidden; padding: clamp(24px, 3vw, 36px); border-radius: 28px; }
.nd-yy-pole h3 { margin: 14px 0 4px; font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 300; letter-spacing: -.03em; }
.nd-yy-pole__words { margin: 0 0 12px; font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.nd-yy-pole p:last-child { margin: 0; line-height: 1.65; }
.nd-yy-pole a { text-decoration: underline; text-underline-offset: 3px; }
.nd-yy-pole__ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font-size: 1.5rem; }
.nd-yy-pole--yang { color: var(--ink-2); background: radial-gradient(70% 90% at 100% 0%, rgba(233, 196, 120, .45), transparent 70%), #fbf3e0; box-shadow: inset 0 0 0 1px rgba(173, 129, 48, .28); }
.nd-yy-pole--yang h3, .nd-yy-pole--yang a { color: var(--gold-800); }
.nd-yy-pole--yang .nd-yy-pole__words { color: var(--gold-700); }
.nd-yy-pole--yang .nd-yy-pole__ic { color: var(--jade-950); background: var(--gold-grad) border-box; }
.nd-yy-pole--yin { color: #c9d6cf; background: radial-gradient(70% 90% at 0% 100%, rgba(61, 118, 96, .5), transparent 70%), linear-gradient(160deg, #13342a, #0b1b15); }
.nd-yy-pole--yin h3 { color: #fbf6ea; }
.nd-yy-pole--yin a { color: var(--jade-300); }
.nd-yy-pole--yin .nd-yy-pole__words { color: var(--jade-300); }
.nd-yy-pole--yin .nd-yy-pole__ic { color: var(--jade-300); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(156, 198, 182, .35); }
.nd-yy-note { max-width: 860px; }

/* двойките */
.nd-yy-pair { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(24px, 4vw, 60px); align-items: center; padding: clamp(26px, 3vw, 40px) 0; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.nd-yy-pair:first-of-type { border-top: 0; }
.nd-yy-pair__sub { margin: 0 0 8px; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700); }
.nd-yy-pair__t { margin: 0 0 14px; font-size: clamp(1.7rem, 2.8vw, 2.3rem); font-weight: 300; line-height: 1.1; letter-spacing: -.03em; color: var(--ink); }
.nd-yy-pair__t em { font-style: normal; color: var(--jade-700); }
.nd-yy-pair__txt p:last-child { margin: 0; line-height: 1.7; color: var(--ink-2); }
.nd-yy-pair__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* пакетите */
.nd-yy-packs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 70px); align-items: center; }
.nd-yy-packs__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1100px) {
	.nd-yy-duo { justify-self: start; width: min(100%, 420px); }
}
@media (max-width: 1024px) {
	.nd-yy-pair, .nd-yy-packs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
	.nd-yy-poles { grid-template-columns: minmax(0, 1fr); }
	.nd-yy-pair__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nd-yy-duo__mark { width: 60px; height: 60px; }
	.nd-yy-duo__mark .nd-pair__yy { width: 42px; height: 42px; }
}