/* Casa — nội dung: bài viết, sự kiện, trang tĩnh, danh sách, 404. */

.casa-main {
	box-sizing: border-box;
	max-width: 1250px;
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
}

/* Khung trắng bo góc (bài, sự kiện, trang tĩnh) */
.casa-card {
	box-sizing: border-box;
	margin: 0;
	padding: 40px 32px 48px;
	border: 1px solid rgb(37 124 132 / 10%);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 12px 36px rgb(27 98 105 / 8%);
	color: var(--wp--preset--color--ink);
	line-height: 1.75;
}

.casa-card__feature {
	max-width: 960px;
	margin: 0 auto 32px;
}

.casa-card__feature img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	border-radius: 12px;
	box-shadow: 0 14px 34px rgb(27 98 105 / 16%);
}

.casa-entry-title {
	max-width: 24em;
	margin: 0 auto 16px;
	color: var(--wp--preset--color--teal-title);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-wrap: balance;
}

.casa-card--event .casa-entry-title {
	font-size: 30px;
	font-weight: 600;
}

.casa-entry-content {
	font-size: var(--casa-text);
}

.casa-entry-content img {
	max-width: 100%;
	height: auto;
}

/*
 * Nhịp đọc: tiêu đề cách đoạn trên 1.6em, dính nội dung bên dưới 0.7em;
 * đoạn cách nhau 1em.
 */
.casa-entry-content :is(h2, h3, h4) {
	margin-block: 1.6em 0.7em;
}

.casa-entry-content > :first-child {
	margin-block-start: 0;
}

.casa-entry-content p {
	margin-block: 0 1em;
}

/* Meta bài viết (Danh mục | Ngày đăng): một dòng, kẹp giữa hai đường kẻ */
.casa-post-meta {
	max-width: 720px;
	margin: 0 auto 8px;
	padding-block: 12px;
	border-block: 1px solid rgb(37 124 132 / 16%);
	color: var(--wp--preset--color--ink-soft);
	font-size: 16px;
	text-align: center;
}

.casa-post-meta > * {
	display: inline;
	margin: 0;
}

.casa-post-meta a {
	color: var(--wp--preset--color--teal-800);
}

.casa-post-date__label > span {
	margin-inline: 3px;
}

/* Nút chia sẻ */
.casa-post-share {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	justify-content: center;
	margin-block-end: 32px;
}

.casa-post-share a {
	display: flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	color: var(--wp--preset--color--teal-800);
	font-size: 16px;
	text-decoration: none;
}

.casa-post-share a:hover,
.casa-post-share a:focus {
	color: var(--wp--preset--color--teal-title);
	text-decoration: underline;
}

/* Tiêu đề trang lưu trữ */
.casa-archive-title {
	margin: 0 0 var(--wp--preset--spacing--55);
	color: var(--wp--preset--color--teal-title);
	font-size: 28px;
	font-weight: 700;
	text-align: center;
	text-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
	text-transform: uppercase;
}

/* Lưới thẻ bài viết (danh mục, tìm kiếm, blog): 2 cột, 1 cột < 600px */
.casa-cards .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.casa-cards .wp-block-post-template > li {
	display: flex;
	min-width: 0;
	margin: 0;
}

/*
 * Thẻ bài viết (danh mục, tìm kiếm, blog): giống khối bài ở trang chủ. Cả
 * thẻ có viền teal nhạt, bo 12px, bóng mềm; ảnh sát mép trên; chữ nằm
 * trong phần đệm 20px (16px trên điện thoại).
 */
.casa-card-item {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid rgb(37 124 132 / 15%);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 6px 18px rgb(0 0 0 / 8%);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

@media (hover: hover) {

	.casa-card-item:hover {
		box-shadow: 0 12px 28px rgb(0 0 0 / 14%);
		transform: translateY(-4px);
	}
}

.casa-card-item__thumb {
	aspect-ratio: 16 / 9;
	margin: 0;
	overflow: hidden;
}

.casa-card-item__thumb a {
	display: block;
	height: 100%;
}

.casa-card-item__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.casa-card-item__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--wp--preset--spacing--35);
}

