/* =============================================================
   Generic Template — template-generic.css
   Loaded only when template/generic.php is active.
   ============================================================= */

/* ---------------------------------------------------------------
   Shared container & section spacing
   --------------------------------------------------------------- */
.gtpl-page-container {
	background: #fafafa;
}

.gtpl-container {
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
}

.gtpl-section {
	padding-top: 48px;
	padding-bottom: 48px;
}

.gtpl-section-heading {
	font-size:56px;
	text-align: center;
	margin-top: 0;
	margin-bottom: 40px;
}

.gtpl-section-sub-heading {
	text-align: center;
	margin-top: -24px;
	margin-bottom: 40px;
}

.gtpl-cards-header {
	margin-bottom: 8px;
}

/* ---------------------------------------------------------------
   Section 1: Intro
   --------------------------------------------------------------- */
.gtpl-intro-section {
	padding-top: 40px;
	padding-bottom: 40px;
	background: #fafafa;
}

/* Two-column when ad is present */
.gtpl-intro-grid {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.gtpl-intro-grid.has-ad {
	display: grid;
	grid-template-columns: 1fr 300px;
	align-items: start;
	gap: 40px;
}

.gtpl-intro-content {
	min-width: 0;
}

.gtpl-page-title {
	margin-top: 0;
	margin-bottom: 20px;
}

.gtpl-alert-wrap {
	margin-bottom: 24px;
}

.gtpl-intro-rich-text p:last-child {
	margin-bottom: 0;
}

/* Ad column */
.gtpl-intro-ad {
	flex-shrink: 0;
}

/* ---------------------------------------------------------------
   Section 2: Flexible Layouts — shared
   --------------------------------------------------------------- */
.gtpl-layout {
	background: #fafafa;
}

.gtpl-media-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
}

.gtpl-video-wrap {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	overflow: hidden;
	border-radius: 16px;
}

.gtpl-video-iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------------------------------------------------------------
   Layout: Rich Text Only
   --------------------------------------------------------------- */
.gtpl-rich-text-content p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------
   Layout: Media Only
   --------------------------------------------------------------- */
.gtpl-media-only-heading {
	margin-top: 0;
	margin-bottom: 0;
}

.gtpl-media-grid {
	display: grid;
	gap: 24px;
	margin-top: 0;
}

.gtpl-media-cols-1 { grid-template-columns: 1fr; }
.gtpl-media-cols-2 { grid-template-columns: repeat(2, 1fr); }
.gtpl-media-cols-3 { grid-template-columns: repeat(3, 1fr); }
.gtpl-media-cols-4 { grid-template-columns: repeat(4, 1fr); }

.gtpl-media-col {
	min-width: 0;
}

/* ---------------------------------------------------------------
   Layout: Rich Text + Media
   --------------------------------------------------------------- */
.gtpl-rtm-grid {
	display: grid;
	gap: 40px;
	align-items: center;
}

/* Ratio: half (1/2 + 1/2) */
.gtpl-rtm-ratio-half .gtpl-rtm-grid {
	grid-template-columns: 1fr 1fr;
}

/* Ratio: 1/3 text + 2/3 media */
.gtpl-rtm-ratio-third .gtpl-rtm-grid {
	grid-template-columns: 1fr 2fr;
}

/* Ratio: 2/3 text + 1/3 media — media is still second column */
.gtpl-rtm-ratio-two_third .gtpl-rtm-grid {
	grid-template-columns: 2fr 1fr;
}

/* When media is on the left, columns are reversed via grid-auto-flow + order */
.gtpl-rtm-media-left .gtpl-rtm-text  { order: 2; }
.gtpl-rtm-media-left .gtpl-rtm-media { order: 1; }

.gtpl-rtm-text {
	min-width: 0;
}

.gtpl-rtm-text p:last-child {
	margin-bottom: 0;
}

.gtpl-rtm-media {
	min-width: 0;
}

/* ---------------------------------------------------------------
   Layout: Cards
   --------------------------------------------------------------- */
.gtpl-layout-cards.gtpl-cards-bg-default {
	background: #f0f1f3;
}

.gtpl-layout-cards.gtpl-cards-bg-dark_blue_hills {
	background-color: transparent;
	background-image: url('../images/bg-3.png');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	padding-top: 90px;
}

