/* ==========================================================
   Home – Marketplace Preview
   ========================================================== */

.section-marketplace{
  padding-top:4.7rem;
}

.market-shell{
  display:grid;
  gap:1.35rem;
}

.market-head{
  max-width:76ch;
  margin:0 auto;
  text-align:center;
}

.market-intro{
  margin:.8rem auto 0;
  max-width:48rem;
}

.market-app{
  position:relative;
  overflow:hidden;
  padding:0;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.11);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
    linear-gradient(180deg, rgba(10,14,22,.96), rgba(7,10,17,.98));
  box-shadow:0 30px 70px rgba(0,0,0,.26);
}

.market-app::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 14%),
    radial-gradient(720px 240px at var(--spot-x, 50%) var(--spot-y, 0%), rgba(23,184,176,.10), transparent 68%);
  opacity:.95;
}

.market-toolbar,
.market-table,
.market-footer{
  position:relative;
  z-index:1;
}

.market-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.1rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}

.market-toolbar-left,
.market-toolbar-right{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}

.market-window-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
}

.market-window-dot:first-child{ background:rgba(255,255,255,.46); }
.market-window-dot:nth-child(2){ background:rgba(24,172,78,.70); }
.market-window-dot:nth-child(3){ background:rgba(23,184,176,.70); }

.market-toolbar-chip{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:.18rem .72rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:#d6deea;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.market-table{
  --market-cols:minmax(280px, 2.3fr) .68fr 1.05fr .95fr .72fr .98fr 1fr minmax(176px, 1.08fr);
  padding:0 1rem 1rem;
}

.market-table-body{
  display:grid;
}

.market-table-head,
.market-row{
  display:grid;
  grid-template-columns:var(--market-cols);
  align-items:center;
  gap:1rem;
}

.market-table-head{
  padding:1rem .9rem .8rem;
}

.market-head-cell{
  color:#a9b5c4;
  font-size:.8rem;
  letter-spacing:.02em;
}

.market-head-cell:not(.market-head-cell--publisher):not(.market-head-cell--action){
  text-align:center;
}

.market-head-cell--action{
  text-align:right;
}

.market-row{
  position:relative;
  padding:.88rem .9rem;
  border-top:1px solid rgba(255,255,255,.08);
  color:var(--fg);
  text-decoration:none;
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.market-row::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  background:
    linear-gradient(90deg, rgba(24,172,78,.06), rgba(23,184,176,.04));
  opacity:0;
  transition:opacity .18s ease;
  pointer-events:none;
}

.market-row:hover,
.market-row:focus-visible{
  transform:translateX(4px);
  background:rgba(255,255,255,.025);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 16px 32px rgba(0,0,0,.16);
  color:var(--fg);
  text-decoration:none;
}

.market-row:focus-visible{
  outline:2px solid rgba(23,184,176,.55);
  outline-offset:2px;
}

.market-row:hover::before,
.market-row:focus-visible::before{
  opacity:1;
}

.market-cell{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:.7rem;
  min-width:0;
  color:#e7ecf3;
}

.market-cell--publisher{
  gap:.8rem;
}

.market-site-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:1.06rem;
  font-weight:900;
  text-transform:lowercase;
  color:#ffffff;
  box-shadow:0 10px 22px rgba(0,0,0,.22);
}