/* Tiêu đề không gạch chân; gạch khi hover / focus. */
.casa-card-item__title {
	margin: 0 0 var(--wp--preset--spacing--25);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.casa-card-item__title a {
	color: var(--wp--preset--color--teal-700);
	text-decoration: none;
}

.casa-card-item__title a:hover,
.casa-card-item__title a:focus-visible {
	text-decoration: underline;
}

.casa-card-item__excerpt {
	margin: 0;
	color: #000;
	font-size: 15px;
	line-height: 1.6;
}

.casa-card-item__excerpt p {
	margin: 0;
}

/* Phân trang */
.casa-pagination {
	margin-block-start: var(--wp--preset--spacing--60);
	gap: var(--wp--preset--spacing--20);
	justify-content: center;
}

.casa-pagination a,
.casa-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	padding-inline: 8px;
}

/* 404 */
.casa-404 {
	display: grid;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

.casa-404__code {
	margin: 0;
	color: #bdbdbd;
	font-size: 80px;
	font-weight: 700;
	line-height: 1;
}

.casa-404__title {
	margin: 0 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--ink);
	font-size: 28px;
}

@media (min-width: 600px) {

	.casa-404 {
		grid-template-columns: 200px minmax(0, 1fr);
		align-items: start;
	}

	.casa-404__code {
		font-size: 120px;
	}
}

@media (max-width: 1023px) {

	.casa-entry-title {
		font-size: 30px;
	}

	.casa-card--event .casa-entry-title {
		font-size: 26px;
	}

	.casa-post-meta {
		font-size: 15px;
	}

	.casa-post-share a {
		font-size: 14px;
	}
}

@media (max-width: 599px) {

	.casa-card {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}

	.casa-entry-title {
		font-size: 26px;
	}

	.casa-card--event .casa-entry-title {
		font-size: 24px;
		font-weight: 700;
	}

	.casa-card__feature {
		margin-block-end: 24px;
	}

	.casa-cards .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}

	.casa-card-item__body {
		padding: var(--wp--preset--spacing--30);
	}

	.casa-archive-title {
		margin-block-end: var(--wp--preset--spacing--45);
	}
}

@media (prefers-reduced-motion: reduce) {

	.casa-card-item,
	.casa-card-item:hover {
		transform: none;
		transition: none;
	}
}

/*
 * Thân bài viết / sự kiện: cột đọc ~72 ký tự, chữ 18px, dòng cao 1.8, căn
 * trái (không căn đều để tránh khoảng trắng loang trong tiếng Việt). Ảnh và
 * bộ sưu tập rộng hơn cột chữ có chủ đích.
 */
:is(.casa-card--post, .casa-card--event) .casa-entry-content {
	line-height: 1.8;
}

:is(.casa-card--post, .casa-card--event) .casa-entry-content > :is(p, h2, h3, h4, ul, ol, .wp-block-quote, .wp-block-heading) {
	max-width: 720px;
	margin-inline: auto;
}

:is(.casa-card--post, .casa-card--event) .casa-entry-content p {
	margin-block: 0 1.2em;
}

:is(.casa-card--post, .casa-card--event) .casa-entry-content :is(h2, h3, h4) {
	color: var(--wp--preset--color--teal-card);
	line-height: 1.35;
}

:is(.casa-card--post, .casa-card--event) .casa-entry-content :is(strong, b) {
	color: #333;
}

