/* ================================================================
   POST GRID SHOWCASE — Front-end Styles
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@400;500&display=swap');

/* ---------- Wrapper ---------- */
.pgs-grid-wrapper {
	--pgs-accent:     #e63946;
	--pgs-bg:         #ffffff;
	--pgs-card-bg:    #ffffff;
	--pgs-text:       #1a1a2e;
	--pgs-muted:      #6b7280;
	--pgs-border:     #e5e7eb;
	--pgs-radius:     14px;
	--pgs-shadow:     0 4px 24px rgba(0,0,0,.07);
	--pgs-shadow-hov: 0 12px 40px rgba(0,0,0,.14);
	--pgs-transition: .32s cubic-bezier(.4,0,.2,1);

	padding: 2.5rem 0;
	width: 100%;
}

/* ---------- Grid ---------- */
.pgs-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.25rem;
}

@media (max-width: 900px) {
	.pgs-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (max-width: 560px) {
	.pgs-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ---------- Card ---------- */
.pgs-card {
	background:    var(--pgs-card-bg);
	border-radius: var(--pgs-radius);
	box-shadow:    var(--pgs-shadow);
	overflow:      hidden;
	transition:    box-shadow var(--pgs-transition), transform var(--pgs-transition);
	border:        1px solid var(--pgs-border);
	will-change:   transform;
}

.pgs-card:hover {
	box-shadow: var(--pgs-shadow-hov);
	transform:  translateY(-5px);
}

/* Remove default anchor styles */
.pgs-card__link {
	text-decoration: none;
	color:           inherit;
	display:         flex;
	flex-direction:  column;
	height:          100%;
}

/* ---------- Thumbnail ---------- */
.pgs-card__thumb {
	position:      relative;
	overflow:      hidden;
	aspect-ratio:  16 / 9;
	background:    #f3f4f6;
}

.pgs-card__thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform var(--pgs-transition);
}

.pgs-card:hover .pgs-card__thumb img {
	transform: scale(1.06);
}

/* Overlay shimmer on hover */
.pgs-card__thumb::after {
	content:    '';
	position:   absolute;
	inset:      0;
	background: linear-gradient(160deg, transparent 60%, rgba(0,0,0,.18));
	opacity:    0;
	transition: opacity var(--pgs-transition);
}
.pgs-card:hover .pgs-card__thumb::after {
	opacity: 1;
}

/* ---------- Category badge ---------- */
.pgs-card__badge {
	position:      absolute;
	top:           .75rem;
	left:          .75rem;
	background:    var(--pgs-accent);
	color:         #fff;
	font-family:   'DM Sans', sans-serif;
	font-size:     .7rem;
	font-weight:   500;
	letter-spacing:.06em;
	text-transform:uppercase;
	padding:       .25rem .65rem;
	border-radius: 4px;
	line-height:   1.4;
	pointer-events:none;
}

/* ---------- Body ---------- */
.pgs-card__body {
	padding:        1.35rem 1.4rem 1.5rem;
	display:        flex;
	flex-direction: column;
	flex:           1;
	gap:            .55rem;
}

/* ---------- Date ---------- */
.pgs-card__date {
	display:     flex;
	align-items: center;
	gap:         .38rem;
	font-family: 'DM Sans', sans-serif;
	font-size:   .78rem;
	color:       var(--pgs-muted);
	line-height: 1;
}

.pgs-card__date svg {
	width:  13px;
	height: 13px;
	flex-shrink: 0;
	color: var(--pgs-accent);
}

/* ---------- Title ---------- */
.pgs-card__title {
	font-family:  'Playfair Display', Georgia, serif;
	font-size:    1.13rem;
	font-weight:  700;
	color:        var(--pgs-text);
	line-height:  1.35;
	margin:       0;
	transition:   color var(--pgs-transition);
	/* clamp to 2 lines */
	display:             -webkit-box;
	-webkit-line-clamp:  2;
	-webkit-box-orient:  vertical;
	overflow:            hidden;
}

.pgs-card:hover .pgs-card__title {
	color: var(--pgs-accent);
}

/* ---------- Excerpt ---------- */
.pgs-card__excerpt {
	font-family:         'DM Sans', sans-serif;
	font-size:           .875rem;
	color:               var(--pgs-muted);
	line-height:         1.6;
	margin:              0;
	flex:                1;
	/* clamp to 3 lines */
	display:             -webkit-box;
	-webkit-line-clamp:  3;
	-webkit-box-orient:  vertical;
	overflow:            hidden;
}

/* ---------- CTA row ---------- */
.pgs-card__cta {
	display:      flex;
	align-items:  center;
	gap:          .35rem;
	font-family:  'DM Sans', sans-serif;
	font-size:    .82rem;
	font-weight:  500;
	color:        var(--pgs-accent);
	margin-top:   .25rem;
	transition:   gap var(--pgs-transition);
}

.pgs-card__cta svg {
	width:      14px;
	height:     14px;
	transition: transform var(--pgs-transition);
}

.pgs-card:hover .pgs-card__cta {
	gap: .6rem;
}

.pgs-card:hover .pgs-card__cta svg {
	transform: translateX(3px);
}

/* ---------- Empty state ---------- */
.pgs-empty {
	text-align:  center;
	padding:     3rem 1rem;
	color:       #9ca3af;
	font-family: 'DM Sans', sans-serif;
}