.market-site-icon--repubblica{ background:linear-gradient(135deg, #8f7bff, #27304a); }
.market-site-icon--laola1{ background:linear-gradient(135deg, #ff5c5c, #1f2435); }
.market-site-icon--digitalfernsehen{ background:linear-gradient(135deg, #ff8a1f, #5a2246); }
.market-site-icon--keyforsteam{ background:linear-gradient(135deg, #6d7cff, #28314f); }
.market-site-icon--seen{ background:linear-gradient(135deg, #2c7be5, #1e3352); }
.market-site-icon--weekend{ background:linear-gradient(135deg, #ff5a5a, #7a2020); }

.market-publisher-copy{
  display:grid;
  gap:.1rem;
  min-width:0;
}

.market-publisher-copy strong{
  font-size:1rem;
  line-height:1.1;
}

.market-publisher-copy small{
  color:#aeb8c7;
  font-size:.84rem;
  line-height:1.3;
}

.market-cell--land,
.market-cell--bhs,
.market-cell--pl,
.market-cell--dr,
.market-cell--traffic,
.market-cell--visibility{
  justify-content:center;
  text-align:center;
}

.market-cell--bhs{
  gap:.55rem;
}

.market-score-ring{
  --size:46px;
  width:var(--size);
  height:var(--size);
  border-radius:999px;
  display:grid;
  place-items:center;
  position:relative;
  background:conic-gradient(#8f7bff calc(var(--score) * 1%), rgba(255,255,255,.10) 0);
  box-shadow:0 10px 20px rgba(0,0,0,.18);
  flex:0 0 var(--size);
}

.market-score-ring::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:999px;
  background:#171d2b;
  border:1px solid rgba(255,255,255,.05);
}

.market-score-ring span{
  position:relative;
  z-index:1;
  font-size:.86rem;
  font-weight:800;
  color:#f5f7ff;
}

.market-score-copy{
  display:grid;
  gap:.05rem;
  align-items:flex-start;
  text-align:left;
}

.market-score-copy strong{
  font-size:.8rem;
  line-height:1;
  color:#dce4ee;
}

.market-score-copy small{
  font-size:.82rem;
  color:#8f7bff;
}

.market-cell--dr,
.market-cell--traffic,
.market-cell--visibility{
  font-variant-numeric:tabular-nums;
}

.market-pl{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:.22rem .68rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  font-size:.8rem;
  white-space:nowrap;
}

.market-pl--best{
  color:#e8fff1;
  background:rgba(24,172,78,.16);
  border-color:rgba(24,172,78,.42);
}

.market-pl--good{
  color:#e9f5ff;
  background:rgba(52,134,255,.12);
  border-color:rgba(52,134,255,.30);
}

.market-pl--fair{
  color:#eef2f8;
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.14);
}

.market-cell--action{
  justify-content:flex-end;
}

.market-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:.45rem .95rem;
  border-radius:14px;
  border:1px solid rgba(24,172,78,.34);
  background:linear-gradient(135deg, rgba(24,172,78,.18), rgba(23,184,176,.14));
  color:#f3fff7;
  font-weight:700;
  white-space:nowrap;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.market-row:hover .market-action,
.market-row:focus-visible .market-action{
  transform:translateX(3px);
  border-color:rgba(23,184,176,.48);
  box-shadow:0 12px 24px rgba(0,0,0,.20);
}

.market-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.market-footer .muted{
  max-width:62ch;
}

.market-actions{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

@media (max-width:1260px){
  .market-table{
    --market-cols:minmax(250px, 2.2fr) .68fr 1fr .92fr .7fr .92fr .95fr minmax(168px, 1fr);
  }

  .market-table-head,
  .market-row{
    gap:.8rem;
  }

  .market-action{
    min-height:40px;
    padding:.4rem .85rem;
  }
}

@media (max-width:980px){
  .market-toolbar{
    flex-direction:column;
    align-items:flex-start;
  }

  .market-table-head{
    display:none;
  }

  .market-table{
    padding:.8rem .8rem .8rem;
  }

  .market-table-body{
    display:grid;
    gap:1rem;
  }

  .market-row{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:.8rem .95rem;
    padding:1.08rem 1rem 1rem;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    background:rgba(255,255,255,.02);
    align-items:start;
  }

  .market-cell{
    align-items:flex-start;
    justify-content:flex-start;
  }

  .market-cell::before{
    content:attr(data-label);
    display:block;
    width:100%;
    margin-bottom:.12rem;
    color:#8f9caf;
    font-size:.72rem;
    letter-spacing:.12em;
    text-transform:uppercase;
  }

  .market-cell{
    flex-direction:column;
    gap:.16rem;
  }

  .market-cell--publisher,
  .market-cell--action{
    grid-column:1 / -1;
  }

  .market-cell--publisher{
    flex-direction:row;
    align-items:center;
  }

  .market-cell--publisher::before,
  .market-cell--action::before{
    display:none;
  }

  .market-cell--action{
    justify-content:flex-start;
    align-items:stretch;
  }

  .market-action{
    width:100%;
  }

  .market-footer{
    flex-direction:column;
    align-items:flex-start;
  }

  .market-actions{
    justify-content:flex-start;
  }
}

@media (max-width:640px){
  .market-head{
    max-width:100%;
  }

  .market-intro{
    max-width:34rem;
  }

  .market-toolbar-right{
    gap:.4rem;
  }

  .market-toolbar-chip{
    font-size:.72rem;
  }

  .market-row{
    grid-template-columns:repeat(3, minmax(0,1fr));
    grid-template-areas:
      "publisher publisher bhs"
      "land pl pl"
      "dr traffic visibility"
      "action action action";
    gap:.8rem .7rem;
    padding:1.15rem .95rem 1rem;
  }

  .market-cell{
    min-width:0;
  }

  .market-cell--publisher{
    grid-area:publisher;
    padding-right:.2rem;
  }

  .market-cell--land{ grid-area:land; }
  .market-cell--bhs{ grid-area:bhs; }
  .market-cell--pl{
    grid-area:pl;
    justify-self:end;
  }
  .market-cell--dr{ grid-area:dr; }
  .market-cell--traffic{ grid-area:traffic; }
  .market-cell--visibility{ grid-area:visibility; }
  .market-cell--action{ grid-area:action; }

  .market-cell--publisher{
    flex-direction:row;
    align-items:flex-start;
    gap:.7rem;
  }

  .market-cell--publisher::before{
    display:none;
  }

  .market-cell--bhs{
    justify-self:end;
    justify-content:flex-start;
    align-items:center;
    text-align:center;
    gap:.28rem;
    padding:0;
    border:0;
    background:none;
  }

  .market-cell--bhs::before{
    display:none;
  }

  .market-score-ring{
    --size:44px;
  }

  .market-score-copy{
    align-items:center;
    text-align:center;
    gap:.12rem;
  }

  .market-score-copy strong{
    display:none;
  }

  .market-score-copy small{
    font-size:.75rem;
    line-height:1;
  }

  .market-cell--land,
  .market-cell--pl,
  .market-cell--dr,
  .market-cell--traffic,
  .market-cell--visibility{
    padding-top:.05rem;
    gap:.24rem;
  }

  .market-cell--land,
  .market-cell--dr{
    align-items:flex-start;
    text-align:left;
  }

  .market-cell--traffic{
    align-items:center;
    text-align:center;
  }

  .market-cell--visibility,
  .market-cell--pl{
    align-items:flex-end;
    text-align:right;
  }

  .market-cell--land::before,
  .market-cell--pl::before,
  .market-cell--dr::before,
  .market-cell--traffic::before,
  .market-cell--visibility::before{
    width:auto;
    margin:0;
    font-size:.70rem;
    letter-spacing:.14em;
  }

  .market-cell--land,
  .market-cell--dr,
  .market-cell--traffic,
  .market-cell--visibility{
    font-size:1.02rem;
    line-height:1.15;
    font-variant-numeric:tabular-nums;
  }

  .market-cell--pl .market-pl{
    margin-left:auto;
  }

  .market-cell--action{
    margin-top:.1rem;
  }

  .market-publisher-copy{
    gap:.12rem;
  }

  .market-publisher-copy strong{
    font-size:.96rem;
  }

  .market-publisher-copy small{
    font-size:.82rem;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    line-height:1.3;
  }
}