/* =========================================================================
   03-cards-archive.css
   Controls the card grid used by:
   [iskt_latest_tours] [iskt_latest_vehicles]
   [iskt_tour_archive] [iskt_vehicle_archive] [iskt_hotel_archive]
   [iskt_guide_archive] [iskt_photography_archive]

   Uses flexbox (not CSS grid) on purpose: with only one or two items
   published, a fixed 3-column grid reserves three empty columns and
   leaves a big blank gap next to the card. Flex-wrap lets cards size
   naturally and simply wrap onto new rows as more are added.
   ========================================================================= */

.iskt-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin: 32px 0;
}

.iskt-card {
	flex: 1 1 300px;
	max-width: 380px;
	background: var(--iskt-white, #FFFFFF);
	border: 1px solid var(--iskt-line);
	border-radius: var(--iskt-radius, 14px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 3px rgba(43,42,37,.04);
	transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease;
}
.iskt-card:hover { transform: translateY(-5px); box-shadow: 0 24px 44px rgba(43,42,37,.12); border-color: rgba(198,162,94,.55); }

.iskt-card-media { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--iskt-ivory, #F4EFE4); position: relative; }
.iskt-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; border: none; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.iskt-card:hover .iskt-card-media img { transform: scale(1.06); }
.iskt-card-media-round { border-radius: 50%; width: 132px; height: 132px; margin: 30px auto 0; aspect-ratio: 1/1; border: 3px solid var(--iskt-white, #FFFFFF); box-shadow: 0 0 0 1px var(--iskt-line); }
.iskt-card-noimg {
	display: flex; align-items: center; justify-content: center; height: 100%;
	color: var(--iskt-gold-deep, #9C7B3E); font-family: var(--iskt-serif, 'Fraunces', serif); font-style: italic; font-size: 15px;
	background: var(--iskt-ivory, #F4EFE4);
}

.iskt-card-body { padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.iskt-card-eyebrow { margin-bottom: 4px; }
.iskt-card-title { margin: 2px 0 0; font-family: var(--iskt-serif, 'Fraunces', serif); font-size: 21px; font-weight: 500; line-height: 1.28; }
.iskt-card-title a { color: var(--iskt-ink, #2B2A25); text-decoration: none; }
.iskt-card-title a:hover { color: var(--iskt-gold-deep, #9C7B3E); }
.iskt-card-desc { margin: 4px 0 2px; color: var(--iskt-ink-soft, #756F62); font-size: 14px; line-height: 1.65; }

.iskt-card-meta {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 0;
	font-size: 12.5px; font-weight: 600; letter-spacing: .03em;
	color: var(--iskt-ink-soft, #756F62);
	margin-top: 8px;
}
.iskt-card-meta span { position: relative; padding: 0 12px 0 0; }
.iskt-card-meta span + span { padding-left: 12px; }
.iskt-card-meta span + span::before { content: "·"; position: absolute; left: 0; color: var(--iskt-gold, #C6A25E); }

.iskt-card-footer {
	margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--iskt-line);
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

@media (max-width: 600px) {
	.iskt-card { flex-basis: 100%; max-width: 100%; }
}