/* ==========================================================================
Bhaggya Tours — Car Listing v2
Style: Full-bleed image card, text overlaid on photo, details reveal
on hover (desktop) / tap (mobile).
Palette: Indigo #3f449b (brand), Amber #f1c40f (popular),
Orange #ff8a00 (CTA), Ink #0e0f1f, White — left as originally
authored (separate accent palette from framework's marigold/
peacock, kept intentionally per project decision).
---- Loads AFTER framework.css. Structural fixes made in this pass ----
1. This section now uses the framework's Section → Container →
Section Header → Section Content wrapping (see brand-car-listing.php).
`.bt-car-container-compact` no longer sets its own max-width/page
padding — `.container` (framework) already owns that. This file
only controls the grid's own column layout.
2. Grid gaps switched from hardcoded 20px/24px to
var(--space-grid-gap) / var(--space-grid-gap-mobile), so the
listing's spacing stays on the sitewide Level-3 hierarchy instead
of drifting independently.
3. Removed the duplicate Google Fonts Inter import — framework.css
already loads Inter site-wide.
4. Added a scoped `.section-header h1` rule (see below) so the page's
— kept as for SEO, one per page — gets the same
typography tokens framework.css gives `.section-header h2`
elsewhere on the site. The sub-heading was changed from to
to match the framework's actual Heading + Sub Heading
structure, so it inherits `.section-header p` for free.
========================================================================== */
/* Page heading here is an
(SEO), but visually it should read like
every other section heading on the site — mirror framework's
.section-header h2 tokens rather than duplicating new values. */
.section-header h1{
font-family:'Inter', sans-serif;
font-weight:600;
font-size:var(--fs-section);
line-height:var(--lh-section);
margin:0 0 12px;
color:var(--cream);
letter-spacing:-0.01em;
}
/* ---------------- Grid ---------------- */
.bt-car-container-compact {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-grid-gap-mobile);
font-family: 'Inter', sans-serif;
}
/* ---------------- Card ---------------- */
.bt-compact-item {
position: relative;
border-radius: 22px;
overflow: hidden;
height: 300px;
cursor: pointer;
box-shadow: 0 10px 24px rgba(14, 15, 31, 0.18);
transition: box-shadow 0.3s ease;
isolation: isolate;
}
@media (hover: hover) {
.bt-compact-item:hover { box-shadow: 0 18px 34px rgba(14, 15, 31, 0.28); }
}
/* ---------------- Image ---------------- */
.bt-media-large {
position: absolute;
inset: 0;
z-index: 0;
}
.bt-media-large img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.6s ease;
}
@media (hover: hover) {
.bt-compact-item:hover .bt-media-large img { transform: scale(1.08); }
}
/* Base gradient — always on for text legibility */
.bt-compact-item::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.8) 100%);
transition: background 0.35s ease;
pointer-events: none;
}
/* Darker gradient when expanded, so the extra row stays readable */
@media (hover: hover) {
.bt-compact-item:hover::before { background: linear-gradient(180deg, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.88) 100%); }
}
.bt-compact-item.is-open::before { background: linear-gradient(180deg, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.88) 100%); }
/* ---------------- Top badges ---------------- */
.bt-pop-mini {
position: absolute;
top: 14px;
left: 14px;
z-index: 3;
background: #f1c40f;
color: #14162b;
font-size: 10px;
letter-spacing: 0.3px;
padding: 5px 10px 5px 8px;
font-weight: 700;
border-radius: 20px;
display: flex;
align-items: center;
gap: 4px;
box-shadow: 0 3px 8px rgba(241, 196, 15, 0.5);
}
.bt-pop-mini::before { content: "★"; font-size: 9px; }
.bt-rate-mini {
position: absolute;
top: 14px;
right: 14px;
z-index: 3;
background: rgba(255, 255, 255, 0.95);
color: #14162b;
padding: 4px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
backdrop-filter: blur(4px);
}
.bt-rate-mini span { color: #3f449b; }
/* ---------------- Overlay content (always visible) ---------------- */
.bt-content-box {
position: absolute;
left: 0; right: 0; bottom: 0;
z-index: 3;
padding: 18px 20px 18px;
color: #fff;
}
.bt-brand-text {
font-size: 16px;
line-height: 26px;
color: rgba(255,255,255,0.75);
text-transform: uppercase;
display: block;
letter-spacing: 0.6px;
font-weight: 400;
margin-bottom: 2px;
}
.bt-car-name {
font-size: 24px;
line-height: 32px;
margin: 0 0 6px;
color: #fff;
font-weight: 600;
}
.bt-specs-line {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: rgba(255,255,255,0.85);
margin: 0 0 12px;
flex-wrap: wrap;
}
.bt-specs-line span {
display: flex;
align-items: center;
gap: 4px;
background: rgba(255,255,255,0.15);
padding: 3px 9px;
border-radius: 8px;
backdrop-filter: blur(3px);
}
.bt-specs-line i { color: #f1c40f; }
/* ---------------- Two states inside content: default CTA vs expanded actions ---------------- */
.bt-cta-default {
display: inline-flex;
align-items: center;
gap: 8px;
background: #ff8a00;
color: #fff;
font-weight: 700;
font-size: 13px;
padding: 10px 20px;
border-radius: 10px;
text-decoration: none;
transition: opacity 0.25s ease, transform 0.25s ease;
box-shadow: 0 6px 16px rgba(255, 138, 0, 0.4);
}
.bt-action-mini {
display: flex;
gap: 8px;
max-height: 0;
opacity: 0;
transform: translateY(8px);
overflow: hidden;
transition: max-height 0.35s ease, opacity 0.3s ease, transform 0.3s ease;
}
/* Expand on hover (desktop) or .is-open (tap, JS-toggled) */
@media (hover: hover) {
.bt-compact-item:hover .bt-action-mini {
max-height: 60px; opacity: 1; transform: translateY(0);
}
.bt-compact-item:hover .bt-cta-default {
opacity: 0; transform: translateY(4px); max-height: 0; margin: 0; padding: 0;
}
}
.bt-compact-item.is-open .bt-action-mini { max-height: 60px; opacity: 1; transform: translateY(0); }
.bt-compact-item.is-open .bt-cta-default { opacity: 0; transform: translateY(4px); max-height: 0; margin: 0; padding: 0; pointer-events: none; }
.btn-c {
flex: 1;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 10px;
text-decoration: none;
font-size: 12px;
font-weight: 600;
transition: filter 0.2s ease, transform 0.15s ease;
}
.btn-c:active { transform: scale(0.96); }
.btn-call-m { background: #3f449b; color: #fff; }
.btn-wa-m { background: #25d366; color: #fff; }
.btn-c:hover { filter: brightness(1.08); }
/* ---------------- Empty state ---------------- */
.bt-empty {
text-align: center;
padding: 60px 20px;
color: #888;
font-size: 14px;
}
/* ==========================================================================
Tablet / Desktop — 2 & 3 column grid, taller cards
(max-width/margin below are an intentional inner narrowing of the
grid at the 2-col breakpoint — not a redefinition of .container,
which stays owned by framework.css)
========================================================================== */
@media (min-width: 640px) {
.bt-car-container-compact { grid-template-columns: repeat(2, 1fr); max-width: 1000px; margin: 0 auto; }
.bt-compact-item { height: 340px; }
}
@media (min-width: 1024px) {
.bt-car-container-compact { grid-template-columns: repeat(3, 1fr); max-width: none; gap: var(--space-grid-gap); }
.bt-compact-item { height: 360px; }
}