/*
 * Optional rich-content blocks for ANY blog post — no ACF, no special
 * template. Write the post normally in the editor, then switch to the
 * "Text" tab (classic editor) to paste one of the snippets below where
 * you want that block to appear, then switch back to "Visual" to keep
 * writing. A post that never uses these classes is completely
 * unaffected — the_content() just renders it exactly as before.
 *
 * ---------------------------------------------------------------
 * QUICK FACTS (sidebar card — needs js/quick-facts.js, already
 * enqueued on every post; moves this block out of the article and
 * into the sidebar under "On this page" on load, wherever in the
 * post body you paste it)
 * ---------------------------------------------------------------
 * <div class="guide-quickfacts">
 *   <dl>
 *     <div><dt>Best time</dt><dd>Oct - March</dd></div>
 *     <div><dt>Ideal duration</dt><dd>5 days</dd></div>
 *   </dl>
 * </div>
 *
 * ---------------------------------------------------------------
 * KEY TAKEAWAYS
 * ---------------------------------------------------------------
 * <ul class="guide-takeaways">
 *   <li>First point.</li>
 *   <li>Second point.</li>
 * </ul>
 *
 * ---------------------------------------------------------------
 * TRIP PLANNER (interactive chips — needs js/content-planner.js,
 * already enqueued on every post; chip and its detail block are
 * matched by data-index, index 0 is open by default)
 * ---------------------------------------------------------------
 * <div class="guide-planner">
 *   <h4>Plan your trip</h4>
 *   <p>Based on your time.</p>
 *   <div class="guide-chips">
 *     <button type="button" class="guide-chip" data-index="0">2-3 days</button>
 *     <button type="button" class="guide-chip" data-index="1">4-5 days</button>
 *   </div>
 *   <div class="guide-chip-detail" data-index="0"><p>Itinerary for 2-3 days.</p></div>
 *   <div class="guide-chip-detail" data-index="1"><p>Itinerary for 4-5 days.</p></div>
 * </div>
 *
 * ---------------------------------------------------------------
 * AT-A-GLANCE TABLE (2 columns)
 * ---------------------------------------------------------------
 * <div class="guide-table">
 *   <table>
 *     <tr><td><strong>Best Time to Visit</strong></td><td>October to March</td></tr>
 *   </table>
 * </div>
 *
 * ---------------------------------------------------------------
 * WIDE PHOTO
 * ---------------------------------------------------------------
 * <figure class="guide-figure">
 *   <img src="..." alt="...">
 *   <figcaption>Caption text.</figcaption>
 * </figure>
 *
 * ---------------------------------------------------------------
 * "BEST IF YOU" NOTE
 * ---------------------------------------------------------------
 * <div class="guide-note"><strong>Best if you</strong>Note text.</div>
 *
 * ---------------------------------------------------------------
 * DESTINATION / FEATURE CARD
 * ---------------------------------------------------------------
 * <div class="guide-dest">
 *   <div class="guide-dest-photo"><img src="..." alt="Unakoti"></div>
 *   <div>
 *     <span class="guide-tag">NORTH TRIPURA</span>
 *     <h3>Unakoti</h3>
 *     <p>Description here.</p>
 *     <ul><li>Don't-miss item one.</li></ul>
 *   </div>
 * </div>
 *
 * ---------------------------------------------------------------
 * COMPARISON TABLE (with header row + star ratings)
 * ---------------------------------------------------------------
 * <div class="guide-table">
 *   <table>
 *     <thead><tr><th>Best Suited For</th><th>Top Picks</th><th>Rating</th></tr></thead>
 *     <tbody><tr><td>Couples</td><td>Unakoti</td><td class="guide-stars">&#9733;&#9733;&#9733;&#9733;</td></tr></tbody>
 *   </table>
 * </div>
 *
 * Add class="highlight" to one <tr> to call out a single row (use on
 * at most one row per table). "table-wrap" also works as the wrapper
 * class name — both render identically.
 *
 * ---------------------------------------------------------------
 * COST TABLE (with total row)
 * ---------------------------------------------------------------
 * <div class="guide-table">
 *   <table>
 *     <thead><tr><th>Category</th><th>Budget (Rs.)</th></tr></thead>
 *     <tbody><tr><td>Flights</td><td>14,000</td></tr></tbody>
 *     <tfoot><tr><td>Total</td><td>45,000</td></tr></tfoot>
 *   </table>
 * </div>
 *
 * ---------------------------------------------------------------
 * CALL TO ACTION
 * ---------------------------------------------------------------
 * <div class="guide-cta">
 *   <h4>Find Your Stay</h4>
 *   <p>Browse verified homestays — zero commissions, no middlemen.</p>
 *   <a href="https://host.unpaqd.com">Explore stays on Unpaqd &rarr;</a>
 * </div>
 *
 * ---------------------------------------------------------------
 * FAQ ACCORDION (native <details>/<summary> — no JS needed; the
 * browser handles expand/collapse and the [open] attribute itself)
 * ---------------------------------------------------------------
 * <details class="faq">
 *   <summary>Do I need to be physically present at my homestay?</summary>
 *   <p>Not necessarily. Many hosts use a trusted local caretaker.</p>
 * </details>
 * <details class="faq">
 *   <summary>How long does it take to get my first booking?</summary>
 *   <p>Most new hosts receive their first enquiry within 1-2 weeks.</p>
 * </details>
 */

