/* Bins & service. Page-only classes use the bins- prefix. */

.bins-cards { align-items: stretch; }
.bins-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.bins-card__media { border-radius: 0; aspect-ratio: 4 / 3; background: var(--surface-2); }
.bins-card__media img { width: 100%; height: 100%; object-fit: cover; }
.bins-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); flex: 1; align-items: flex-start; }
.bins-card__body .cluster { align-items: center; gap: var(--sp-3); }
.bins-card__body h3 { margin: 0; }
.bins-card__for { margin: 0; color: var(--text); }
.bins-card__specs { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; }
.bins-card__specs li { display: grid; grid-template-columns: 5rem 1fr; gap: var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--line); }
.bins-card__specs span { color: var(--muted); font-size: var(--fs-sm); }
.bins-card__specs strong { font-weight: 600; color: var(--fg); }
.bins-card__body .btn { margin-top: auto; }
.bins-more { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; justify-content: space-between; margin: var(--sp-6) 0 0; padding: var(--sp-4) var(--sp-5); background: var(--surface-2); border-left: 4px solid var(--c-black); border-radius: var(--r-sm); }
.bins-more .link-arrow { margin-left: var(--sp-2); white-space: nowrap; }

/* Footprint plan */
.bins-plan { margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-4); }
.bins-plan__svg { width: 100%; height: auto; display: block; }
.bins-plan figcaption { margin-top: var(--sp-3); }
.plan-pad { fill: var(--surface-2); stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 6 5; }
.plan-bin { fill: var(--c-black); }
.plan-lid { stroke: var(--c-ink-600); stroke-width: 1.5; fill: none; }
.plan-door { stroke: var(--c-black); stroke-width: 1.5; fill: none; stroke-dasharray: 4 3; }
.plan-doorbar { fill: var(--c-yellow); }
.plan-dim { stroke: var(--muted); stroke-width: 1.2; fill: none; }
.plan-t { font: 600 14px var(--font-text); fill: var(--text); }
.plan-t--on { font: 800 26px var(--font-display); fill: var(--c-white); }
.plan-t--sub { font-size: 13px; fill: var(--muted); font-weight: 500; }
.bins-lineup { margin: var(--sp-7) 0 0; }
.bins-lineup img { width: 100%; height: auto; }
.bins-lineup figcaption { padding-top: var(--sp-3); }

.bins-door img, .bins-enc img { width: 100%; height: auto; display: block; }

/* Who it's for */
.bins-who__card { display: flex; flex-direction: column; gap: var(--sp-3); }
.bins-who__card h3, .bins-who__card p { margin: 0; }

