/* ==========================================================================
   Quotes found - the reading list above the quotation cards.
   ========================================================================== */

/* While the list is on screen the sticky menu lifts away, and it slides back
   once the list has scrolled past. */
header {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

header.is-out-of-view {
  transform: translateY(-100%);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  header { transition: none; }
}

.quote-list {
  margin: 0 0 1.1rem;
  padding: 0.95rem 1rem 1.05rem;
  background: #ffffff;
  border: 1px solid #e2e8e4;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(18, 53, 36, 0.07);
}

.quote-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.8rem;
  margin-bottom: 0.7rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #eef2ee;
}

.quote-list-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: var(--primary-navy, #123524);
  font-size: 0.98rem;
  font-weight: 800;
}

.quote-list-head h3 i { color: #166534; font-size: 0.9em; }

.quote-list-head p {
  margin: 0;
  color: #5b6b62;
  font-size: 0.78rem;
}

/* Three compact cards to a row on a laptop, two on a tablet, one on a phone. */
.quote-list-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.quote-list-row {
  --quote-accent: #166534;
  --quote-accent-tint: rgba(22, 101, 52, 0.06);
  /* The quote's own details in the left column, the rule, the limits in the
     right one, and the two actions across the foot. */
  display: grid;
  position: relative;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1.05fr);
  grid-template-areas:
    "id rule benefits"
    "actions actions actions";
  column-gap: 0.75rem;
  row-gap: 0.55rem;
  padding: 0.7rem 0.8rem 0.75rem;
  border: 1px solid #e8eeea;
  border-top: 3px solid var(--quote-accent);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--quote-accent-tint), #ffffff 42%);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.quote-list-row:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(18, 53, 36, 0.10); }

.quote-list-row.is-active {
  box-shadow: 0 0 0 2px var(--quote-accent);
  border-color: var(--quote-accent);
}

.quote-list-top {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.quote-list-logo {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6ece8;
}

.quote-list-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.quote-list-logo-text {
  background: var(--quote-accent);
  border-color: var(--quote-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
}

.quote-list-num {
  /* The quote's number, sitting as a tab on the card's top edge so the
     insurer's name has the rest of the line to itself. */
  position: absolute;
  top: -11px;
  right: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--quote-accent);
  color: var(--quote-accent);
  font-size: 0.64rem;
  font-weight: 800;
}

/* Left column: insurer, plan, members, yearly price, one under the other. */
.quote-list-id {
  grid-area: id;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}

.quote-list-insurer {
  flex: 1 1 auto;
  min-width: 0;
  color: #123524;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.25;
  /* One line, scaled down by the fit pass where it would otherwise fold; the
     ellipsis is only ever reached if a name cannot fit at any readable size. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quote-list-plan,
.quote-list-members {
  display: block;
  min-width: 0;
  color: #4d6055;
  font-size: 0.75rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-list-members { color: #71827a; font-size: 0.72rem; }

.quote-list-price {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  margin-top: 0.3rem;
}

.quote-list-price small {
  color: #7b8b82;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.quote-list-price strong {
  color: var(--quote-accent);
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
}

/* The line that parts the two halves of the card. */
.quote-list-rule {
  grid-area: rule;
  align-self: stretch;
  justify-self: center;
  width: 1px;
  background: #e4ebe6;
}

/* Right column: the five limits, label in the left cell, figure in the right,
   so the figures line up down the card. */
.quote-list-benefits {
  grid-area: benefits;
  /* How much the five limit lines are scaled down to stay on one line, set by
     the fit pass in js/quote-list.js and 1 wherever the width allows. */
  --ql-fit: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  column-gap: 0.45rem;
  row-gap: 0.14rem;
  min-width: 0;
}

.quote-list-benefit-label {
  color: var(--quote-accent);
  font-style: normal;
  font-size: calc(0.63rem * var(--ql-fit, 1));
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.5;
  white-space: nowrap;
}

.quote-list-benefit-value {
  display: flex;
  /* The figure and the way it is counted stay on one line; the fit pass shrinks
     the type rather than letting "per family" drop to a second line. */
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.28rem;
  min-width: 0;
  color: #1f3129;
  font-size: calc(0.72rem * var(--ql-fit, 1));
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.quote-list-benefit-figure { flex: 0 0 auto; }

.quote-list-benefit-value.is-off { color: #b3c0b8; font-weight: 600; }

/* The narrowest phones, or a reader whose own text size is turned well up, can
   leave no room at all for "KSh 3.5M per family" on one line. There the line
   takes a second row instead of running past the card's edge. */
.quote-list-benefits.is-tight .quote-list-benefit-value { flex-wrap: wrap; }

.quote-list-benefit-scope {
  flex: 0 0 auto;
  color: #7b8b82;
  font-size: calc(0.62rem * var(--ql-fit, 1));
  font-weight: 600;
  white-space: nowrap;
}

.quote-list-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.55rem;
  border-top: 1px solid #eef2ee;
  white-space: nowrap;
}

.quote-list-apply {
  flex: 1 1 auto;
  padding: 0.44rem 0.7rem;
  border: 1px solid var(--quote-accent);
  border-radius: 999px;
  background: var(--quote-accent);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.quote-list-apply:hover { filter: brightness(0.9); transform: translateY(-1px); }

.quote-list-details {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.44rem 0.6rem;
  border: 1px solid #cfdcd3;
  border-radius: 999px;
  background: #fff;
  color: var(--quote-accent);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.quote-list-details:hover { background: var(--quote-accent-tint); border-color: var(--quote-accent); }

@media (max-width: 1199px) {
  .quote-list-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .quote-list-rows { grid-template-columns: 1fr; }
}

body[data-mobile="true"] .quote-list { padding: 0.8rem 0.75rem 0.9rem; border-radius: 14px; }
body[data-mobile="true"] .quote-list-head { flex-direction: column; gap: 0.25rem; }
body[data-mobile="true"] .quote-list-head p { font-size: 0.72rem; }
body[data-mobile="true"] .quote-list-row {
  padding: 0.6rem 0.65rem 0.7rem;
  /* A phone has little width to spare, so the limits take slightly more of it
     than the quote's own details and the gap between them narrows. */
  grid-template-columns: minmax(0, 0.95fr) 1px minmax(0, 1.05fr);
  column-gap: 0.5rem;
}
body[data-mobile="true"] .quote-list-benefits { column-gap: 0.35rem; }
/* A smaller mark on a phone gives the insurer's name more of the line, so it
   holds at one line far longer. */
body[data-mobile="true"] .quote-list-logo { width: 26px; height: 26px; border-radius: 7px; }
body[data-mobile="true"] .quote-list-top { gap: 0.4rem; }
body[data-mobile="true"] .quote-list-apply,
body[data-mobile="true"] .quote-list-details { padding: 0.42rem 0.6rem; font-size: 0.72rem; }