.guide-takeaways {
	list-style: none;
	margin: 0 0 1.6em;
	padding: 0;
}

.guide-takeaways li {
	position: relative;
	padding: 6px 0 6px 22px;
	border-top: 1px solid var(--line);
	font-size: 16.5px;
}

.guide-takeaways li:first-child {
	border-top: none;
}

.guide-takeaways li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 17px;
	width: 8px;
	height: 2px;
	background: var(--orange);
}

.guide-planner {
	background: var(--teal);
	color: #fff;
	border-radius: 14px;
	padding: 28px;
	margin: 36px 0;
}

.guide-planner h4 {
	color: #fff;
	font-family: var(--font-heading);
	font-size: 20px;
	margin: 0 0 4px;
}

.guide-planner p {
	color: #D7ECE9;
	font-size: 14px;
	margin: 0 0 18px;
}

.guide-chips {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.guide-chip {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #fff;
	padding: 9px 18px;
	border-radius: 24px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	font-family: var(--font-body);
	transition: 0.15s;
}

.guide-chip.is-selected,
.guide-chip:hover {
	background: #fff;
	color: var(--teal-dark);
}

.guide-chip-detail {
	display: none;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	padding: 16px 18px;
	margin-top: 16px;
	font-size: 14px;
	line-height: 1.6;
}

.guide-chip-detail.is-visible {
	display: block;
}

.guide-chip-detail p {
	color: #fff;
	margin: 0;
}

.guide-table,
.table-wrap {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow-x: auto;
	margin: 24px 0;
}

.guide-table table,
.table-wrap table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-body);
	font-size: 14px;
	min-width: 520px;
}

.guide-table thead th,
.table-wrap thead th {
	background: var(--teal);
	color: #fff;
	text-align: left;
	padding: 11px 14px;
	font-weight: 600;
	font-size: 12.5px;
}

.guide-table td,
.table-wrap td {
	padding: 11px 14px;
	border-top: 1px solid var(--line);
}

.guide-table tr:first-child td,
.table-wrap tr:first-child td {
	border-top: none;
}

.guide-table thead + tbody tr:first-child td,
.table-wrap thead + tbody tr:first-child td {
	border-top: 1px solid var(--line);
}

.guide-table tbody tr:nth-child(even),
.table-wrap tbody tr:nth-child(even) {
	background: var(--paper-tint);
}

.guide-table tbody tr.highlight,
.table-wrap tbody tr.highlight {
	background: var(--highlight-bg);
}

.guide-table tfoot td,
.table-wrap tfoot td {
	border-top: 2px solid var(--line);
	font-weight: 700;
}

