/* ==========================================================================
   services.css  |  First Class Services Automotive
   Loads AFTER css/style.css. Styles the package cards and FAQ on services.html.
   Palette from the site: #101010 page, #191919 section, #202020 card,
   #303030 lines, #C75000 accent, #E3E3E3 text, #BBB muted.
   Layout: four package cards side by side on wide screens (like a price
   list), two by two on tablets and small laptops, one column on phones.
   ========================================================================== */

.pk-wrap {
  padding: 40px 0 48px;
  background: #191919;
}

/* The grid reacts to the width of its own container, not the screen, so it
   always fits inside the page column whatever width the theme gives it. */
.pk-wrap .container {
  container-type: inline-size;
}
.pk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
@container (min-width: 560px) {
  .pk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 940px) {
  .pk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Card ---------- */
.pk {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #202020;
  border-top: 4px solid #C75000;
}

/* Image banner with price tag */
.pk-media {
  position: relative;
  aspect-ratio: 16 / 6;
  overflow: hidden;
  background: #101010;
}
.pk-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
}
.pk-price {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 8px 14px 7px;
  background: #C75000;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.pk-price small {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 400;
}

/* Body */
.pk-body {
  flex: 1 1 auto;
  padding: 18px 20px 6px;
}
.pk-body h2 {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.3;
}
.pk-lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #E3E3E3;
}

/* Fault codes */
.pk-codes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: #BBB;
}
.pk-codes li + li {
  padding: 2px 8px;
  border: 2px solid #303030;
  background: #191919;
  font-weight: 700;
  color: #fff;
}

/* What is included: tick list */
.pk-list {
  margin: 16px 0 0;
  padding: 14px 0 0;
  list-style: none;
  border-top: 1px solid #303030;
}
.pk-list li {
  position: relative;
  margin: 0 0 8px;
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.5;
  color: #E3E3E3;
}
.pk-list li::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 1px;
  width: 10px;
  height: 5px;
  border-left: 2px solid #C75000;
  border-bottom: 2px solid #C75000;
  transform: rotate(-45deg);
}

/* Optional extra */
.pk-extra {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: #191919;
  border-left: 4px solid #C75000;
  font-size: 12.5px;
  line-height: 1.55;
  color: #E3E3E3;
}
.pk-extra strong { color: #fff; }

/* Footer: note and button, pinned to the bottom so buttons line up */
.pk-foot {
  padding: 14px 20px 20px;
}
.pk-foot p {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.55;
  color: #BBB;
}
.pk-foot .fa {
  width: 14px;
  margin-right: 6px;
  text-align: center;
  color: #C75000;
}
.pk-foot .btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 11px 14px;
  text-align: center;
}
.pk-foot .btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ---------- Remapping card: full row, with the performance tables ---------- */
.pk--wide {
  grid-column: 1 / -1;
}
.pk--wide .pk-media {
  aspect-ratio: 16 / 8;
}
.pk-tables {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 6px 20px 8px;
}
.pk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: center;
  color: #E3E3E3;
}
.pk-table caption {
  padding: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  color: #fff;
}
.pk-table th,
.pk-table td {
  padding: 8px 4px;
  border: 2px solid #303030;
}
.pk-table th {
  background: #191919;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  color: #BBB;
}
.pk-table th.pk-up {
  background: #C75000;
  color: #fff;
}
.pk-table td {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.pk-table td.pk-up {
  background: rgba(199, 80, 0, 0.12);
}
.pk-table td span {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: #F0913F;
}

@container (min-width: 940px) {
  .pk--wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
    grid-template-areas:
      "media body"
      "media tables"
      "foot  foot";
  }
  .pk--wide .pk-media  { grid-area: media; aspect-ratio: auto; }
  .pk--wide .pk-body   { grid-area: body; padding-bottom: 0; }
  .pk--wide .pk-tables { grid-area: tables; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px 20px 20px; }
  .pk--wide .pk-foot {
    grid-area: foot;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid #303030;
  }
  .pk--wide .pk-foot p { margin: 0; }
  .pk--wide .pk-foot .btn { width: auto; min-width: 200px; }
}

/* ---------- FAQ ---------- */
.pk-faq {
  padding: 40px 0 56px;
  background: #101010;
}
.pk-faq h2 {
  margin: 0 0 24px;
  font-size: 25px;
  text-align: center;
}
.pk-faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.pk-faq-item {
  padding: 20px;
  border: 2px solid #303030;
}
.pk-faq-item h3 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.4;
}
.pk-faq-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #CCC;
}
.pk-faq-item a {
  color: #fff;
  text-decoration: underline;
}
@media (min-width: 768px) {
  .pk-faq-grid { grid-template-columns: repeat(2, 1fr); }
  .pk-faq-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}