/* =========================================================================
   rating.css - brand rating table for fachkom.ch.

   Kept outside style.css on purpose and loaded with ?v=filemtime, so a
   change here reaches visitors without touching the site stylesheet.

   The card is built from primitives this site already uses, so the table
   reads as part of the page rather than as a guest:
     - the plate and its 12px hard shadow come from .slab
     - the rivet dots come from .panels li
     - the rank is set in the stencil face used by .panels li::before
     - the left strip is the .slab.edge signal bar
     - the noise overlay is the site's own --noise texture

   All colours and faces are the site's own custom properties: --concrete,
   --concrete-hi, --concrete-lo, --anthracite, --ink, --soft, --signal,
   --sans, --stencil, --noise. Nothing new is introduced.
   ========================================================================= */

.fk-list{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:0 0 clamp(56px,8vw,96px);
}

.fk-list *{box-sizing:border-box}

/* ---------- the plate ---------- */

.fk-list .fk-card{
  position:relative;
  display:grid;
  grid-template-columns:72px 212px 1fr 200px;
  align-items:center;
  gap:0 26px;
  padding:22px 30px 22px 0;
  background:var(--concrete-hi);
  box-shadow:0 12px 0 var(--concrete-lo), 0 30px 40px -18px rgba(0,0,0,.35);

  /* the rivets of .panels li, one in each corner */
  background-image:
    radial-gradient(circle, rgba(36,35,31,.6) 0 3px, transparent 3px),
    radial-gradient(circle, rgba(36,35,31,.6) 0 3px, transparent 3px),
    radial-gradient(circle, rgba(36,35,31,.6) 0 3px, transparent 3px),
    radial-gradient(circle, rgba(36,35,31,.6) 0 3px, transparent 3px);
  /* each rivet is its own small tile - without an explicit size every layer
     would stretch over the whole plate and the positions would not bite */
  background-size:7px 7px, 7px 7px, 7px 7px, 7px 7px;
  background-repeat:no-repeat;
  background-position:16px 12px, calc(100% - 16px) 12px, 16px calc(100% - 12px), calc(100% - 16px) calc(100% - 12px);
}

/* the site's noise, exactly as .slab::after applies it */
.fk-list .fk-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--noise);
  opacity:.35;
  pointer-events:none;
  mix-blend-mode:multiply;
}

/* the signal strip of .slab.edge, on the left of every card */
.fk-list .fk-card::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:10px;
  background:var(--signal);
  z-index:2;
}

.fk-list .fk-card > *{position:relative;z-index:1}

/* ---------- rank, in the stencil face ---------- */

.fk-list .fk-rank{
  justify-self:center;
  padding-left:10px;
  font-family:var(--stencil);
  font-weight:700;
  font-size:2.1rem;
  line-height:1;
  color:var(--signal);
  font-variant-numeric:tabular-nums;
}

/* ---------- logo on an anthracite plate ---------- */

.fk-list .fk-logo{
  width:212px;
  height:88px;
  background:var(--anthracite);
  display:grid;
  place-items:center;
  overflow:hidden;
}

.fk-list .fk-logo a{display:grid;place-items:center;width:100%;height:100%}

.fk-list .fk-logo img{
  max-width:92%;
  max-height:84%;
  width:auto;
  height:auto;
  object-fit:contain;
}

.fk-list .fk-logo__txt{
  color:#ece8e1;
  font-family:var(--sans);
  font-weight:800;
  font-variation-settings:"wdth" 125;
  font-size:1rem;
  text-transform:uppercase;
  text-align:center;
  line-height:1.15;
  padding:0 10px;
}

/* ---------- bonus and the feature line ---------- */

.fk-list .fk-body{min-width:0}

.fk-list .fk-offer{
  margin:0;
  font-family:var(--sans);
  font-weight:800;
  font-variation-settings:"wdth" 112;
  font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);
  line-height:1.2;
  color:var(--ink);
  overflow-wrap:break-word;
  hyphens:auto;
}

.fk-list .fk-feat{
  list-style:none;
  margin:11px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 8px;
}

.fk-list .fk-feat li{
  display:inline-block;
  padding:5px 11px;
  background:var(--concrete);
  font-size:.86rem;
  line-height:1.3;
  color:var(--soft);
  overflow-wrap:break-word;
}

/* ---------- the affiliate button ----------
   Solid signal block with the same plate shadow, the label forced white at
   a specificity the site stylesheet cannot beat. */

.fk-list .fk-card a.fk-cta,
.fk-list .fk-card a.fk-cta:link,
.fk-list .fk-card a.fk-cta:visited,
.fk-list .fk-card a.fk-cta:hover,
.fk-list .fk-card a.fk-cta:focus,
.fk-list .fk-card a.fk-cta:active{
  color:#fff;
  text-decoration:none;
}

.fk-list .fk-cta{
  display:block;
  text-align:center;
  background:var(--signal);
  padding:17px 18px;
  font-family:var(--sans);
  font-weight:800;
  font-variation-settings:"wdth" 125;
  font-size:1rem;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.02em;
  box-shadow:0 6px 0 var(--signal-deep);
  transition:transform .12s ease, box-shadow .12s ease;
}

.fk-list .fk-cta:hover{
  transform:translateY(3px);
  box-shadow:0 3px 0 var(--signal-deep);
}

/* =========================================================================
   Tablet and phone. Nothing here changes the desktop view.
   ========================================================================= */

@media (max-width:900px){

  .fk-list{gap:6px}

  .fk-list .fk-card{
    grid-template-columns:52px 1fr;
    gap:12px 16px;
    padding:18px 18px 18px 0;
    background-position:12px 10px, calc(100% - 12px) 10px, 12px calc(100% - 10px), calc(100% - 12px) calc(100% - 10px);
  }

  .fk-list .fk-card::before{width:6px}

  .fk-list .fk-rank{font-size:1.6rem;padding-left:6px;align-self:start;padding-top:4px}

  .fk-list .fk-logo{width:168px;height:70px}

  .fk-list .fk-body{grid-column:2}

  .fk-list .fk-offer{font-size:1.05rem;line-height:1.24}

  .fk-list .fk-cta{grid-column:2;padding:15px 16px}
}

@media (max-width:420px){
  .fk-list .fk-card{grid-template-columns:42px 1fr;gap:10px 12px;padding:15px 14px 15px 0}
  .fk-list .fk-rank{font-size:1.4rem}
  .fk-list .fk-logo{width:144px;height:60px}
  .fk-list .fk-offer{font-size:.98rem}
  .fk-list .fk-feat li{font-size:.8rem;padding:4px 9px}
}