/* =========================================================
   MELBET777 — page-article.css (shared inner-page layout)
   ========================================================= */

/* Sport / section intro cards */
.sport-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.sport-card{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--color-surface) 0%,var(--color-surface-2) 100%);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:1.6rem;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.sport-card:hover{transform:translateY(-5px);border-color:var(--color-border-strong);box-shadow:var(--shadow)}
.sport-card h3{margin-bottom:.55rem}
.sport-card p{color:var(--color-text-faint);font-size:var(--text-sm)}
.sport-card .btn{margin-top:auto;align-self:flex-start}
@media (max-width:900px){.sport-cards{grid-template-columns:1fr}}

/* Markets list inside sport pages */
.market-list{list-style:none;padding:0;margin:0 0 1.25rem}
.market-list li{
  position:relative;padding:.85rem 1rem .85rem 2.6rem;margin-bottom:.65rem;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);
  color:var(--color-text-muted);font-size:var(--text-sm);
}
.market-list li::before{
  content:"✓";position:absolute;left:.95rem;top:.85rem;
  color:var(--color-accent);font-weight:700;
}
.market-list li b{color:var(--color-white)}

/* FAQ wrapper */
.faq-wrap{max-width:860px}

/* Compare table special */
.compare-table td:first-child{font-weight:600;color:var(--color-white)}

/* Legal / long-form */
.legal-page{max-width:900px}
.legal-page .article-content h2:first-of-type{margin-top:1.5rem}
.legal-meta{font-size:var(--text-xs);color:var(--color-text-faint);margin-bottom:1.5rem}

/* Contacts */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.contact-card{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius);padding:var(--space-4);text-align:center;
}
.contact-card .card-icon{margin-inline:auto}
.contact-card h3{font-size:var(--text-md);margin-bottom:.4rem}
.contact-card p{color:var(--color-text-faint);font-size:var(--text-sm);margin:0}
.contact-card a{word-break:break-all}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* App specs */
.spec-list{list-style:none;padding:0;margin:0}
.spec-list li{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid var(--color-border);
  font-size:var(--text-sm);
}
.spec-list li:last-child{border-bottom:none}
.spec-list .spec-k{color:var(--color-text-faint)}
.spec-list .spec-v{color:var(--color-white);font-weight:600;text-align:right}

/* Content note under images */
.img-note{font-size:var(--text-xs);color:var(--color-text-faint);margin:-.5rem 0 1.5rem;text-align:center}
/* Steps inside article content — suppress default ordered-list markers */
.article-content ol.steps{list-style:none;padding-left:0}
/* Hero lead + promo image side by side */
.hero-media-row{display:flex;flex-wrap:wrap;gap:1.75rem;align-items:center}
.hero-media-row>.lead{flex:0 1 62%;min-width:0}
.hero-media-row img{flex:0 1 32%;align-self:flex-start;max-width:340px;height:auto;max-height:24rem;object-fit:contain;border-radius:var(--radius);box-shadow:var(--shadow)}
@media (max-width:880px){.hero-media-row{flex-direction:column}.hero-media-row img{width:100%;align-self:auto}}
/* App advantages image — separated block under the table */
.app-article img.arti-img{display:block;margin:1.75rem 0;max-width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow)}