/* Finder */
.bins-finder { margin-top: var(--sp-7); display: grid; gap: var(--sp-6); padding: var(--sp-5); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); border-top: 6px solid var(--c-yellow); }
@media (min-width: 900px) { .bins-finder { grid-template-columns: 1fr 1.15fr; padding: var(--sp-6); } }
.bins-finder__intro { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.bins-finder__intro h3, .bins-finder__intro p { margin: 0; }
.bins-finder__intro .field { width: 100%; max-width: 20rem; }
.bins-finder__result { display: grid; gap: 4px; min-height: 5.5em; padding: var(--sp-4); background: var(--c-yellow-100); border-left: 4px solid var(--c-black); border-radius: var(--r-sm); width: 100%; color: var(--text); font-size: var(--fs-sm); }
.bins-finder__result strong { font: 800 var(--fs-lg) var(--font-display); line-height: 1.2; color: var(--c-black); }
.bins-finder__tag { font: 700 var(--fs-xs) var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--c-ink-700); }
.bins-finder__intro .select { width: 100%; }
[hidden] { display: none !important; }
.bins-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.bins-table th, .bins-table td { text-align: left; padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: top; }
.bins-table thead th { font: 700 var(--fs-xs) var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.bins-table tbody th { font-weight: 700; color: var(--fg); white-space: nowrap; }
.bins-table tr.is-match th, .bins-table tr.is-match td { background: var(--c-yellow-100); box-shadow: inset 0 0 0 0 transparent; }
.bins-table tr.is-match th { box-shadow: inset 4px 0 0 var(--c-black); }
.bins-finder__table .fine { margin-top: var(--sp-3); }
@media (max-width: 479px) { .bins-table tbody th { white-space: normal; } }

/* Schedules + pricing */
.bins-sched .card h3, .bins-sched .card p { margin: 0; }
.bins-sched .card { display: flex; flex-direction: column; gap: var(--sp-2); }
.bins-price { margin-top: var(--sp-7); display: grid; gap: var(--sp-5); padding: var(--sp-5); background: var(--c-black); color: var(--c-white); border-radius: var(--r-lg); }
.bins-price h3 { color: var(--c-white); margin: 0 0 var(--sp-3); }
.bins-price p { margin: 0; color: var(--c-white); }
.bins-price .link-arrow { color: var(--c-yellow); white-space: nowrap; }
.bins-price__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.bins-price__list li { display: grid; gap: 2px; padding: var(--sp-3) var(--sp-4); border-left: 4px solid var(--c-yellow); background: var(--c-ink-900); text-align: left; }
.bins-price__list b { color: var(--c-white); font: 800 var(--fs-md) var(--font-display); }
.bins-price__list span { color: var(--c-white); opacity: .8; font-size: var(--fs-sm); }
.bins-price__cta { padding-top: var(--sp-4); border-top: 1px solid var(--c-ink-700); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; justify-content: space-between; }
@media (min-width: 900px) {
  .bins-price { padding: var(--sp-6); gap: var(--sp-5) var(--sp-6); }
  .bins-price__head { max-width: 62ch; }
  .bins-price__list { grid-template-columns: repeat(3, 1fr); }
}

/* Rules */
.bins-rules .card h3 { margin: 0 0 var(--sp-3); }
.bins-rules .fine { margin: var(--sp-4) 0 0; }
.bins-pointer { margin-top: var(--sp-6); display: grid; gap: var(--sp-4); align-items: center; padding: var(--sp-5); background: var(--bg); border: 1px solid var(--line-strong, var(--line)); border-left: 6px solid var(--c-black); border-radius: var(--r); }
.bins-pointer > div { display: flex; flex-direction: column; gap: 2px; }
.bins-pointer strong { color: var(--fg); font-family: var(--font-display); font-size: var(--fs-md); }
@media (min-width: 800px) { .bins-pointer { grid-template-columns: auto 1fr auto; } }

.bins-place { margin: 0; }
#enclosure .btn-group { margin-top: var(--sp-2); }

/* Fixed ratios so the shared .media frame never leaves empty space */
.bins-lineup .media { aspect-ratio: 2 / 1; }
.bins-door { aspect-ratio: 4 / 3; }
.bins-enc { aspect-ratio: 16 / 9; }
.bins-lineup img, .bins-door img, .bins-enc img { width: 100%; height: 100%; object-fit: cover; }

/* Closing band: give the sub line air under the heading */
.cta-band h2 + .cta-sub { margin-top: var(--sp-4); }
@media (max-width: 599px) { .bins-card__body .btn { width: 100%; } }
@media (max-width: 599px) {
  .bins-hero .fact-card li { grid-template-columns: 1fr; gap: 2px; }
  .bins-hero .fact-card li > strong { font-size: var(--fs-lg); white-space: normal; }
  .bins-hero .fact-card li small { display: inline; margin-left: 0; }
}

/* Cards: keep both spec stacks on the same lines */
@media (min-width: 700px) { .bins-card__for { min-height: 1.6em; } .bins-card__specs li:nth-child(3) { min-height: 3.6em; } }
.bins-card__specs li { align-items: baseline; }

/* Round the plain images instead of the logo-plate chamfer */
.bins-lineup .media, .bins-door, .bins-enc { border-radius: var(--r-lg); overflow: hidden; clip-path: none; }

/* Finder (no table): inputs left, result right */
.bins-finder__out { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.bins-finder__out .bins-finder__result { min-height: 7em; }
.bins-finder__incl { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.bins-finder__incl li { font-size: var(--fs-xs); font-weight: 600; padding: 4px 10px; border: 1px solid var(--line); border-radius: 0; background: var(--surface-2); }
.bins-finder__out .fine { margin: 0; }
@media (max-width: 599px) { .bins-finder__out .btn { width: 100%; } }

/* Placement diagrams */
.bins-spots { margin-top: var(--sp-6); }
.bins-spot { margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-4); border-top: 5px solid var(--c-black); }
.bins-spot--bad { border-top-color: #b3261e; }
.bins-spot__svg { width: 100%; height: auto; display: block; border-radius: var(--r-sm); }
.bins-spot .fig-label { margin-bottom: var(--sp-3); color: var(--text); font-size: var(--fs-sm); }
.sp-bld { fill: var(--c-ink-700); } .sp-lot { fill: var(--surface-2); stroke: var(--line); }
.sp-stall { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.sp-road { fill: var(--c-ink-900); } .sp-curb { stroke: var(--c-yellow); stroke-width: 3; }
.sp-pad { fill: var(--c-yellow-100); stroke: var(--c-black); stroke-width: 1.5; stroke-dasharray: 5 4; }
.sp-bin { fill: var(--c-black); } .sp-bar { fill: var(--c-yellow); }
.sp-swing { fill: none; stroke: var(--c-black); stroke-width: 1.5; stroke-dasharray: 4 3; }
.sp-truck { fill: var(--c-ink-600); } .sp-walk { stroke: var(--c-black); stroke-width: 2; stroke-dasharray: 2 4; stroke-linecap: round; }
.sp-car { fill: #b3261e; } .sp-fire { fill: rgba(179,38,30,.16); stroke: #b3261e; stroke-dasharray: 5 4; }
.sp-far { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.sp-t { font: 600 12px var(--font-text); fill: var(--text); } .sp-t--on { fill: #fff; font-weight: 700; } .sp-t--fire { fill: #8f1d17; font-weight: 700; }
.sp-badge--ok { fill: #1c7a3e; } .sp-badge--no { fill: #b3261e; }
.sp-mark { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bins-needs { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.bins-needs li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); }
.bins-needs .icon { flex: none; margin-top: 2px; }
@media (min-width: 800px) { .bins-needs { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }

/* brand line under the hero lede (owner: it lives on the bin service and enclosures pages) */
.bins-hero__line { margin-top: var(--sp-4); font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md); color: #0B0B0C; }
.bins-hero__line span, .bins-hero__line { background: #FFC72C; display: inline-block; padding: 0 .15em; margin: var(--sp-4) 0 0 -.15em; }
/* hero fact card: stack label over value so long values never overflow the card */
.bins-hero .fact-card li { grid-template-columns: 1fr; gap: 2px; }
.bins-hero .fact-card li > strong { font-size: var(--fs-lg); white-space: normal; text-align: left; }
.bins-hero .fact-card li small { display: block; margin-left: 0; }