/* ==========================================================================
   Blog list (Figma 417:41340 desktop / 536:31009 mobile)
   Uses the header's 100px side margins (content 1720px @1920):
   category column 378px on the right, 3-column card grid on the left.
   ========================================================================== */

.blog { padding: 174px 0 118px; }

.blog__wrap {
	max-width: calc(1720px + 2 * var(--gutter-header));
	margin-inline: auto;
	padding-inline: var(--gutter-header);
}

/* ---------- Heading ---------- */
.blog__title { font-size: clamp(32px, 2.71vw, 52px); font-weight: 500; line-height: 1.2; }
.blog__intro { margin-top: 23px; font-size: clamp(16px, 1.04vw, 20px); line-height: 37px; }

/* ---------- Layout: categories (right) + grid ---------- */
.blog__layout {
	display: grid;
	grid-template-columns: clamp(260px, 19.7vw, 378px) minmax(0, 1fr);
	column-gap: clamp(30px, 3.02vw, 58px);
	align-items: start;
	margin-top: 55px;
}
.blog__aside { position: sticky; top: 110px; }

/* Category list */
.blog-cats__list { border-top: 1px solid rgba(20, 24, 52, .1); }
.blog-cats__item { border-bottom: 1px solid rgba(20, 24, 52, .1); }
.blog-cats__link {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	min-height: 70px;
	font-size: 20px; font-weight: 500; line-height: 1.2;
	transition: color .25s;
}
.blog-cats__item.is-active .blog-cats__link,
.blog-cats__link:hover { color: var(--c-green); }
.blog-cats__icon { position: relative; flex: none; width: 25px; height: 25px; transition: transform .35s var(--ease-out); }
.blog-cats__icon img { position: absolute; left: -7.14px; top: -2.14px; width: 39.29px; height: 39.29px; max-width: none; }
.blog-cats__link:hover .blog-cats__icon { transform: translateX(-4px); }

/* Mobile dropdown (hidden on desktop) */
.blog-filter { display: none; }

/* ---------- Card grid ---------- */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 23px 20px;
}
.blog-grid > li { display: flex; }

.blog-card {
	flex: 1;
	border-radius: var(--radius-card);
	background: #fff;
	box-shadow: 0 4px 30px rgba(26, 107, 67, .1);
}
.blog-card.sv-lift:hover { box-shadow: 0 18px 40px rgba(26, 107, 67, .16); }
.blog-card__link { display: flex; flex-direction: column; height: 100%; padding: 19px 18px 33px; }

.blog-card__media {
	position: relative;
	aspect-ratio: 379 / 250;
	border-radius: var(--radius-card);
	overflow: hidden;
	isolation: isolate;
}
.blog-card__img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .8s var(--ease-out);
}
.blog-card:hover .blog-card__img { transform: scale(1.07); }

/* "5 דק׳" read-time chip, bottom-right of the image */
.blog-card__chip {
	position: absolute; inset-inline-start: 18px; bottom: 14px;
	display: inline-flex; align-items: center; gap: 7px;
	height: 28px; padding-inline: 14px 13px;
	border-radius: 50px; background: #fff;
	font-size: 16px; font-weight: 500; line-height: 1;
}
.blog-card__chip img { width: 20px; height: auto; }

.blog-card__head {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	margin-top: 20px;
	padding-inline-start: 9px;
	padding-bottom: 21px;
	border-bottom: 1px solid var(--c-line);
}
.blog-card__title { font-size: clamp(18px, 1.15vw, 22px); font-weight: 500; line-height: 1.2; max-width: 321px; }
.blog-card__arrow { position: relative; flex: none; width: 25px; height: 25px; transition: transform .4s var(--ease-out); }
.blog-card__arrow img { position: absolute; left: -7.14px; top: -2.14px; width: 39.29px; height: 39.29px; max-width: none; }
.blog-card:hover .blog-card__arrow { transform: translateX(-5px); }