.gtpl-layout-cards.gtpl-cards-bg-dark_blue_hills .gtpl-section-heading,
.gtpl-layout-cards.gtpl-cards-bg-dark_blue_hills .gtpl-section-sub-heading {
	color: #fff;
}

.gtpl-cards-grid {
	display: grid;
	gap: 28px;
}

.gtpl-cards-cols-2 { grid-template-columns: repeat(2, 1fr); }
.gtpl-cards-cols-3 { grid-template-columns: repeat(3, 1fr); }
.gtpl-cards-cols-4 { grid-template-columns: repeat(4, 1fr); }

.gtpl-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0,0,0,.08);
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.gtpl-card:hover {
	box-shadow: 0 6px 24px rgba(0,0,0,.15);
	transform: translateY(-3px);
}

.gtpl-card-image-wrap {
	overflow: hidden;
}

.gtpl-card-image {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	transition: transform 0.3s ease;
}

a.gtpl-card:hover .gtpl-card-image {
	transform: scale(1.04);
}

.gtpl-card-content {
	padding: 20px 22px 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.gtpl-card-body {
	margin: 10px 0 0;
	flex: 1;
}

.gtpl-card--no-body .gtpl-card-content {
	text-align: center;
	justify-content: center;
}

/* ---------------------------------------------------------------
   Section 3: Blog Category
   Markup reuses the home page's `.background-pasport.events.adventures`
   and `.background_card.events-layout.slider` styling (global.css /
   specific.css) so no section-specific rules are needed here.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Section 4: CrowdRiff
   Two separate blocks, matching the home page exactly:
   - Header text reuses `.background-pasport.events.trip.сonversation`
     (global.css / specific.css).
   - The embed reuses `.background-pasport.events.trip.instagramfeeds`,
     which is the section that actually hosts the CrowdRiff embed on
     the home page, with the widget-specific overrides (svg icons,
     .overlayIcon, button.loadMore) it needs.
   --------------------------------------------------------------- */
.gtpl-crowdriff-embed {
	min-height: 300px;
}

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 1024px) {
	.gtpl-cards-cols-4 { grid-template-columns: repeat(2, 1fr); }
	.gtpl-media-cols-4 { grid-template-columns: repeat(2, 1fr); }

	.gtpl-layout-cards.gtpl-cards-bg-dark_blue_hills {
		background-size: 100%;
		padding-top: 50px;
		padding-bottom: 0;
	}
	.gtpl-layout-cards.gtpl-cards-bg-dark_blue_hills .gtpl-container {
		background-color:#183d7c;
		padding-bottom: 36px;
	}
}

@media (max-width: 768px) {
	.gtpl-container {
		padding-left: 24px;
		padding-right: 24px;
	}

	.gtpl-section {
		padding-top: 36px;
		padding-bottom: 36px;
	}
	.gtpl-intro-section {
		padding-top: 0;
	}

	/* Intro: stack on mobile */
	.gtpl-intro-grid.has-ad {
		grid-template-columns: 1fr;
		gap:0;
	}

	.gtpl-intro-ad {
		order: -1; /* ad above content on mobile */
	}

	/* Rich Text + Media: stack */
	.gtpl-rtm-ratio-half .gtpl-rtm-grid,
	.gtpl-rtm-ratio-third .gtpl-rtm-grid,
	.gtpl-rtm-ratio-two_third .gtpl-rtm-grid {
		grid-template-columns: 1fr;
	}

	.gtpl-rtm-media-left .gtpl-rtm-text,
	.gtpl-rtm-media-left .gtpl-rtm-media {
		order: unset;
	}

	/* Media Only: max 2 columns */
	.gtpl-media-cols-3,
	.gtpl-media-cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Cards: max 2 columns */
	.gtpl-cards-cols-3,
	.gtpl-cards-cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media (max-width: 480px) {
	.gtpl-container {
		padding-left: 16px;
		padding-right: 16px; /* override the 24px set at 768px */
	}

	.gtpl-rtm-grid {
		gap: 10px;
	}

	.gtpl-cards-cols-2,
	.gtpl-cards-cols-3,
	.gtpl-cards-cols-4,
	.gtpl-media-cols-2,
	.gtpl-media-cols-3,
	.gtpl-media-cols-4 {
		grid-template-columns: 1fr;
	}
}