:is(.casa-card--post, .casa-card--event) .casa-entry-content a {
	color: var(--wp--preset--color--teal-800);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

:is(.casa-card--post, .casa-card--event) .casa-entry-content ul {
	padding-inline-start: 0;
	list-style: none;
}

:is(.casa-card--post, .casa-card--event) .casa-entry-content ul > li {
	position: relative;
	padding-inline-start: 1.5em;
	margin-block-end: 0.5em;
}

:is(.casa-card--post, .casa-card--event) .casa-entry-content ul > li::before {
	content: "";
	position: absolute;
	inset-block-start: 0.7em;
	inset-inline-start: 0.3em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--teal-600);
}

:is(.casa-card--post, .casa-card--event) .casa-entry-content ol {
	padding-inline-start: 1.6em;
}

:is(.casa-card--post, .casa-card--event) .casa-entry-content .wp-block-quote {
	margin-block: 2em;
	padding: 16px 24px;
	border-inline-start: 4px solid var(--wp--preset--color--teal-600);
	border-radius: 0 12px 12px 0;
	background: var(--wp--preset--color--cream);
	font-size: 1.15em;
	font-style: italic;
}

:is(.casa-card--post, .casa-card--event) .casa-entry-content .wp-block-quote p:last-child {
	margin-block-end: 0;
}

/* Ảnh lẻ trong bài: bo 12px, bóng mềm tông teal, rộng bằng cột chữ. */
:is(.casa-card--post, .casa-card--event) .casa-entry-content :is(.wp-block-image, .wp-caption) {
	max-width: 860px;
	margin: 2em auto;
}

:is(.casa-card--post, .casa-card--event) .casa-entry-content :is(.wp-block-image, .wp-caption) img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	border-radius: 12px;
	box-shadow: 0 10px 28px rgb(27 98 105 / 14%);
}

:is(.casa-card--post, .casa-card--event) .casa-entry-content :is(figcaption, .wp-caption-text) {
	margin-block-start: 0.75em;
	color: var(--wp--preset--color--ink-soft);
	font-size: 15px;
	text-align: center;
}

/*
 * Bộ sưu tập ảnh trong bài (gallery cổ điển của WordPress): lưới đều 3 cột,
 * 2 cột trên điện thoại, ảnh crop 3:4 bo 12px, bóng nhẹ.
 */
.casa-entry-content .gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	max-width: 1100px;
	margin: 2.5em auto;
}

.casa-entry-content .gallery.gallery-columns-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.casa-entry-content .gallery.gallery-columns-4,
.casa-entry-content .gallery.gallery-columns-5 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.casa-entry-content .gallery-item {
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border-radius: 12px;
	box-shadow: 0 8px 22px rgb(27 98 105 / 14%);
}

.casa-entry-content .gallery-icon {
	line-height: 0;
}

.casa-entry-content .gallery-icon a {
	display: block;
}

.casa-entry-content .gallery-icon img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.casa-entry-content .gallery-icon.landscape img {
	aspect-ratio: 4 / 3;
}

@media (hover: hover) {

	.casa-entry-content .gallery-item:hover img {
		transform: scale(1.03);
	}
}

@media (max-width: 599px) {

	.casa-entry-content .gallery,
	.casa-entry-content .gallery.gallery-columns-4,
	.casa-entry-content .gallery.gallery-columns-5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {

	.casa-entry-content .gallery-icon img {
		transition: none;
	}

	.casa-entry-content .gallery-item:hover img {
		transform: none;
	}
}

/*
 * Form liên hệ ở khổ hẹp: ô Cloudflare Turnstile rộng cố định 300px nên
 * tràn 3px ở 360px (cuộn ngang). Giảm lề trong thẻ form và thu nhỏ ô xác
 * minh cho vừa (zoom đổi cả kích thước bố cục, không để lại khoảng trống).
 */
@media (max-width: 399px) {

	.casa-form-wrapper {
		padding-inline: 16px;
	}

	.casa-form__turnstile {
		zoom: 0.85;
	}
}

@media (max-width: 339px) {

	.casa-form__turnstile {
		zoom: 0.7;
	}
}