.blog-card__excerpt {
	margin-top: 20px;
	padding-inline: 9px 33px;
	font-size: clamp(16px, 1.04vw, 20px); line-height: 1.2;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}

/* ---------- Fluid in-between ---------- */
@media (max-width: 1399px) {
	.blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet (iPad landscape): categories become a horizontal chip row above a 2-column grid */
@media (min-width: 901px) and (max-width: 1199px) {
	.blog__layout { display: block; margin-top: 40px; }
	.blog__aside { position: static; }
	.blog-cats__list { display: flex; flex-wrap: wrap; gap: 10px; border: 0; }
	.blog-cats__item { border: 0; }
	.blog-cats__link {
		min-height: 44px; padding-inline: 20px;
		border: 1px solid rgba(20, 24, 52, .15); border-radius: 50px; background: #fff;
		font-size: 17px;
		transition: color .25s, background-color .25s, border-color .25s;
	}
	.blog-cats__icon { display: none; }
	.blog-cats__item.is-active .blog-cats__link { background: var(--c-green); border-color: var(--c-green); color: #fff; }
	.blog-cats__link:hover { border-color: var(--c-green); }
	.blog-grid { margin-top: 36px; }
}

/* ---------- Mobile (390 design) ---------- */
@media (max-width: 900px) {
	.blog { padding: 154px 0 71px; }
	.blog__wrap { padding-inline: 35px; }
	.blog__head { text-align: center; }
	.blog__title { max-width: 310px; margin-inline: auto; font-size: 32px; }
	.blog__intro { max-width: 310px; margin: 20px auto 0; font-size: 16px; line-height: 28px; }

	.blog__layout { display: block; margin-top: 24px; }
	.blog__aside { position: static; }
	.blog-cats { display: none; }

	.blog-filter { display: block; border-block: 1px solid rgba(20, 24, 52, .1); }
	.blog-filter__toggle {
		display: flex; align-items: center; justify-content: space-between;
		min-height: 57px;
		font-size: 18px; font-weight: 500; line-height: 1.2;
		cursor: pointer; list-style: none;
	}
	.blog-filter__toggle::-webkit-details-marker { display: none; }
	.blog-filter__icon { position: relative; width: 25px; height: 25px; transform: rotate(-90deg); transition: transform .35s var(--ease-out); }
	.blog-filter__icon img { position: absolute; left: -7.14px; top: -2.14px; width: 39.29px; height: 39.29px; max-width: none; }
	.blog-filter[open] .blog-filter__icon { transform: rotate(90deg); }
	.blog-filter__list { border-top-color: rgba(20, 24, 52, .1); }
	.blog-filter__list .blog-cats__item:last-child { border-bottom: 0; }
	.blog-filter__list .blog-cats__link { min-height: 56px; font-size: 16px; padding-inline-start: 12px; }

	.blog-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 33px auto 0; max-width: 320px; }
	.blog-card__link { padding: 9px 9px 34px 11px; }
	.blog-card__media { aspect-ratio: 300 / 198; border-radius: 15.8px; }
	.blog-card__chip { inset-inline-start: 14px; bottom: 11px; height: 22px; gap: 5px; padding-inline: 11px 10px; font-size: 12.66px; }
	.blog-card__chip img { width: 15.8px; }
	.blog-card__head { margin-top: 18px; padding-inline: 14px 1px; padding-bottom: 18px; border-bottom: 0; position: relative; align-items: flex-start; }
	.blog-card__head::after { content: ""; position: absolute; inset-inline: 11px 9px; bottom: 0; height: 1px; background: var(--c-line); }
	.blog-card__title { font-size: 18px; max-width: 224px; }
	.blog-card__excerpt { margin-top: 18px; padding-inline: 14px 6px; font-size: 16px; }
}

/* Small tablets (iPad portrait): keep the mobile dropdown, show two card columns */
@media (min-width: 600px) and (max-width: 900px) {
	.blog__title, .blog__intro { max-width: 560px; }
	.blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 700px; }
}