/* =========================================================
   Media Center / Blog page (en/blog.html, ar/blog.html)
   Recreated from retal.com.sa/en/blog/ (Elementor 20917 / 29828)
   ========================================================= */

/* ---------------- News grid section (26237b5) ---------------- */
.blog-news { background-color: #F8F8F8; padding: 100px 0; overflow: hidden; }
.blog-news .section-label { font-size: 15px; color: #2C2C2C; }
.blog-news .section-label i { color: #000; font-size: 14px; }
.blog-title {
	font-family: 'Lucky Beauty new', var(--font-en); font-size: 30px; font-weight: 600; line-height: 45px; color: #2C2C2C;
	margin-top: -10px;
}
.blog-title--mobile { display: none; }
.blog-title .brown { color: #85553A; }

/* Grid (posts-extra 0c2ebad: 3 / 2 / 1 columns, 10px gutter, square thumbs) */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 30px; }
.news-card { margin: 0; }
.news-card__media {
	display: block; position: relative; overflow: hidden; background: #2C2C2C;
	transition: transform .3s linear;
}
.news-card__media:hover { transform: scale(.98); }
.news-card__thumb { position: relative; width: 100%; padding-bottom: 100%; overflow: hidden; }
.news-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.news-card__overlay {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to bottom, rgba(11, 15, 1, 0) 54%, rgba(11, 15, 1, .2) 63%, rgba(22, 9, 5, 1) 100%);
}
.news-card__content {
	position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
	padding: 35px; color: #fff; text-align: start;
}
.news-card__metas { margin-bottom: 6px; text-align: center; }
/* Live site: the date pill is styled (top-right, white border, 32px radius) and then hidden with display:none — kept identical */
.news-card__date {
	position: absolute; top: 20px; right: 20px; border: 1px solid #fff; padding: 10px 20px; border-radius: 32px;
	font-family: var(--font-body); font-size: 13px; color: #fff;
	display: none;
}
.news-card__sep { margin: 0 4px; }
.news-card__title {
	font-family: 'Lucky Beauty new', var(--font-en); font-size: 17px; font-weight: 600; line-height: 25px; color: #fff; margin: 0;
	transition: transform 1s;
}

/* Infinite-scroll status + Load more button */
.news-load-status { text-align: center; margin-top: 30px; font-family: var(--font-body); font-size: 15px; color: #7A7A7A; }
.news-load-status[hidden] { display: none; }
.news-load { margin-top: 50px; display: flex; justify-content: center; }
.news-load[hidden] { display: none; }
.news-load__btn {
	position: relative; display: inline-flex; align-items: center; padding: 0 4px;
	font-family: 'Lucky Beauty new', var(--font-en); font-size: 17px; font-weight: 400; color: #000;
	background-color: transparent; border: 1px solid #000; border-radius: 0; text-decoration: none;
	transition: all 1.5s cubic-bezier(.665, .005, .165, 1);
}
.news-load__btn .link-area { display: block; padding: 12px 40px; }
.news-load__btn .link-text { display: block; transition: .2s all; }
.news-load__btn .link-circle {
	opacity: 0; position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin-left: -24px; margin-top: -24px;
	border-radius: 50px; background-color: rgba(16, 16, 16, .1); transition: all .5s ease; pointer-events: none;
}
.news-load__btn:hover .link-circle { opacity: 1; }

/* ---------------- Register your interest (template 3661) ---------------- */
/* Base styles come from .prop-register / .prop-form in style.css; the blog variant is a 50% column card */
.blog-register { min-height: 650px; padding: 100px 0; display: flex; align-items: center; }
.blog-register .container { display: flex; justify-content: flex-end; }
.blog-register .prop-register__card { width: 50%; max-width: none; background: #2C2C2C; padding: 30px; }
.blog-register .prop-register__title { font-size: 30px; line-height: 45px; margin-bottom: 20px; }
.blog-register .prop-register__text { font-size: 15px; margin-bottom: 20px; }
.blog-register .prop-register__note { margin-top: 30px; }
.prop-form select {
	width: 100%; font-family: var(--font-en); font-size: 15px; color: #fff;
	background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .45); border-radius: 0; padding: 12px 15px; outline: 0;
	-webkit-appearance: none; appearance: none; cursor: pointer; transition: border-color .3s;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.5'/></svg>");
	background-repeat: no-repeat; background-position: right 12px center;
}
.prop-form select:focus { border-bottom-color: #fff; }
.prop-form select option { color: #2C2C2C; background: #fff; }
.prop-form select.is-invalid { border-bottom-color: #d9534f; }
.prop-register__text .lucky { color: #85553A !important; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1200px) {
	.blog-news { padding: 50px 20px 80px; }
	.blog-title { font-size: 25px; line-height: 32px; }
	.news-grid { gap: 12px; }
}
@media (max-width: 1024px) {
	.news-grid { grid-template-columns: repeat(2, 1fr); }
	.blog-register .prop-register__card { width: 70%; }
}
@media (max-width: 767px) {
	.blog-news { padding: 50px 20px; }
	.blog-title--desktop { display: none; }
	.blog-title--mobile { display: block; font-size: 20px; line-height: 30px; }
	.news-grid { grid-template-columns: 1fr; gap: 10px; }
	.news-load__btn { font-size: 13px; }
	.blog-register { min-height: 0; padding: 60px 20px; background-attachment: scroll; }
	.blog-register .prop-register__card { width: 100%; padding: 30px 20px; }
	.blog-register .prop-register__title { font-size: 20px; line-height: 30px; }
}

/* ---------------- RTL (Arabic) ---------------- */
.rtl .blog-news .section-label { font-family: var(--font-body); font-size: 15px; text-transform: uppercase; }
.rtl .blog-title { font-family: var(--font-head); font-weight: 700; }
.rtl .news-card__title { font-family: var(--font-head); font-size: 18px; font-weight: 700; }
.rtl .news-card__date { right: auto; left: 20px; }
.rtl .news-load__btn { font-family: var(--font-head); font-weight: 500; }
.rtl .prop-form select { font-family: var(--font-body); background-position: left 12px center; }
.rtl .blog-register .prop-register__title { font-family: var(--font-head); font-weight: 700; }
@media (max-width: 767px) {
	.rtl .blog-title--desktop { display: block; font-size: 20px; line-height: 32px; }
}