/* =========================================================
   Yatayat / OneSided Cabs — Blog, city-wise blog + Contact page
   Uses only the global theme variables (--site-*) + Bootstrap utilities.
   ========================================================= */

.blog-section{padding:2.5rem 0 4rem}
.blog-toolbar{
  display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;justify-content:space-between;
  background:var(--site-card-bg,#fff);border:1px solid var(--site-border,#e5e7eb);border-radius:calc(var(--site-radius,12px) * 1.2);
  padding:.9rem 1rem;margin-bottom:1.75rem
}
.blog-toolbar form{flex:1 1 260px;max-width:420px}
.blog-toolbar .form-control{border-color:var(--site-border,#d1d5db);border-radius:var(--site-radius,10px);min-height:44px}
.blog-toolbar .form-control:focus{border-color:var(--site-primary,#0d6efd);box-shadow:0 0 0 .2rem color-mix(in srgb,var(--site-primary,#0d6efd) 20%,transparent)}
.cat-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.cat-chips a{
  display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.4rem .9rem;font-size:.85rem;font-weight:600;text-decoration:none;
  border:1px solid var(--site-border,#e5e7eb);color:var(--site-body-text,#374151);background:var(--site-card-bg,#fff);transition:all .15s
}
.cat-chips a:hover{border-color:var(--site-primary,#0d6efd);color:var(--site-primary,#0d6efd)}
.cat-chips a.active{background:var(--site-primary,#0d6efd);border-color:var(--site-primary,#0d6efd);color:#fff}
.cat-chips a .cnt{font-size:.72rem;opacity:.75}
.blog-card{
  display:flex;flex-direction:column;height:100%;background:var(--site-card-bg,#fff);border:1px solid var(--site-border,#e5e7eb);
  border-radius:calc(var(--site-radius,12px) * 1.3);overflow:hidden;transition:transform .2s,box-shadow .2s
}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(0,0,0,.35)}
.blog-card .blog-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;display:block;background:color-mix(in srgb,var(--site-primary,#0d6efd) 8%,transparent)}
.blog-card .blog-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.blog-card:hover .blog-thumb img{transform:scale(1.05)}
.blog-card .blog-cat{
  position:absolute;left:.85rem;top:.85rem;background:var(--site-accent,#f59e0b);color:#fff;font-size:.72rem;font-weight:700;
  border-radius:999px;padding:.25rem .7rem;text-transform:uppercase;letter-spacing:.04em
}
.blog-card .blog-body{padding:1.15rem 1.2rem 1.25rem;display:flex;flex-direction:column;flex:1}
.blog-card .blog-meta{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.8rem;color:var(--site-body-text,#6b7280);margin-bottom:.55rem}
.blog-card .blog-meta i{color:var(--site-primary,#0d6efd);margin-right:.3rem}
.blog-card h3{font-family:var(--site-font-heading,inherit);font-size:1.05rem;font-weight:700;line-height:1.4;margin-bottom:.5rem}
.blog-card h3 a{color:var(--site-heading,#111827);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-card h3 a:hover{color:var(--site-primary,#0d6efd)}
.blog-card p{color:var(--site-body-text,#4b5563);font-size:.9rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:1rem}
.blog-card .read-more{margin-top:auto;color:var(--site-link,#0d6efd);font-weight:600;text-decoration:none;font-size:.9rem;display:inline-flex;align-items:center;gap:.3rem}
.blog-card .read-more:hover{color:var(--site-link-hover,#0a58ca);gap:.55rem}
.blog-empty{text-align:center;padding:3.5rem 1rem;color:var(--site-body-text,#6b7280)}
.blog-empty i{font-size:3rem;color:var(--site-border,#d1d5db);display:block;margin-bottom:.75rem}
.blog-pagination .pagination{margin:0}
.blog-pagination .page-link{color:var(--site-primary,#0d6efd);border-color:var(--site-border,#e5e7eb)}
.blog-pagination .page-item.active .page-link{background:var(--site-primary,#0d6efd);border-color:var(--site-primary,#0d6efd);color:#fff}

/* ---------- Blog detail ---------- */
.post-hero{position:relative;border-radius:calc(var(--site-radius,12px) * 1.5);overflow:hidden;margin-bottom:1.75rem;background:color-mix(in srgb,var(--site-primary,#0d6efd) 8%,transparent)}
.post-hero img{width:100%;max-height:460px;object-fit:cover;display:block}
.post-title{font-family:var(--site-font-heading,inherit);color:var(--site-heading,#111827);font-weight:700;font-size:clamp(1.5rem,2.5vw,2.25rem);line-height:1.25;margin-bottom:.75rem}
.post-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;color:var(--site-body-text,#6b7280);font-size:.9rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--site-border,#e5e7eb)}
.post-meta i{color:var(--site-primary,#0d6efd);margin-right:.35rem}
.post-meta a{color:var(--site-link,#0d6efd);text-decoration:none;font-weight:600}
.post-content{color:var(--site-body-text,#374151);font-size:1.02rem;line-height:1.8}
.post-content h1,.post-content h2,.post-content h3,.post-content h4,.post-content h5{font-family:var(--site-font-heading,inherit);color:var(--site-heading,#111827);font-weight:700;margin:1.6rem 0 .75rem;line-height:1.3}
.post-content h2{font-size:1.5rem}.post-content h3{font-size:1.25rem}.post-content h4{font-size:1.1rem}
.post-content p{margin-bottom:1rem}
.post-content img{max-width:100%;height:auto;border-radius:var(--site-radius,10px);margin:1rem 0}
.post-content a{color:var(--site-link,#0d6efd)}
.post-content a:hover{color:var(--site-link-hover,#0a58ca)}
.post-content ul,.post-content ol{padding-left:1.4rem;margin-bottom:1rem}
.post-content li{margin-bottom:.35rem}
.post-content table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:.95rem;display:block;overflow-x:auto}
.post-content table th,.post-content table td{border:1px solid var(--site-border,#e5e7eb);padding:.6rem .8rem;text-align:left}
.post-content table th{background:color-mix(in srgb,var(--site-primary,#0d6efd) 8%,transparent);color:var(--site-heading,#111827)}
.post-content blockquote{border-left:4px solid var(--site-primary,#0d6efd);background:color-mix(in srgb,var(--site-primary,#0d6efd) 6%,transparent);padding:1rem 1.25rem;border-radius:0 var(--site-radius,10px) var(--site-radius,10px) 0;margin:1.25rem 0}
.post-content iframe{max-width:100%}
.post-share{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;padding:1.25rem 0;margin-top:1.5rem;border-top:1px solid var(--site-border,#e5e7eb);border-bottom:1px solid var(--site-border,#e5e7eb)}
.post-share .lbl{font-weight:700;color:var(--site-heading,#111827);margin-right:.25rem}
.post-share a,.post-share button{
  width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;text-decoration:none;
  border:1px solid var(--site-border,#e5e7eb);color:var(--site-body-text,#374151);background:var(--site-card-bg,#fff);transition:all .15s
}
.post-share a:hover,.post-share button:hover{background:var(--site-primary,#0d6efd);border-color:var(--site-primary,#0d6efd);color:#fff}
.post-share .wa:hover{background:#25d366;border-color:#25d366}
.post-share .fb:hover{background:#1877f2;border-color:#1877f2}
.post-share .tw:hover{background:#111;border-color:#111}
.post-share .ln:hover{background:#0a66c2;border-color:#0a66c2}
.side-card{background:var(--site-card-bg,#fff);border:1px solid var(--site-border,#e5e7eb);border-radius:calc(var(--site-radius,12px) * 1.3);padding:1.25rem;margin-bottom:1.5rem}
.side-card h4{font-family:var(--site-font-heading,inherit);font-size:1.05rem;font-weight:700;color:var(--site-heading,#111827);margin-bottom:1rem;padding-bottom:.6rem;border-bottom:2px solid var(--site-primary,#0d6efd);display:inline-block}
.side-list{list-style:none;margin:0;padding:0}
.side-list li{border-bottom:1px dashed var(--site-border,#e5e7eb)}
.side-list li:last-child{border-bottom:0}
.side-list a{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.6rem 0;color:var(--site-body-text,#374151);text-decoration:none;font-size:.93rem}
.side-list a:hover{color:var(--site-primary,#0d6efd)}
.side-list a i{color:var(--site-primary,#0d6efd);font-size:.8rem}
.side-list .badge{background:color-mix(in srgb,var(--site-primary,#0d6efd) 12%,transparent);color:var(--site-primary,#0d6efd)}
.recent-post{display:flex;gap:.8rem;padding:.6rem 0;border-bottom:1px dashed var(--site-border,#e5e7eb);text-decoration:none}
.recent-post:last-child{border-bottom:0}
.recent-post img{width:76px;height:60px;object-fit:cover;border-radius:var(--site-radius,10px);flex:0 0 auto;background:color-mix(in srgb,var(--site-primary,#0d6efd) 8%,transparent)}
.recent-post h6{font-size:.9rem;font-weight:600;color:var(--site-heading,#111827);margin:0 0 .2rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.recent-post:hover h6{color:var(--site-primary,#0d6efd)}
.recent-post small{color:var(--site-body-text,#6b7280);font-size:.78rem}
.route-links{display:flex;flex-wrap:wrap;gap:.45rem}
.route-links a{
  display:inline-flex;align-items:center;gap:.3rem;border:1px solid var(--site-border,#e5e7eb);border-radius:999px;padding:.35rem .8rem;font-size:.83rem;
  color:var(--site-body-text,#374151);text-decoration:none;background:var(--site-card-bg,#fff);transition:all .15s
}
.route-links a i{color:var(--site-primary,#0d6efd);font-size:.75rem}
.route-links a:hover{border-color:var(--site-primary,#0d6efd);color:var(--site-primary,#0d6efd)}
.side-cta{background:linear-gradient(150deg,var(--site-primary,#0d6efd),var(--site-primary-dark,#0a58ca));color:#fff;border-radius:calc(var(--site-radius,12px) * 1.3);padding:1.5rem;text-align:center;margin-bottom:1.5rem}
.side-cta h5{color:#fff;font-weight:700;font-family:var(--site-font-heading,inherit)}
.side-cta p{color:rgba(255,255,255,.85);font-size:.92rem}
.side-cta .btn{background:#fff;color:var(--site-primary,#0d6efd);font-weight:700;border-radius:999px}
.side-cta .btn:hover{background:var(--site-accent,#f59e0b);color:#fff}
.side-form .form-control{border-color:var(--site-border,#d1d5db);border-radius:var(--site-radius,10px);min-height:44px}
.side-form textarea.form-control{min-height:90px}
.side-form .form-control:focus{border-color:var(--site-primary,#0d6efd);box-shadow:0 0 0 .2rem color-mix(in srgb,var(--site-primary,#0d6efd) 20%,transparent)}
.faq-acc .accordion-item{border:1px solid var(--site-border,#e5e7eb);border-radius:var(--site-radius,10px)!important;margin-bottom:.6rem;overflow:hidden;background:var(--site-card-bg,#fff)}
.faq-acc .accordion-button{font-weight:600;color:var(--site-heading,#111827);background:var(--site-card-bg,#fff);box-shadow:none}
.faq-acc .accordion-button:not(.collapsed){color:var(--site-primary,#0d6efd);background:color-mix(in srgb,var(--site-primary,#0d6efd) 6%,transparent)}
.faq-acc .accordion-button:focus{box-shadow:none;border-color:var(--site-border,#e5e7eb)}
.faq-acc .accordion-body{color:var(--site-body-text,#374151)}
.related-grid .blog-card h3{font-size:.98rem}
.field-error{display:none;color:#dc3545;font-size:.82rem;margin-top:.3rem}
.field-error.show{display:block}
.is-invalid ~ .field-error{display:block}

/* ---------- City blog page ---------- */
.cityblog-hero{
  position:relative;border-radius:calc(var(--site-radius,12px) * 1.5);overflow:hidden;margin-bottom:2rem;min-height:260px;display:flex;align-items:flex-end;
  background:linear-gradient(150deg,var(--site-primary,#0d6efd),var(--site-primary-dark,#0a58ca))
}
.cityblog-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cityblog-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 20%,rgba(0,0,0,.72))}
.cityblog-hero .cb-txt{position:relative;z-index:1;color:#fff;padding:2rem 1.5rem}
.cityblog-hero .cb-txt h1{color:#fff;font-family:var(--site-font-heading,inherit);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.3rem);margin-bottom:.35rem}
.cityblog-hero .cb-txt a{color:#fff;text-decoration:none;font-weight:600}
.cityblog-hero .cb-txt a:hover{text-decoration:underline}
.cityblog-hero .cb-pill{display:inline-flex;align-items:center;gap:.35rem;background:var(--site-accent,#f59e0b);color:#fff;border-radius:999px;padding:.25rem .75rem;font-size:.8rem;font-weight:700;margin-bottom:.6rem}
.city-route-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem}
.city-route-grid a{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:var(--site-card-bg,#fff);border:1px solid var(--site-border,#e5e7eb);
  border-radius:var(--site-radius,10px);padding:.75rem .9rem;color:var(--site-heading,#111827);text-decoration:none;font-weight:600;font-size:.92rem;transition:all .15s
}
.city-route-grid a small{display:block;font-weight:500;color:var(--site-body-text,#6b7280);font-size:.78rem}
.city-route-grid a i{color:var(--site-primary,#0d6efd)}
.city-route-grid a:hover{border-color:var(--site-primary,#0d6efd);transform:translateY(-2px);box-shadow:0 10px 25px -18px rgba(0,0,0,.4)}

/* ---------- Contact page ---------- */
.contact-section{padding:2.5rem 0 4rem}
.contact-info-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:2rem}
@media (min-width:576px){.contact-info-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:992px){.contact-info-grid{grid-template-columns:repeat(4,1fr)}}
.contact-info-card{
  display:block;background:var(--site-card-bg,#fff);border:1px solid var(--site-border,#e5e7eb);border-radius:calc(var(--site-radius,12px) * 1.3);
  padding:1.4rem 1.25rem;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s;height:100%
}
.contact-info-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(0,0,0,.35)}
.contact-info-card .ci-icon{width:52px;height:52px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:.9rem;background:color-mix(in srgb,var(--site-primary,#0d6efd) 12%,transparent);color:var(--site-primary,#0d6efd)}
.contact-info-card h5{font-family:var(--site-font-heading,inherit);font-size:1rem;font-weight:700;color:var(--site-heading,#111827);margin-bottom:.3rem}
.contact-info-card p{color:var(--site-body-text,#4b5563);margin:0;font-size:.92rem;word-break:break-word}
.contact-form-card{background:var(--site-card-bg,#fff);border:1px solid var(--site-border,#e5e7eb);border-radius:calc(var(--site-radius,12px) * 1.4);padding:1.75rem}
@media (min-width:768px){.contact-form-card{padding:2.25rem}}
.contact-form-card h3{font-family:var(--site-font-heading,inherit);font-weight:700;color:var(--site-heading,#111827)}
.contact-form-card .form-label{font-weight:600;color:var(--site-heading,#111827);font-size:.9rem}
.contact-form-card .form-control{border-color:var(--site-border,#d1d5db);border-radius:var(--site-radius,10px);min-height:48px}
.contact-form-card .form-control:focus{border-color:var(--site-primary,#0d6efd);box-shadow:0 0 0 .2rem color-mix(in srgb,var(--site-primary,#0d6efd) 20%,transparent)}
.contact-form-card textarea.form-control{min-height:130px}
.contact-map{border-radius:calc(var(--site-radius,12px) * 1.4);overflow:hidden;border:1px solid var(--site-border,#e5e7eb);min-height:320px;background:color-mix(in srgb,var(--site-primary,#0d6efd) 6%,transparent)}
.contact-map iframe{width:100%;height:100%;min-height:320px;border:0;display:block}
.contact-side{background:var(--site-card-bg,#fff);border:1px solid var(--site-border,#e5e7eb);border-radius:calc(var(--site-radius,12px) * 1.4);padding:1.5rem;margin-top:1.5rem}
.contact-side h4{font-family:var(--site-font-heading,inherit);font-size:1.1rem;font-weight:700;color:var(--site-heading,#111827)}
.contact-side ul{list-style:none;margin:0;padding:0}
.contact-side li{display:flex;gap:.8rem;padding:.7rem 0;border-bottom:1px dashed var(--site-border,#e5e7eb);color:var(--site-body-text,#374151);font-size:.93rem}
.contact-side li:last-child{border-bottom:0}
.contact-side li i{color:var(--site-primary,#0d6efd);font-size:1.1rem;flex:0 0 auto}
.contact-side li a{color:inherit;text-decoration:none}
.contact-side li a:hover{color:var(--site-primary,#0d6efd)}
.social-row{display:flex;gap:.5rem;flex-wrap:wrap}
.social-row a{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--site-border,#e5e7eb);color:var(--site-body-text,#374151);text-decoration:none;font-size:1.05rem;transition:all .15s}
.social-row a:hover{background:var(--site-primary,#0d6efd);border-color:var(--site-primary,#0d6efd);color:#fff}


/* ============================ MOBILE APP LAYER ===========================
   Phone layout for the blog list / post / city-blog and contact pages.
   ========================================================================= */
@media (max-width: 767.98px) {
  .blog-section, .contact-section { padding: 1.5rem 0 2.5rem; }
  .blog-toolbar { padding: .75rem; gap: .6rem; }
  .blog-toolbar form { flex: 1 1 100%; max-width: none; }
  .cat-chips { gap: .4rem; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .2rem; scrollbar-width: none; }
  .cat-chips::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .cat-chips a { flex: 0 0 auto; white-space: nowrap; }
  .blog-card .blog-body { padding: 1rem; }
  .blog-card h3 { font-size: 1rem; }

  .post-hero { margin-bottom: 1.25rem; border-radius: var(--site-radius, 12px); }
  .post-hero img { max-height: 240px; }
  .post-meta { gap: .35rem 1rem; margin-bottom: 1.15rem; }
  .post-content { font-size: .98rem; }
  .post-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .post-content h2 { font-size: 1.3rem; }
  .post-content h3 { font-size: 1.15rem; }
  .post-share { gap: .5rem; }
  .side-card, .side-cta { padding: 1.1rem; }
  .recent-post img { width: 68px; height: 54px; }
  .route-links { gap: .4rem; }

  .cityblog-hero { min-height: 200px; border-radius: var(--site-radius, 12px); }
  .cityblog-hero .cb-txt { padding: 1.25rem 1rem; }
  .city-route-grid { grid-template-columns: 1fr; }
  .city-route-grid a { min-height: 56px; }

  .contact-form-card { padding: 1.15rem; }
  .contact-form-card .form-control { min-height: 50px; }
  .contact-info-card { padding: 1.1rem; }
  .contact-info-card .ci-icon { width: 44px; height: 44px; font-size: 1.2rem; margin-bottom: .6rem; }
  .contact-map, .contact-map iframe { min-height: 240px; }
  .contact-side { padding: 1.15rem; }
  .contact-side li { padding: .55rem 0; }
}

@media (max-width: 991.98px) {
  .blog-card .blog-cat { font-size: .75rem; }
  .side-list .badge { font-size: .75rem; }
  .cat-chips a .cnt { font-size: .75rem; }
}

@media (max-width: 991.98px) {
  .side-cta a, .side-card a.small { min-height: 40px; display: inline-flex; align-items: center; }
}