/* The new Pakistani homepage.
 *
 * Built on the v2 theme's own custom properties so it inherits the site's colours rather than
 * declaring a second palette beside them. Nothing here is a framework; the page is a column of
 * bands and every band is either a rail of cards or a list.
 *
 * MOBILE IS NOT AN AFTERTHOUGHT HERE. Most of this site's Pakistani readers are on a phone, so
 * every grid is auto-fit and every rail scrolls horizontally below 720px rather than squeezing
 * four cards into a 375px screen. The breakpoints are at the bottom.
 */

.hm-wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* ------------------------------------------------------------------------- colour ------- *
 * One colour per band, declared as two custom properties and inherited by everything inside
 * it - the icon, the headline figure on each card, the hover border, the chips. That is why
 * there is no .hm-card--green anywhere: the card does not know its colour, it reads the band's.
 *
 * The pairs are a dark ink and a pale wash FROM THE SAME HUE, and the ink is dark enough to read
 * as body text on white. Colour here is for telling one band from the next at a glance while
 * scrolling, not for decoration, so a section whose job is quiet (makers, comparisons) gets a
 * quiet hue and the one the site is built on - mileage - keeps the brand green.
 */
.hm-band              { --c: #0B8346; --cbg: #E4F2EA; }
.hm-band[data-c=slate]  { --c: #44586B; --cbg: #ECF1F5; }
.hm-band[data-c=teal]   { --c: #0E7C86; --cbg: #E1F2F3; }
.hm-band[data-c=blue]   { --c: #1D5FA8; --cbg: #E8F0FA; }
.hm-band[data-c=amber]  { --c: #9A5B06; --cbg: #FBF0DD; }
.hm-band[data-c=purple] { --c: #5B4BA8; --cbg: #EDEBFA; }
.hm-band[data-c=red]    { --c: #A8322F; --cbg: #FAEAEA; }
.hm-band[data-c=rose]   { --c: #9C3263; --cbg: #FAEAF1; }

/* --------------------------------------------------------------------------- icons ------- *
 * Inline SVG from one hidden sprite at the top of the page. Not an icon font and not a CDN:
 * nine small outlines are a few hundred bytes of markup, and a webfont for them would be a
 * network round trip the homepage has to wait on before it can draw.
 */
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hm-ichip { width: 34px; height: 34px; border-radius: 9px; display: inline-flex;
            align-items: center; justify-content: center; background: var(--cbg); color: var(--c); }
.hm-ichip .ic { width: 19px; height: 19px; }

/* ------------------------------------------------------------------------------- hero ----- */
/* A wash rather than a photograph. A hero image on a car site is always somebody's photograph of
   somebody's car, and this site does not publish a photograph it cannot name the source of. */
.hm-hero { background: linear-gradient(180deg, #EAF4EE 0%, #F6F9F7 100%);
           border-bottom: 1px solid #E0E9E4; padding: 34px 0 30px; }
.hm-hero h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.2; font-weight: 800; color: #10231A; }
.hm-hero p.lead { margin: 0 0 18px; font-size: 15px; color: #4A5A51; max-width: 640px; }

.hm-search { max-width: 720px; }
.hm-searchrow { display: flex; gap: 8px; }
.hm-search input[type=text] { flex: 1; min-width: 0; height: 46px; border: 1px solid #CBD6CF;
                              border-radius: 8px; font-size: 15px; padding: 0 12px;
                              background: #fff; color: #10231A; }

/* ------------------------------------------------------------------------ the scope ----- *
 * Real radios with the native circle hidden - not divs pretending to be radios - so arrow keys,
 * tab order, the focus ring and a screen reader's "radio, 1 of 3" all come for free. The input
 * is clipped rather than display:none, because display:none takes an input out of the tab order
 * and would have made this keyboard-unreachable.
 */
.hm-scope { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.hm-scope label { cursor: pointer; }
.hm-scope input { position: absolute; width: 1px; height: 1px; opacity: 0;
                  clip: rect(0 0 0 0); clip-path: inset(50%); }
.hm-scope span { display: inline-flex; align-items: center; gap: 7px; height: 38px;
                 padding: 0 15px; border: 1px solid #CBD6CF; border-radius: 999px;
                 background: #fff; color: #27362E; font-size: 14.5px; }
.hm-scope span .ic { width: 16px; height: 16px; color: #7C8A83; }
.hm-scope label:hover span { border-color: #0B8346; }
.hm-scope input:checked + span { background: #0B8346; border-color: #0B8346; color: #fff;
                                 font-weight: 600; }
.hm-scope input:checked + span .ic { color: #fff; }
.hm-scope input:focus-visible + span { outline: 2px solid #0B8346; outline-offset: 2px; }
.hm-search button { height: 46px; padding: 0 20px; border: 0; border-radius: 8px; cursor: pointer;
                    background: #0B8346; color: #fff; font-size: 15px; font-weight: 600;
                    display: inline-flex; align-items: center; gap: 7px; }
.hm-search button:hover { background: #096C3A; }
.hm-search button .ic { color: #fff; }

/* Today's pump price, which is the one number on this page that is not about a car — and the
   reason it earns a strip of its own rather than a line of grey text. */
.hm-petrol { margin-top: 16px; display: inline-flex; align-items: center; flex-wrap: wrap;
             gap: 6px 14px; font-size: 14px; color: #3B4A42; background: #fff;
             border: 1px solid #DCE6E0; border-radius: 999px; padding: 8px 16px; }
.hm-petrol .ic { width: 16px; height: 16px; color: #C2410C; }
.hm-petrol b { color: #10231A; }
.hm-petrol .src { color: #6B7A72; font-size: 12.5px; }
@media (max-width: 720px) { .hm-petrol { border-radius: 12px; display: flex; } }

/* ------------------------------------------------------------------------------ bands ----- */
.hm-band { padding: 30px 0; border-bottom: 1px solid #ECEFED; }
.hm-band.alt { background: #FAFBFA; }
.hm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
           margin: 0 0 4px; }
.hm-head .t { display: flex; align-items: center; gap: 11px; min-width: 0; }
.hm-head h2 { margin: 0; font-size: 21px; font-weight: 700; color: #10231A; }
.hm-head a { font-size: 14px; color: var(--c); text-decoration: none; white-space: nowrap;
             display: inline-flex; align-items: center; gap: 5px; }
.hm-head a:hover { text-decoration: underline; }
.hm-head a .ic { width: 15px; height: 15px; }
/* Indented to sit under the heading rather than under the icon, which otherwise left the
   sentence floating a chip's width out from the section it describes. */
.hm-sub { margin: 0 0 16px 45px; font-size: 14px; color: #5A6A61; }
@media (max-width: 720px) { .hm-sub { margin-left: 0; } }

/* ------------------------------------------------------------------------------ chips ----- */
.hm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 8px 7px 14px;
           border: 1px solid #DDE4E0; border-radius: 999px; background: #fff;
           font-size: 14px; color: #1C2B23; text-decoration: none; }
.hm-chip:hover { border-color: var(--c); color: var(--c); }
/* The count is a pill in the band's own wash, so it reads as a quantity rather than as part of
   the maker's name - "Toyota 20" ran together as four words before it had a shape of its own. */
.hm-chip i { font-style: normal; font-size: 12px; font-weight: 700; line-height: 1;
             padding: 4px 7px; border-radius: 999px; background: var(--cbg); color: var(--c); }

/* ------------------------------------------------------------------------------ cards ----- */
/* Explicit column counts, not auto-fill.
 *
 * auto-fill picks the count from the available width, which at 1150px gave five columns for a
 * rail of six cards - five across and one stranded on a row of its own, which reads as a broken
 * page rather than a full one. The rails hold EIGHT cards and the counts below all divide it:
 * four across at desktop (two rows), two at tablet (four rows), a scrolling rail on a phone. */
.hm-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .hm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hm-card { display: block; border: 1px solid #E4E9E6; border-radius: 12px; overflow: hidden;
           background: #fff; text-decoration: none; color: inherit; }
.hm-card:hover { border-color: var(--c); }
.hm-card .img { aspect-ratio: 16 / 10; background: var(--cbg); overflow: hidden; position: relative; }
.hm-card .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-card .body { padding: 11px 13px 13px; }
.hm-card .nm { font-weight: 700; font-size: 15px; color: #10231A; line-height: 1.3; }
.hm-card .mt { margin-top: 4px; font-size: 13px; color: #6B7A72;
               display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.hm-card .mt .ic { width: 14px; height: 14px; color: #93A09A; }
.hm-card .fg { margin-top: 9px; display: flex; align-items: center; justify-content: space-between;
               gap: 8px; }
/* The headline figure takes the band's colour, so the green on a mileage card and the amber on
   a price are the same decision made once at the top of this file. */
.hm-card .big { display: inline-flex; align-items: center; gap: 5px;
                font-size: 16px; font-weight: 800; color: var(--c);
                background: var(--cbg); border-radius: 999px; padding: 4px 11px 4px 9px; }
.hm-card .big .ic { width: 15px; height: 15px; }
.hm-card .pr { font-size: 13px; color: #3B4A42; }

/* A play mark on a video thumbnail, so the row of videos is not mistaken for a row of cars. */
.hm-card .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
                 width: 42px; height: 42px; border-radius: 50%; background: rgba(12, 20, 16, .62);
                 display: flex; align-items: center; justify-content: center; }
.hm-card .play .ic { width: 17px; height: 17px; color: #fff; fill: #fff; stroke: none;
                     margin-left: 2px; }

/* ------------------------------------------------------------------------------ table ----- */
.hm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hm-table th { text-align: left; font-weight: 600; color: #6B7A72; font-size: 12px;
               text-transform: uppercase; letter-spacing: .04em; padding: 0 10px 8px; }
.hm-table td { padding: 10px; border-top: 1px solid #ECEFED; color: #1C2B23; }
.hm-table td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hm-table a { color: #10231A; text-decoration: none; font-weight: 600; }
.hm-table a:hover { color: var(--c); }
.hm-table td.n b { color: var(--c); }
.hm-table tbody tr:hover td { background: var(--cbg); }

/* ------------------------------------------------------------------------------- list ----- */
.hm-rows { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.hm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
          padding: 11px 14px; border: 1px solid #E4E9E6; border-radius: 10px; background: #fff;
          text-decoration: none; color: #1C2B23; font-size: 14px; }
.hm-row:hover { border-color: var(--c); background: var(--cbg); }
.hm-row b { font-weight: 700; color: #10231A; display: flex; align-items: center; gap: 8px;
            min-width: 0; }
.hm-row b .ic { width: 16px; height: 16px; color: var(--c); }
.hm-row span { color: #6B7A72; font-size: 13px; white-space: nowrap; }

/* ------------------------------------------------------------------------- the editions --- */
.hm-eds { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.hm-ed { border: 1px solid #E4E9E6; border-radius: 12px; padding: 16px 18px; background: #fff;
         text-decoration: none; color: inherit; }
.hm-ed:hover { border-color: var(--ec, #0B8346); }
.hm-ed .hm-ichip { background: var(--ebg, #E4F2EA); color: var(--ec, #0B8346); margin-bottom: 10px; }
.hm-ed b { display: block; font-size: 16px; color: #10231A; margin-bottom: 4px; }
.hm-ed span { font-size: 14px; color: #5A6A61; }
/* Three cards in one band, so the colour varies per card rather than per band here. */
.hm-ed[data-c=red]   { --ec: #A8322F; --ebg: #FAEAEA; }
.hm-ed[data-c=blue]  { --ec: #1D5FA8; --ebg: #E8F0FA; }
.hm-ed[data-c=green] { --ec: #0B8346; --ebg: #E4F2EA; }

/* --------------------------------------------------------------------------- the phone ---- */
@media (max-width: 720px) {
  .hm-hero { padding: 24px 0 22px; }
  .hm-hero h1 { font-size: 24px; }
  .hm-band { padding: 22px 0; }
  .hm-head h2 { font-size: 18px; }
  /* The box and the button stack. Side by side on a 375px screen the button took half the width
     and the placeholder was cut off mid-word — "Search a car — Civi" — which tells the reader
     less than an empty box would. */
  .hm-searchrow { flex-wrap: wrap; }
  .hm-search input[type=text] { flex: 1 1 100%; height: 44px; }
  .hm-search button { flex: 1 1 100%; height: 44px; justify-content: center; }
  .hm-scope span { height: 36px; padding: 0 13px; font-size: 14px; }

  /* A rail of cards on a 375px screen is one card and a sliver of the next, which is a better
     signal that there is more to the right than four crushed cards would be. */
  .hm-grid { grid-auto-flow: column; grid-auto-columns: 74%; grid-template-columns: none;
             overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px;
             -webkit-overflow-scrolling: touch; }
  .hm-grid > * { scroll-snap-align: start; }
  .hm-rows { grid-template-columns: 1fr; }

  /* The split table keeps every column; it is four short numbers and they fit. */
  .hm-table th, .hm-table td { padding: 8px 6px; }
  .hm-table { font-size: 13px; }
}