/*
 * Travel Smarter / Resources page — travel-smarter.css
 * Only loaded on the /travel-smarter/ page (page-travel-smarter.php template).
 * All selectors are prefixed with .ge-ts- to avoid conflicts with the main stylesheet.
 */

/* ── Reset theme's #content.wrap constraint for full-bleed sections ── */
body.ge-ts-landing #content.site-content {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}
.ge-ts-page { width: 100%; }

/* ── Inner wrap ── */
.ge-ts-wrap {
	max-width: 1170px;
	margin: 0 auto;
	padding: 0 32px;
}

/* ── Shared typography ── */
.ge-ts-label {
	font-size: 11px; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: #ff8d00;
	display: block; margin-bottom: 5px;
}
.ge-ts-section-title {
	font-size: 34px; font-weight: 900; color: #111827;
	margin-top: 0; margin-bottom: 10px; line-height: 1.15;
}
.ge-ts-section-title.light { color: #fff; }

/* ── Image gradient fallbacks ── */
.ge-ts-img-blue   { background: linear-gradient(145deg, #0f2a4a 0%, #1a5080 100%); }
.ge-ts-img-green  { background: linear-gradient(145deg, #0e3320 0%, #1a6040 100%); }
.ge-ts-img-slate  { background: linear-gradient(145deg, #181e2a 0%, #2a3548 100%); }
.ge-ts-img-warm   { background: linear-gradient(145deg, #3a2800 0%, #7a5500 100%); }
.ge-ts-img-teal   { background: linear-gradient(145deg, #0d3535 0%, #196060 100%); }
.ge-ts-img-purple { background: linear-gradient(145deg, #28153a 0%, #4a2a6a 100%); }
.ge-ts-img-rust   { background: linear-gradient(145deg, #3a1a0a 0%, #7a3510 100%); }


/* ════════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════════ */
.ge-ts-hero {
	background: #111827;
	padding: 76px 0 68px;
	position: relative; overflow: hidden;
}
.ge-ts-hero::before {
	content: '';
	position: absolute; inset: 0;
	background-image: radial-gradient(circle, rgba(255,255,255,0.052) 1.5px, transparent 1.5px);
	background-size: 34px 34px;
	animation: ge-ts-bgdrift 90s linear infinite;
	pointer-events: none;
}
@keyframes ge-ts-bgdrift {
	from { background-position: 0 0; }
	to   { background-position: 340px 340px; }
}

.ge-ts-hero-text {
	position: relative; z-index: 1;
	max-width: 680px; margin-bottom: 52px;
}
.ge-ts-badge {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(255,141,0,0.13); border: 1px solid rgba(255,141,0,0.28);
	color: #ff8d00; font-size: 11px; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
	padding: 6px 14px; border-radius: 20px; margin-bottom: 14px;
}
.ge-ts-hero h1 {
	font-size: 52px; font-weight: 900; color: #fff;
	line-height: 1.06; margin-bottom: 18px;
}
.ge-ts-hero h1 span { color: #ff8d00; }
.ge-ts-hero-sub {
	font-size: 17px; color: #9ca3af;
	line-height: 1.75; max-width: 520px;
}

/* Category anchor cards */
.ge-ts-hero-cats {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px;
}
.ge-ts-cat-card {
	background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
	border-radius: 12px; padding: 18px 14px;
	display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: 10px; text-decoration: none;
	transition: background .18s, border-color .18s, transform .18s;
}
.ge-ts-cat-card:hover {
	background: rgba(255,141,0,0.12); border-color: rgba(255,141,0,0.35);
	transform: translateY(-3px);
}
.ge-ts-cat-icon  { font-size: 26px; line-height: 1; }
.ge-ts-cat-label { font-size: 11px; font-weight: 700; color: #fff; line-height: 1.3; }


/* ════════════════════════════════════════════════════════════
   SHARED SECTION CHROME
════════════════════════════════════════════════════════════ */
.ge-ts-section { padding: 76px 0; }
.ge-ts-bg-gray        { background: #f9fafb; }
.ge-ts-bg-white       { background: #fff; }
.ge-ts-bg-dark        { background: #111827; }
.ge-ts-bg-orange-soft { background: #fff4e8; }

.ge-ts-section-header {
	display: flex; align-items: flex-start; gap: 16px; margin-bottom: 36px;
}
.ge-ts-section-icon {
	width: 60px; height: 60px; border-radius: 14px; flex-shrink: 0;
	background: rgba(255,141,0,0.12); border: 1px solid rgba(255,141,0,0.2);
	display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.ge-ts-section-icon.on-dark {
	background: rgba(255,141,0,0.15); border-color: rgba(255,141,0,0.3);
}


/* ════════════════════════════════════════════════════════════
   CONVERSION CARDS — Transportation (3-col)
════════════════════════════════════════════════════════════ */
.ge-ts-conv-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.ge-ts-conv-card {
	background: #fff; border-radius: 14px; overflow: hidden;
	border: 1px solid #e5e7eb;
	transition: box-shadow .18s, transform .18s;
	display: flex; flex-direction: column;
}
.ge-ts-conv-card:hover {
	box-shadow: 0 14px 40px rgba(0,0,0,0.11);
	transform: translateY(-4px);
}
.ge-ts-conv-img {
	height: 172px; width: 100%;
	background-size: cover; background-position: center;
}
.ge-ts-conv-body { padding: 20px 20px 22px; flex: 1; display: flex; flex-direction: column; }
.ge-ts-conv-badge {
	display: inline-flex; align-items: center;
	background: rgba(255,141,0,0.1); color: #ff8d00;
	font-size: 10px; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; padding: 4px 10px; border-radius: 20px;
	margin-bottom: 10px; width: fit-content;
}
.ge-ts-conv-body h3   { font-size: 18px; font-weight: 800; color: #111827; margin-bottom: 8px; }
.ge-ts-conv-body p    { font-size: 14px; color: #6b7280; line-height: 1.6; margin-bottom: 18px; flex: 1; }
.ge-ts-btn-convert {
	display: block; text-align: center;
	background: #ff8d00; color: #fff !important;
	font-weight: 700; font-size: 13px; padding: 11px 20px; border-radius: 8px;
	transition: background .15s; text-decoration: none;
}
.ge-ts-btn-convert:hover { background: #e07d00; }
.ge-ts-btn-convert-sec {
	display: block; text-align: center; background: transparent;
	color: #ff8d00 !important; border: 1.5px solid #ff8d00;
	font-weight: 700; font-size: 13px; padding: 10px 20px; border-radius: 8px;
	text-decoration: none; margin-top: 8px;
	transition: background .15s, color .15s;
}
.ge-ts-btn-convert-sec:hover { background: #ff8d00; color: #fff !important; }


/* ════════════════════════════════════════════════════════════
   SERVICE CARDS — outer 2-col grid; each card is 2-col inside
════════════════════════════════════════════════════════════ */
.ge-ts-svc-grid {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.ge-ts-svc-card {
	border-radius: 14px; border: 1px solid #e5e7eb; background: #fff;
	padding: 26px;
	display: flex; flex-direction: column;
	text-decoration: none; color: inherit;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ge-ts-svc-card:hover {
	border-color: #ffc97a;
	box-shadow: 0 6px 28px rgba(255,141,0,0.09);
	transform: translateY(-2px);
}
.ge-ts-svc-card.on-dark {
	background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1);
}
.ge-ts-svc-card.on-dark:hover {
	border-color: rgba(255,141,0,0.45);
	background: rgba(255,141,0,0.07);
	box-shadow: 0 6px 28px rgba(0,0,0,0.3);
}

/* Top row: tag left — divider — logo right */
.ge-ts-svc-left {
	display: flex; flex-direction: row;
	align-items: center; justify-content: space-between;
	padding-bottom: 20px; margin-bottom: 20px;
}

/* Content area below the top row */
.ge-ts-svc-right {
	display: flex; flex-direction: column; flex: 1;
}

/* Logo slot — fixed bounding box forces small logos to fill the space */
.ge-ts-logo-slot {
	display: flex; align-items: center;
	padding-left: 20px; position: relative;
	width: 150px; height: 52px; flex-shrink: 0;
}
.ge-ts-logo-slot img,
.ge-ts-logo-slot svg {
	width: 100%; height: 100%;
	object-fit: contain; object-position: right center;
	display: block;
}

/* Placeholder name text when no logo */
.ge-ts-logo-slot:not(:has(img)):not(:has(svg))::after {
	content: attr(data-name);
	font-size: 13px; font-weight: 800; color: #d1d5db; letter-spacing: .01em;
}
.ge-ts-svc-card.on-dark .ge-ts-logo-slot:not(:has(img)):not(:has(svg))::after {
	color: rgba(255,255,255,0.2);
}

.ge-ts-svc-tag {
	font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: #ff8d00; background: rgba(255,141,0,0.1);
	padding: 4px 10px; border-radius: 20px; white-space: nowrap;
}
.ge-ts-svc-card h3 {
	font-size: 22px; font-weight: 800; color: #111827;
	line-height: 1.2; margin-bottom: 10px;
}
.ge-ts-svc-card.on-dark h3 { color: #fff; }
.ge-ts-svc-card p {
	font-size: 14px; color: #6b7280; line-height: 1.65; margin-bottom: 20px; flex: 1;
}
.ge-ts-svc-card.on-dark p { color: #9ca3af; }
.ge-ts-svc-btn {
	display: inline-block; align-self: flex-start;
	background: #ff8d00; color: #fff !important;
	font-weight: 700; font-size: 13px; padding: 10px 20px; border-radius: 8px;
	text-decoration: none; transition: background .15s;
}
.ge-ts-svc-btn:hover { background: #e07d00; }


/* ════════════════════════════════════════════════════════════
   GADGET CARDS — image-based, 2-col, CTA inside card
════════════════════════════════════════════════════════════ */
.ge-ts-gear-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.ge-ts-gadget-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.ge-ts-gear-card {
	border-radius: 12px; border: 1px solid #e5e7eb; background: #fff;
	overflow: hidden; display: flex; flex-direction: column;
	text-decoration: none; color: inherit;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ge-ts-gadget-card {
	border-radius: 12px; border: 1px solid #e5e7eb; background: #fff;
	overflow: hidden; display: flex; flex-direction: column;
	text-decoration: none; color: inherit;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ge-ts-gear-card:hover {
	border-color: #ffc97a;
	box-shadow: 0 8px 32px rgba(0,0,0,0.10);
	transform: translateY(-2px);
}
.ge-ts-gadget-card:hover {
	border-color: #ffc97a;
	box-shadow: 0 8px 32px rgba(0,0,0,0.10);
	transform: translateY(-2px);
}

/*
 * Image slot:
 * - Uses padding-top to hold a consistent aspect ratio regardless of photo dimensions.
 * - background-size: cover  → lifestyle / environment shots (default)
 * - background-size: contain + background-color: #f9fafb → product packshots on white bg
 *   (add class="ge-ts-gear-img packshot" or inline style="background-size:contain" per card)
 */
.ge-ts-gear-img {
	position: relative; width: 100%;
	padding-top: 56.25%; /* 16:9 — legacy fallback */
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #fff;
}
.ge-ts-gadget-img {
	position: relative; width: 100%;
	padding-top: 56.25%; /* 16:9 — legacy fallback */
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #f9fafb;
}
/* .packshot kept for backwards compatibility — contain is now the default */
.ge-ts-gear-img.cover {
	background-size: cover;
}
/* Use modern aspect-ratio where supported — replaces the padding-top hack */
@supports (aspect-ratio: 16/9) {
	.ge-ts-gear-img { padding-top: 0; aspect-ratio: 16/9; }
}

.ge-ts-gear-body {
	padding: 16px 18px 18px;
	display: flex; flex-direction: column; flex: 1;
}
.ge-ts-gear-tag {
	font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: #ff8d00; background: rgba(255,141,0,0.1);
	padding: 3px 9px; border-radius: 20px; margin-bottom: 10px; width: fit-content;
}
.ge-ts-gear-body h3 {
	font-size: 15px; font-weight: 800; color: #111827;
	line-height: 1.3; margin-bottom: 6px;
}
.ge-ts-gear-body p {
	font-size: 13px; color: #6b7280; line-height: 1.6; margin-bottom: 14px; flex: 1;
}
.ge-ts-gear-btn {
	display: block; text-align: center;
	background: #ff8d00; color: #fff !important;
	font-weight: 700; font-size: 13px; padding: 10px 18px; border-radius: 8px;
	transition: background .15s; text-decoration: none; margin-top: auto;
}
.ge-ts-gear-btn:hover { background: #e07d00; }


/* ════════════════════════════════════════════════════════════
   AMAZON SHOP CTA
════════════════════════════════════════════════════════════ */
.ge-ts-amazon-cta {
	background: #111827; padding: 72px 0;
	position: relative; overflow: hidden;
}
.ge-ts-amazon-cta::before {
	content: ''; position: absolute; inset: 0;
	background-image: radial-gradient(circle, rgba(255,255,255,0.045) 1.5px, transparent 1.5px);
	background-size: 34px 34px; pointer-events: none;
}
.ge-ts-amazon-inner {
	position: relative; z-index: 1;
	text-align: center; max-width: 620px; margin: 0 auto;
}
.ge-ts-amazon-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(255,141,0,0.13); border: 1px solid rgba(255,141,0,0.28);
	color: #ff8d00; font-size: 11px; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
	padding: 5px 13px; border-radius: 20px; margin-bottom: 20px;
}
.ge-ts-amazon-cta h2 {
	font-size: 36px; font-weight: 900; color: #fff;
	line-height: 1.12; margin-bottom: 14px;
}
.ge-ts-amazon-cta h2 span { color: #ff8d00; }
.ge-ts-amazon-cta p {
	font-size: 15px; color: #9ca3af; line-height: 1.7; margin-bottom: 32px;
}
.ge-ts-amazon-btn {
	display: inline-block;
	background: #ff8d00; color: #fff !important;
	font-weight: 800; font-size: 15px; padding: 15px 40px; border-radius: 10px;
	text-decoration: none; transition: background .15s;
}
.ge-ts-amazon-btn:hover { background: #e07d00; }


/* ════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet ≤ 1024px
════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	.ge-ts-hero-cats { grid-template-columns: repeat(4, 1fr); }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet ≤ 900px
════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
	.ge-ts-wrap { padding: 0 24px; }
	.ge-ts-hero h1 { font-size: 40px; }
	.ge-ts-conv-grid { grid-template-columns: 1fr 1fr; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile ≤ 640px
════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
	.ge-ts-wrap { padding: 0 16px; }
	.ge-ts-section { padding: 52px 0; }
	.ge-ts-section-title { font-size: 26px; }
	.ge-ts-section-header { flex-wrap: wrap; }
	.ge-ts-hero { padding: 48px 0 44px; }
	.ge-ts-hero h1 { font-size: 32px; }
	.ge-ts-hero-sub { font-size: 15px; }
	.ge-ts-hero-cats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.ge-ts-conv-grid { grid-template-columns: 1fr; }
	.ge-ts-svc-grid  { grid-template-columns: 1fr; }
	.ge-ts-gear-grid { grid-template-columns: 1fr; }
	/* Shrink logo slot on narrow screens so tag + logo fit the top row */
	.ge-ts-logo-slot { width: 110px; height: 38px; }
	/* Tighten Amazon CTA copy on narrow screens */
	.ge-ts-amazon-cta h2 { font-size: 28px; }
}


/* ════════════════════════════════════════════════════════════
   ACCESSIBILITY — Respect reduced-motion preference
════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.ge-ts-hero::before,
	.ge-ts-amazon-cta::before { animation: none; }
	.ge-ts-cat-card,
	.ge-ts-conv-card,
	.ge-ts-svc-card,
	.ge-ts-gear-card { transition: none; }
}