/* ===========================================================
   One way taxi routes + taxi guides (taxi-routes.php)
   On top of coimbatore.css + places.css. Prefixed .tr-
   =========================================================== */

.tr-tight { padding-top: 36px; padding-bottom: 8px; }

/* Quick answer box — short, factual summary at the top of every page */
.tr-answer {
    position: relative;
    background: var(--off-white);
    border: 1px solid #e6e6e6;
    border-left: 5px solid var(--yellow);
    border-radius: var(--radius-lg);
    padding: 24px 26px 22px;
}
.tr-answer p { font-size: 16.5px; line-height: 1.75; margin: 0; color: var(--black); }
.tr-answer-tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--black); color: var(--yellow);
    font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    padding: 5px 11px; border-radius: 99px; margin-bottom: 12px;
}
.tr-facts {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px; margin: 18px 0 0;
}
.tr-facts div { background: var(--white); border: 1px solid #ececec; border-radius: 12px; padding: 10px 12px; }
.tr-facts dt { font-size: 12px; color: var(--gray-mid); margin-bottom: 2px; }
.tr-facts dd { margin: 0; font-weight: 800; font-size: 15px; }

/* Fare table */
.tr-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); background: var(--white); }
.tr-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.tr-table th, .tr-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid #f0f0f0; font-size: 15px; }
.tr-table th { background: var(--black); color: var(--white); font-size: 13px; text-transform: uppercase; letter-spacing: .4px; }
.tr-table tr.is-best td { background: rgba(197,245,0,0.10); }
.tr-money { font-weight: 800; font-size: 17px; }
.tr-muted { color: var(--gray-mid); }
.tr-pill { background: var(--yellow); color: var(--black); font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; margin-left: 6px; }

/* More routes columns */
.tr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.tr-col-h { font-size: 17px; margin-bottom: 12px; }

/* Hub: routes grouped by starting city */
.tr-origin { background: var(--white); border: 1px solid #ececec; border-radius: 14px; margin: 10px 0; padding: 12px 16px; }
.tr-origin summary { cursor: pointer; font-weight: 800; font-size: 16px; list-style: none; }
.tr-origin summary::-webkit-details-marker { display: none; }
.tr-origin summary i { color: var(--yellow-dark); margin-right: 6px; }
.tr-origin summary span { float: right; color: var(--gray-mid); font-weight: 600; font-size: 13px; }
.tr-origin .cbe-area-links { margin-top: 12px; }

/* Guides */
.tr-guide-hero { padding: 48px 0 44px; }
.tr-guide-hero h1 { max-width: 860px; }
.tr-article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
.tr-article h2 { font-size: 1.45rem; margin: 34px 0 12px; }
.tr-article p, .tr-article li { font-size: 16.5px; line-height: 1.8; color: #2b2b2b; }
.tr-article p { margin: 0 0 14px; }
.tr-article ul, .tr-article ol { padding-left: 22px; margin: 0 0 16px; }
.tr-article ul { list-style: disc; }
.tr-article ol { list-style: decimal; }
.tr-article li::marker { color: var(--yellow-dark); font-weight: 800; }
.tr-article .tr-answer p { margin: 0; }
.tr-article li { margin-bottom: 6px; }
.tr-article a { color: var(--black); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; }
.tr-article .cbe-area-links a { text-decoration: none; }
.tr-sticky { position: sticky; top: calc(var(--navbar-h) + 16px); }
.tr-guide-card { display: block; text-decoration: none !important; background: var(--white); border: 1px solid #ececec; border-radius: var(--radius-lg); padding: 22px 24px; margin: 18px 0; transition: border-color var(--transition), transform var(--transition); }
.tr-guide-card:hover { border-color: var(--yellow-dark); transform: translateY(-2px); }
.tr-guide-card h2 { margin: 0 0 8px; font-size: 1.2rem; }
.tr-guide-card p { margin: 0 0 10px; font-size: 15px; }
.tr-guide-card span { font-weight: 800; font-size: 14px; }

@media (max-width: 980px) {
    .tr-article-grid { grid-template-columns: 1fr; }
    .tr-sticky { position: static; }
    .tr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .tr-cols { grid-template-columns: 1fr; }
    .tr-answer { padding: 20px 18px; }
}