/* The live site's tariff card (src/components/TariffCard.astro), copied from a
   build of the site (_astro/TariffCard.BI0swT47.css) with its scope attributes removed. The
   card carries .site-chrome, which supplies the site's own colour variables.
   Below it: the "Read more" panel with the new design's extra details, and the
   finder's states (dimmed, linked to, collapsed on phones). */
.tariff-card{background:var(--white);border:1px solid var(--border);border-radius:var(--card-r);display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease;position:relative}
.tariff-card.featured{border:2px solid var(--teal)}
.tariff-card:hover{box-shadow:0 8px 32px #0000001a;transform:translateY(-2px)}
.tariff-featured-badge{position:absolute;top:-1px;right:16px;background:var(--teal);color:var(--white);font-family:Montserrat,sans-serif;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:4px 12px;border-radius:0 0 8px 8px}
.tariff-card-inner{padding:20px;flex:1}
.tariff-header{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.tariff-logo{width:64px;height:40px;display:flex;align-items:center;flex-shrink:0}
.tariff-logo img{width:100%;height:100%;object-fit:contain}
.tariff-name{font-family:Montserrat,sans-serif;font-size:.9375rem;font-weight:700;color:var(--text);margin-bottom:2px}
.tariff-provider{font-size:.8125rem;color:var(--text-muted);margin:0}
.tariff-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.t-field{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 10px 8px;border-radius:var(--r);gap:4px}
.t-field.green{background:var(--green-bg);border:1px solid rgba(5,150,105,.2)}
.t-field.teal{background:var(--teal-glass, rgba(39,131,124,.07));border:1px solid rgba(39,131,124,.18)}
.t-field.amber{background:#f59e0b12;border:1px solid rgba(245,158,11,.2)}
.t-field.grey{background:var(--surface);border:1px solid var(--border)}
.t-field-label{font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);white-space:nowrap}
.t-field-value{font-family:Montserrat,sans-serif;font-size:.9375rem;font-weight:700;line-height:1.2}
.t-field.green .t-field-value{color:var(--green);font-size:1.125rem}
.t-field.teal .t-field-value{color:var(--teal);font-size:.8125rem;font-weight:600}
.t-field.amber .t-field-value{color:var(--gold);font-size:1.0625rem}
.t-field.grey .t-field-value{color:var(--text-2);font-size:.875rem;font-weight:600}
.tariff-detail{font-size:.875rem;color:var(--text-muted);line-height:1.6;margin:0}
.tariff-footer{display:flex;gap:8px;padding:14px 20px;border-top:1px solid var(--border)}
.btn-tariff{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;background:var(--teal);border-radius:8px;font-family:Montserrat,sans-serif;font-size:.875rem;font-weight:600;color:var(--white);text-decoration:none;transition:background .15s;min-height:40px}
.btn-tariff:hover{background:var(--teal-dark);color:var(--white)}
.btn-tariff-ghost{display:flex;align-items:center;justify-content:center;padding:10px 14px;border:1.5px solid var(--border-2);border-radius:8px;font-family:Montserrat,sans-serif;font-size:.875rem;font-weight:600;color:var(--text-2);text-decoration:none;transition:all .15s;white-space:nowrap;min-height:40px}
.btn-tariff-ghost:hover{border-color:var(--teal-border);color:var(--teal);background:var(--teal-glass)}
.tariff-card.unavailable{filter:grayscale(1);opacity:.6}
.tariff-card.unavailable:hover{transform:none;box-shadow:none}
.btn-tariff.btn-tariff-disabled{background:var(--border-2, #c0c8cc);cursor:not-allowed;pointer-events:none}
.btn-tariff.btn-tariff-disabled:hover{background:var(--border-2, #c0c8cc)}


/* ── Additions for the hub ── */
/* The hub's own .featured (the hero's featured block) must not reach the live card's featured class. */
.tariff-card.featured { display: flex; gap: 0; margin-top: 0; }
.tariff-card .tariff-name { margin: 0 0 2px; }
/* 44 px tap targets (the site's rule; the live card's buttons are 40 px). */
.tariff-card .btn-tariff, .tariff-card .btn-tariff-ghost { min-height: 44px; }
.tariff-card .tcard-fit { margin: 0 0 12px; }
.tariff-card .tcard-logo.is-initials { width: 64px; height: 40px; border-radius: 8px; font-size: 1rem; }
.tariff-more { margin-top: 14px; border-top: 1px solid var(--border); }
.tariff-more summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; list-style: none; cursor: pointer; font-family: Montserrat, sans-serif; font-size: .875rem; font-weight: 600; color: var(--teal); }
.tariff-more summary::-webkit-details-marker { display: none; }
.tariff-more summary:hover { text-decoration: underline; }
.tariff-more summary .i { width: 16px; height: 16px; transition: transform .15s ease; }
.tariff-more[open] summary .i { transform: rotate(180deg); }
.tariff-more-body { display: grid; gap: 12px; padding: 4px 0 6px; font-size: .875rem; line-height: 1.6; color: var(--text-2); }
.tariff-more-tag { margin: 0; font-weight: 700; color: var(--teal-ink); }
.tariff-more-needs h4 { margin: 0 0 2px; font-size: .8125rem; font-weight: 700; color: var(--text); }
.tariff-more-needs p { margin: 0; }
.tariff-more .chips { margin: 0; }
.tariff-card > .aff-note { margin: 0; padding: 0 20px 14px; }
[data-tcard]:target, [data-tcard].is-flash { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-100); }
[data-tcard].is-no { filter: grayscale(.6); opacity: .72; }
[data-tcard].is-no:hover { transform: none; }
.tariff-card, .tariff-card-inner, .tariff-more, .tariff-more-body { min-width: 0; }
.tariff-more .tcard-strip svg { width: 100%; }
.tariff-more-body { grid-template-columns: minmax(0, 1fr); }
.tariff-more-tag { overflow-wrap: anywhere; }
.tariff-more .chip { white-space: normal; max-width: 100%; }