.guide-stars,
.stars {
	color: var(--orange-dark);
	letter-spacing: 1px;
}

.guide-figure {
	margin: 36px 0;
}

.guide-figure img {
	border-radius: var(--radius);
	width: 100%;
	height: 300px;
	object-fit: cover;
	display: block;
}

.guide-figure figcaption {
	font-size: 12.5px;
	color: var(--ink-soft);
	margin-top: 8px;
}

.guide-note {
	background: var(--paper-tint);
	border: 1px solid var(--line);
	border-left: 3px solid var(--teal);
	border-radius: 0 8px 8px 0;
	padding: 12px 18px;
	font-size: 14.5px;
	color: var(--ink-soft);
	margin: 0 0 1.6em;
}

.guide-note strong {
	color: var(--teal-dark);
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.04em;
	display: block;
	margin-bottom: 6px;
}

.guide-dest {
	display: grid;
	grid-template-columns: 230px 1fr;
	gap: 24px;
	align-items: start;
	margin: 32px 0;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--line);
}

.guide-dest.is-reverse {
	grid-template-columns: 1fr 230px;
}

.guide-dest.is-reverse .guide-dest-photo {
	order: 2;
}

.guide-dest-photo img {
	border-radius: var(--radius);
	width: 100%;
	height: 170px;
	object-fit: cover;
	display: block;
}

.guide-dest h3 {
	margin-top: 0;
	font-size: 21px;
}

.guide-dest p {
	font-size: 15px;
	margin-bottom: 10px;
}

.guide-dest ul {
	font-size: 14.5px;
	margin: 0;
	padding-left: 20px;
}

.guide-dest ul li {
	margin-bottom: 6px;
}

.guide-tag {
	display: inline-block;
	background: var(--teal);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 9px;
	border-radius: 5px;
	margin-bottom: 8px;
	letter-spacing: 0.02em;
}

.guide-cta {
	background: var(--paper-tint);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px;
	text-align: center;
	margin: 40px 0 10px;
}

.guide-cta h4 {
	margin: 0 0 8px;
	font-size: 20px;
}

.guide-cta p {
	color: var(--ink-soft);
	margin: 0 0 18px;
	font-size: 15px;
}

.guide-cta a {
	display: inline-block;
	background: var(--orange);
	color: #fff;
	text-decoration: none;
	padding: 12px 24px;
	border-radius: 6px;
	font-weight: 600;
}

.guide-cta a:hover {
	background: var(--orange-dark);
}

details.faq {
	border-bottom: 1px solid var(--line);
	padding: 16px 0;
}

details.faq summary {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 16.5px;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

details.faq summary::-webkit-details-marker {
	display: none;
}

details.faq summary::after {
	content: "+";
	font-size: 22px;
	color: var(--orange);
	font-family: var(--font-body);
	font-weight: 400;
	margin-left: 12px;
}

details.faq[open] summary::after {
	content: "\2013";
}

details.faq p {
	margin: 12px 0 0;
	font-size: 15px;
	color: var(--ink-soft);
}

@media (max-width: 700px) {
	.guide-table {
		overflow-x: auto;
	}
}

@media (max-width: 640px) {
	.guide-dest,
	.guide-dest.is-reverse {
		grid-template-columns: 1fr;
	}
	.guide-dest.is-reverse .guide-dest-photo {
		order: 0;
	}
	.guide-dest-photo img {
		height: 200px;
	}
}

/* Quick Facts sidebar card (moved here by js/quick-facts.js) */
.guide-quickfacts-card dl {
	margin: 0;
}

.guide-quickfacts-card dl > div {
	padding: 8px 0;
	border-top: 1px solid var(--line);
}

.guide-quickfacts-card dl > div:first-child {
	border-top: none;
	padding-top: 0;
}

.guide-quickfacts-card dt {
	font-size: 11px;
	color: var(--ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0;
}

.guide-quickfacts-card dd {
	margin: 2px 0 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink);
}