/* =========================================================
   Destination Guide (template-destination-guide.php)
   Hero from tt-tour-listing.css (.tpl-hero), body uses the .ttk system.
   ========================================================= */

.tdg .tdg-hero { padding-bottom: 40px; }
.tdg .tpl-intro p { margin: 0 0 12px; }

/* Quick facts under the hero */
.tdg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.tdg-facts li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--line, #e5e9f0); border-radius: 16px; }
.tdg-facts__ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; color: var(--o, #ff5e00); background: var(--o-wash, #fff3eb); border-radius: 12px; }
.tdg-facts small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #64748b); }
.tdg-facts strong { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--navy, #1a365d); }

/* Sections */
.tdg-body { padding-bottom: 10px; }
.tdg .tdg-sec { scroll-margin-top: 110px; }
.tdg .tdg-body > .tdg-sec { margin-top: 56px; }
.tdg .tdg-hero .tdg-facts { margin-top: 28px; }

/* Short sections as a card grid (Mythology, History, Best time ...) */
.tdg .tdg-brief { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.tdg .tdg-brief__item { display: flex; flex-direction: column; padding: 22px; background: #fff; border: 1px solid var(--line, #e5e9f0); border-radius: 20px; }
.tdg .tdg-brief__h { position: relative; margin: 0 0 10px; padding-left: 14px; font-size: 19px; font-weight: 800; line-height: 1.3; color: var(--navy, #1a365d); }
.tdg .tdg-brief__h::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; background: var(--o, #ff5e00); border-radius: 4px; }
.tdg .tdg-brief__item .tdg-prose { font-size: 15px; line-height: 1.65; color: var(--body, #475569); }
.tdg .tdg-brief__item .tdg-more { margin-top: auto; padding-top: 6px; }
.tdg .tdg-prose p { margin: 0 0 12px; }
.tdg .tdg-prose ul { margin: 10px 0 14px; padding: 0; list-style: none; }
.tdg .tdg-prose ul li { position: relative; margin: 0 0 8px; padding-left: 28px; line-height: 1.6; }
.tdg .tdg-prose ul li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border: 1.6px solid var(--o, #ff5e00); border-radius: 50%; background: no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5e00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }
.tt-scope .tdg-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14.5px; font-weight: 700; color: var(--o, #ff5e00); text-decoration: none; }
.tdg-more:hover .ttk-ic { transform: translateX(3px); }
.tdg-more .ttk-ic { transition: transform .2s; }

/* Cards */
.tdg-cards { display: grid; gap: 16px; margin-top: 18px; }
.tdg-cards.has-img { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tdg-cards.is-text,
.tdg-cards.is-reach { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tdg-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line, #e5e9f0); border-radius: 20px; transition: border-color .2s, box-shadow .2s; }
.tdg-card:hover { border-color: #d7dfea; box-shadow: 0 14px 34px rgb(18 41 74 / .08); }
.tdg-card__img { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: #eef2f7; }
.tdg-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tdg-card:hover .tdg-card__img img { transform: scale(1.03); }
.tdg-card__n { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 13px; font-weight: 800; color: #fff; background: var(--o, #ff5e00); border-radius: 50%; }
.tdg-card__body { display: flex; flex: 1; flex-direction: column; padding: 18px 20px 20px; }
.tdg-card h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--navy, #1a365d); }
.tdg-card h3 a { color: inherit; text-decoration: none; }
.tdg-card h3 a:hover { color: var(--o, #ff5e00); }
.tdg-card__num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; font-size: 13px; font-weight: 800; color: var(--o, #ff5e00); background: var(--o-wash, #fff3eb); border-radius: 50%; }
.tdg-card__ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; color: var(--o, #ff5e00); background: var(--o-wash, #fff3eb); border-radius: 12px; }
.tdg-card .tdg-prose { font-size: 14.5px; line-height: 1.65; color: var(--body, #475569); }
.tdg-card .tdg-prose p:last-child { margin-bottom: 0; }
.tdg-card__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; font-size: 14.5px; font-weight: 700; color: var(--o, #ff5e00); text-decoration: none; }
.tdg-card__go .ttk-ic { transition: transform .2s; }
.tdg-card__go:hover .ttk-ic { transform: translateX(3px); }

/* Plan your trip tiles */
.tdg-plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tdg-plan__tile { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; color: #fff; text-decoration: none; background: var(--navy, #1a365d); border-radius: 18px; }
.tdg-plan__tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tdg-plan__tile:hover img { transform: scale(1.04); }
.tdg-plan__tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 25 47 / 0) 35%, rgb(10 25 47 / .78)); }
.tdg-plan__tile span { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 16px; font-weight: 800; color: #fff; }

.tdg-cta { margin-top: 56px; margin-bottom: 48px; }

@media (max-width: 1024px) {
	.tdg .tdg-brief,
	.tdg-cards.has-img,
	.tdg-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.tdg .tdg-body > .tdg-sec { margin-top: 44px; }
	.tdg .tdg-brief { grid-template-columns: 1fr; margin-top: 36px; }
	.tdg .tdg-brief__item { padding: 18px; }
	.tdg-cards.has-img,
	.tdg-cards.is-text,
	.tdg-cards.is-reach { grid-template-columns: 1fr; }
	.tdg-plan { grid-template-columns: 1fr 1fr; gap: 10px; }
	.tdg-plan__tile span { left: 12px; right: 12px; font-size: 14px; }
	.tdg-facts { grid-template-columns: 1fr 1fr; gap: 8px; }
	.tdg-facts li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
	.tdg-card__body { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.tdg-card__img img,
	.tdg-plan__tile img { transition: none; }
}