/* «نصائح البيت» blog (includes/blog.php). Only transform / opacity animate. */
.yns-blog {
	--bl-blue: var(--yn-primary, #0258A2);
	--bl-ink: var(--yn-heading, #1E293B);
	--bl-text: var(--yn-text, #334155);
	--bl-muted: var(--yn-muted, #69727D);
	--bl-line: color-mix(in srgb, var(--bl-ink) 12%, transparent);
	--bl-soft: color-mix(in srgb, var(--bl-blue) 6%, #FFFFFC);
	--bl-gutter: clamp(20px, 5vw, 40px);
	background: #FFFFFC;
	color: var(--bl-text);
}

/* ---------- Hero band ---------- */
.yns-post__hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(130px, 11vw, 170px) var(--bl-gutter) clamp(120px, 12vw, 170px);
	background: var(--bl-blue) url("/wp-content/uploads/2026/10/yneeds-waves-soft.webp") left bottom / 60% no-repeat;
	color: #FFFFFC;
	text-align: center;
}
.yns-blog--index .yns-post__hero { padding-bottom: clamp(64px, 7vw, 96px); }
@media (max-width: 767px) { .yns-post__hero { padding-top: 104px; background-size: 140%; } }
.yns-post__hero-in { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.yns-post__pill {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .35rem .9rem .35rem 1rem; border-radius: 999px;
	background: var(--yn-orange, #FF7515); color: #FFFFFC; font-weight: 800; font-size: .9rem; text-decoration: none;
	transition: opacity .2s;
}
.yns-post__pill svg { width: 14px; height: 14px; }
.yns-post__pill:hover { opacity: .9; }
.yns-post__pill:focus-visible { outline: 3px solid var(--yn-yellow, #FDDC00); outline-offset: 3px; }
.yns-post__pill:active { opacity: .8; }
html body .yns-post__title { margin: 0; padding: 0; color: #FFFFFC; font-size: var(--gvid-yn-fs-h1, clamp(2rem, 4.4vw, 3.4rem)); font-weight: 800; line-height: 1.2; letter-spacing: -.03em; }
.yns-post__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .6rem; margin: 0; padding: 0; color: rgba(255, 255, 252, .85); font-size: .95rem; }
.yns-post__lead { max-width: 640px; margin: 0; padding: 0; color: rgba(255, 255, 252, .9); font-size: var(--gvid-yn-fs-lead, 1.2rem); line-height: 1.7; }

/* ---------- Body ---------- */
.yns-post__body { padding: 0 var(--bl-gutter) clamp(56px, 7vw, 96px); }
.yns-post__cover {
	position: relative; z-index: 2;
	max-width: 1040px; margin: calc(clamp(96px, 10vw, 140px) * -1) auto clamp(28px, 4vw, 48px);
	border-radius: clamp(20px, 2.4vw, 32px); overflow: hidden;
	aspect-ratio: 16 / 8;
	box-shadow: 0 2px 4px rgba(2, 40, 80, .06), 0 30px 60px -28px rgba(2, 40, 80, .45);
}
.yns-post__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .yns-post__cover { aspect-ratio: 4 / 3; } }

.yns-post__article { max-width: 46rem; margin: 0 auto; }
.yns-post__answer {
	margin: 0 0 1.75rem; padding: 1.1rem 1.25rem;
	border-inline-start: 5px solid var(--yn-yellow, #FDDC00); border-radius: 16px;
	background: #FFF9D9; color: var(--bl-ink);
}
.yns-post__answer-label { margin: 0 0 .35rem; padding: 0; color: #8A6D00; font-size: .85rem; font-weight: 800; }
.yns-post__answer p:last-child { margin: 0; padding: 0; font-size: 1.08rem; line-height: 1.8; }
.yns-post__toc { margin: 0 0 2rem; padding: 1.1rem 1.25rem; border-radius: 16px; background: var(--bl-soft); }
.yns-post__toc-title { margin: 0 0 .5rem; padding: 0; color: var(--bl-blue); font-weight: 800; }
.yns-post__toc ol { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: .35rem; }
.yns-post__toc a { color: var(--bl-ink); text-decoration: none; }
.yns-post__toc a:hover { color: var(--bl-blue); text-decoration: underline; }
.yns-post__toc a:focus-visible { outline: 2px solid var(--bl-blue); outline-offset: 2px; border-radius: 4px; }

/* Typography */
.yns-post__content { font-size: var(--gvid-yn-fs-body, 1.06rem); line-height: 1.9; }
.yns-post__content > * + * { margin-top: 1rem; }
.yns-post__content p { margin: 0; padding: 0; }
html body .yns-post__content h2 { margin: 2.4rem 0 .75rem; padding: 0; color: var(--bl-ink); font-size: var(--gvid-yn-fs-h3, clamp(1.45rem, 2.4vw, 1.9rem)); font-weight: 800; line-height: 1.3; letter-spacing: -.02em; scroll-margin-top: 100px; }
html body .yns-post__content h3 { margin: 1.6rem 0 .5rem; padding: 0; color: var(--bl-ink); font-size: var(--gvid-yn-fs-h5, 1.25rem); font-weight: 800; line-height: 1.35; }
.yns-post__content ul, .yns-post__content ol { margin-inline: 0; padding-inline-start: 1.4rem; display: grid; gap: .4rem; }
.yns-post__content li::marker { color: var(--bl-blue); font-weight: 800; }
.yns-post__content a { color: var(--bl-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.yns-post__content a:hover { text-decoration: none; }
.yns-post__content strong { color: var(--bl-ink); }
.yns-post__content .yns-note {
	padding: 1rem 1.15rem; border-radius: 14px;
	background: color-mix(in srgb, var(--yn-orange, #FF7515) 10%, #FFFFFC);
	border-inline-start: 4px solid var(--yn-orange, #FF7515);
}

/* FAQ (Rank Math FAQ block → accordion) */
.yns-faq { margin-top: 2.4rem; }
.yns-faq__item { border-bottom: 1px solid var(--bl-line); }
.yns-faq__item summary {
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
	padding: 1rem 0; color: var(--bl-ink); font-weight: 800; cursor: pointer; list-style: none;
}
.yns-faq__item summary::-webkit-details-marker { display: none; }
.yns-faq__item summary::after { content: "+"; flex: none; color: var(--bl-blue); font-size: 1.4rem; line-height: 1; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.yns-faq__item[open] summary::after { transform: rotate(45deg); }
.yns-faq__item summary:focus-visible { outline: 2px solid var(--bl-blue); outline-offset: 2px; border-radius: 4px; }
.yns-faq__a { padding: 0 0 1rem; }
.yns-faq__a p { margin: 0; }

/* Products from the article */
.yns-post__products, .yns-post__related { max-width: 1240px; margin: clamp(48px, 6vw, 80px) auto 0; }
.yns-post__eyebrow { margin: 0 0 .25rem; padding: 0; color: var(--yn-orange, #FF7515); font-weight: 800; text-align: center; }
html body .yns-post__products h2, html body .yns-post__related h2 { margin: 0 0 clamp(18px, 2.5vw, 32px); padding: 0; color: var(--bl-ink); font-size: var(--gvid-yn-fs-h2, clamp(1.6rem, 3vw, 2.4rem)); font-weight: 800; letter-spacing: -.03em; text-align: center; }
/* 2–4 products, centred as one row. */
html body .yns-post__products ul.products.yn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 290px)); justify-content: center; gap: clamp(12px, 1.6vw, 24px); margin: 0; }
@media (max-width: 600px) { html body .yns-post__products ul.products.yn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Cards ---------- */
.yns-blog__list { padding-top: clamp(32px, 5vw, 56px); }
.yns-blog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); max-width: 1240px; margin: 0 auto; }
@media (max-width: 980px) { .yns-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .yns-blog__grid { grid-template-columns: minmax(0, 1fr); } }
.yns-blog__card-link {
	display: flex; flex-direction: column; height: 100%;
	border-radius: 24px; overflow: hidden; background: #FFFFFC; color: inherit; text-decoration: none;
	box-shadow: 0 1px 2px rgba(2, 40, 80, .05), 0 14px 34px -18px rgba(2, 40, 80, .3);
	transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.yns-blog__card-link:hover { transform: translateY(-4px); }
.yns-blog__card-link:focus-visible { outline: 3px solid var(--bl-blue); outline-offset: 3px; }
.yns-blog__card-link:active { transform: translateY(-1px); }
.yns-blog__card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bl-soft); }
.yns-blog__card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.yns-blog__card-link:hover .yns-blog__card-media img { transform: scale(1.04); }
.yns-blog__card-body { display: flex; flex-direction: column; gap: .45rem; padding: 1.1rem 1.2rem 1.3rem; flex: 1; }
.yns-blog__card-cat { color: var(--yn-orange, #FF7515); font-size: .85rem; font-weight: 800; }
.yns-blog__card-title { color: var(--bl-ink); font-size: 1.2rem; font-weight: 800; line-height: 1.35; }
.yns-blog__card-excerpt { color: var(--bl-text); font-size: .95rem; line-height: 1.7; }
.yns-blog__card-meta { margin-top: auto; color: var(--bl-muted); font-size: .85rem; }
.yns-blog__empty { text-align: center; }
.yns-blog__pages { margin-top: 2rem; text-align: center; }

@media (prefers-reduced-motion: reduce) {
	.yns-blog__card-link, .yns-blog__card-media img, .yns-faq__item summary::after { transition: none; }
}