/* ============================================================
   greener-h2020.eu — site layer on top of casino.css
   The chassis stays unforked: every colour here is a --ch-* token
   declared in casino.css's :root. This file only adds the rules the
   chassis has no opinion about — the rank medal borders, the azulejo
   tile wash, the hero backdrop plumbing and the date-pill break.
   ============================================================ */

/* --- the navbar is dark tile-red and the wordmark is crimson, so the brand
       gets a light plate. Measured on the first screenshot pass: without it the
       logo reads as a smudge. --- */
.ch-nav .ch-brand{background:var(--ch-bg);border:1px solid var(--ch-accent);
  border-radius:12px;padding:7px 14px;box-shadow:0 2px 10px rgba(0,0,0,.22)}
.ch-nav .ch-brand img{height:44px}

/* --- stage-07 rule 1: the date pill goes UNDER the byline, never beside
       it. Both are inline-level in the chassis, so in a centred hero they
       share a line whenever there is room. Force the break. --- */
.ch-hero-copy .ch-upd{display:block;width:fit-content;margin-inline:auto}

/* --- stage-07 rule 2: hero backdrop behind ALL hero text. The focal band
       sits low in the illustration, so hold the position at 58% and verify
       by screenshot, not by the file existing. --- */
.ch-hero.has-backdrop{position:relative;isolation:isolate;
  background-image:linear-gradient(180deg,rgba(75,8,18,.62) 0,rgba(75,8,18,.52) 55%,rgba(75,8,18,.72) 100%),var(--hero-img);
  background-size:cover,cover;background-position:center,center 58%;
  background-repeat:no-repeat,no-repeat}
.ch-hero.has-backdrop .ch-hero-copy h1,
.ch-hero.has-backdrop .ch-hero-copy .ch-lede{color:#fff}
/* the byline chip keeps its own white card, so it keeps its own dark ink —
   whitening it here made the text invisible on the first screenshot pass */
.ch-hero.has-backdrop .ch-hero-copy .ch-byline{color:var(--ch-muted)}
.ch-hero.has-backdrop .ch-hero-copy .ch-byline a{color:var(--ch-primary)}
.ch-hero.has-backdrop .ch-hero-copy .ch-byline{max-width:none;width:fit-content;
  margin-inline:auto;white-space:nowrap}
.ch-hero.has-backdrop .ch-hero-copy .ch-upd{color:var(--ch-accent-ink);
  background:var(--ch-accent-soft);border-color:var(--ch-accent)}
.ch-hero.has-backdrop .ch-byline img{border-color:var(--ch-accent)}

/* --- stage-07 rule 5: rank medal borders with a soft glow in the border
       colour. #1 gold, #2 silver, #3 bronze, the rest brand red. --- */
.ch-toplist .ch-card{border-width:2px}
.ch-toplist .ch-card:nth-of-type(1){border-color:var(--ch-rank1-bd);
  box-shadow:0 0 0 4px var(--ch-rank1-glow),var(--ch-shadow)}
.ch-toplist .ch-card:nth-of-type(2){border-color:var(--ch-rank2-bd);
  box-shadow:0 0 0 4px var(--ch-rank2-glow),var(--ch-shadow)}
.ch-toplist .ch-card:nth-of-type(3){border-color:var(--ch-rank3-bd);
  box-shadow:0 0 0 4px var(--ch-rank3-glow),var(--ch-shadow)}
.ch-toplist .ch-card:nth-of-type(n+4){border-color:var(--ch-rankn-bd);
  box-shadow:0 0 0 3px var(--ch-rankn-glow),var(--ch-shadow)}
.ch-toplist .ch-card:nth-of-type(2) .ch-rank{background:var(--ch-rank2-bd);
  color:#fff;border-color:var(--ch-rank2-bd)}
.ch-toplist .ch-card:nth-of-type(3) .ch-rank{background:var(--ch-rank3-bd);
  color:#fff;border-color:var(--ch-rank3-bd)}

/* --- azulejo tile wash: the "subtle opaque pattern" of rule 5, built from
       two tokenised tints so no hex lands outside :root. --- */
.ch-toplist .ch-card{
  background-image:
    repeating-linear-gradient(45deg,var(--ch-tile-a) 0 10px,transparent 10px 20px),
    repeating-linear-gradient(-45deg,var(--ch-tile-b) 0 10px,transparent 10px 20px);
  background-position:right -12px top -12px;background-size:120px 120px}

/* --- stage-07 rule 4: the CTA is the loudest element on the page. The
       chassis gives it the gradient; the glow and the lift are here. --- */
.ch-cta{box-shadow:0 6px 18px var(--ch-cta-glow),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .12s ease,box-shadow .12s ease}
.ch-cta:hover{transform:translateY(-1px);
  box-shadow:0 10px 26px var(--ch-cta-glow),inset 0 1px 0 rgba(255,255,255,.24)}

/* --- stage-07 rule 6: the bonus is loud TEXT, never a pill. Scope it past
       `.ch p{color:var(--ch-ink-soft)}` so the computed colour is really the
       brand red and not body ink. --- */
.ch .ch-cell-mid p.ch-bonus-val,
.ch p.ch-bonus-val{color:var(--ch-primary);background:none;border:0;box-shadow:none;
  font-family:var(--ch-display);font-size:1.75rem;font-weight:800;line-height:1.1;
  margin:.1rem 0 .15rem}
.ch .ch-bonus-extra{display:block;font-size:.82rem;font-weight:700;
  color:var(--ch-accent-ink);margin:0 0 .35rem}

/* --- stage-07 rule 7: alignment discipline. The chassis lays .ch-cell-mid out
       as a ROW (chip + text) — do not change that. Instead give the row a fixed
       min-height and stack the TEXT cell, so the bonus figure and the CTA land
       on the same baseline in every card down the list. --- */
.ch-toplist .ch-cell-mid{min-height:104px}
.ch-toplist .ch-cell-txt{display:flex;flex-direction:column;justify-content:center}
.ch-toplist .ch-cell-cta{display:flex;flex-direction:column;justify-content:center;gap:.4rem}
.ch-toplist .ch-chip{align-self:center}

/* --- guide thumbnails, one consistent treatment for the whole set --- */
.ch-guide-thumb{display:block;width:100%;height:auto;border-radius:var(--ch-radius-lg);
  border:2px solid var(--ch-accent);box-shadow:var(--ch-shadow)}

/* --- legacy notice band: the restored GREENER archive stays reachable but is
       never linked from the money site, so this only styles its own pages --- */
.ch-legacy-note{background:var(--ch-surface);border:1px solid var(--ch-line);
  border-left:4px solid var(--ch-accent);border-radius:var(--ch-radius);
  padding:14px 18px;margin:0 0 22px;font-size:.92rem;color:var(--ch-muted)}

@media (max-width:768px){
  /* the chassis keeps .ch-cell-mid a ROW at every width; at 390px that squeezes
     the text into a narrow column and the card grows to ~700px tall. Stack it. */
  .ch-toplist .ch-cell-mid{min-height:0;flex-direction:column;align-items:center;
    text-align:center;gap:8px}
  .ch-toplist .ch-cell-txt{align-items:center}
  .ch-toplist .ch-chip{order:-1}
  .ch-hero .ch-lede{font-size:1rem}
  .ch-nav .ch-brand{padding:5px 9px;border-radius:10px}
  .ch-nav .ch-brand img{height:34px}
  .ch-hero.has-backdrop .ch-hero-copy .ch-byline{white-space:normal;
    max-width:100%;padding:7px 12px 7px 7px;font-size:.82rem}
  .ch .ch-cell-mid p.ch-bonus-val,.ch p.ch-bonus-val{font-size:1.45rem}
  .ch-hero.has-backdrop{background-position:center,center 55%}
}

/* stage-08 page-build additions: start */
.ch-review[id],.ch-content h2[id]{scroll-margin-top:96px}
.ch-byline>span{display:inline}
.ch .ch-bonus-extra{line-height:1.35;word-spacing:.08em}

/* --- numbered sequence. 3 of 3 page-3 competitors run an ordered list, so the
       cash-out steps ship as a real <ol>; the counter is drawn as an azulejo
       medallion instead of the browser marker. --- */
.ch-content ol.ch-steps{list-style:none;counter-reset:step;padding:0;margin:18px 0 0;
  display:grid;gap:12px}
.ch-content ol.ch-steps>li{counter-increment:step;position:relative;
  background:var(--ch-surface);border:1px solid var(--ch-line);
  border-radius:var(--ch-radius);padding:14px 18px 14px 60px}
.ch-content ol.ch-steps>li::before{content:counter(step);position:absolute;left:16px;top:13px;
  width:30px;height:30px;border-radius:50%;color:var(--ch-cta-ink);
  background:linear-gradient(135deg,var(--ch-cta-from) 0,var(--ch-cta-to) 100%);
  border:2px solid var(--ch-accent);font-weight:800;font-size:.95rem;
  display:flex;align-items:center;justify-content:center}

/* --- payment marks. Parity MUST for /casino-sin-registro/ (2 of 3 comps run
       payment marks). The chassis ALREADY ships this component as .ch-paybar +
       .ch-pay chips; a second .ch-pay definition here collapsed the row to a
       single 54px tile with the marks spilling over the prose — caught by the
       pixel pass, invisible in the stylesheet. So the chassis component is used
       as designed and only the in-body placement is added. --- */
.ch-content .ch-paybar{border-top:0;padding-top:0;margin:16px 0 0}

/* --- brand review pages. Measured archetype: a fact panel, a pros-and-cons pair and an
       operator capture. All colours are --ch-* tokens; the chassis stays unforked. --- */
.ch-brand-panel{display:grid;grid-template-columns:auto 1fr auto;gap:18px 26px;align-items:center}
.ch-panel-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px 22px}
.ch-panel-fact{display:flex;flex-direction:column;gap:2px}
.ch-panel-fact span{font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ch-muted)}
.ch-panel-fact b{font-size:.98rem;color:var(--ch-ink);line-height:1.3}
.ch-pc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0 0}
.ch-pc-col{background:var(--ch-surface);border:1px solid var(--ch-line);
  border-radius:var(--ch-radius);padding:16px 20px}
.ch-pc-col h3{margin:0 0 8px;font-size:1.02rem}
.ch-pc-col ul{margin:0;padding-inline-start:18px}
.ch-pc-pro{border-top:3px solid var(--ch-cta-from)}
.ch-pc-pro h3{color:var(--ch-cta-from)}
.ch-pc-con{border-top:3px solid var(--ch-primary)}
.ch-pc-con h3{color:var(--ch-primary)}
@media (max-width:768px){
  .ch-brand-panel{grid-template-columns:1fr;text-align:center}
  .ch-brand-panel .ch-chip{justify-self:center}
  .ch-pc{grid-template-columns:1fr}
}
/* stage-08 page-build additions: end *//* --- guide pages. A guide carries no toplist and no hero art: 0 of 3 measured
       guide peers (apuestas.guru / todoslots / egamersworld) run a display hero,
       all three open straight into bylined prose. The hero is therefore a flat
       azulejo band, and the breadcrumb sits under it as its own strip. --- */
.ch-hero.ch-hero-guide{background:var(--ch-surface);border-bottom:1px solid var(--ch-line);
  padding-block:38px 30px}
.ch-hero.ch-hero-guide::before,.ch-hero.ch-hero-guide::after{content:none}
.ch-hero.ch-hero-guide h1{max-width:22ch}
.ch-hero.ch-hero-guide .ch-lede{max-width:62ch}
nav.ch-crumb{background:var(--ch-bg);border-bottom:1px solid var(--ch-line);
  padding:10px 0;font-size:.85rem;color:var(--ch-muted);margin:0}
nav.ch-crumb a{color:var(--ch-primary);text-decoration:none}
nav.ch-crumb a:hover{text-decoration:underline}
.ch-content.ch-guide{max-width:74ch;margin-inline:auto}
.ch-content.ch-guide h2{margin-top:38px}
.ch-content.ch-guide h3{margin-top:26px}
/* --- author surface. Portrait + meta card at the top of a profile, a grid of the
       same card on the index, an expertise tag row and a stats strip. Reuses the
       chassis tokens; nothing here forks casino.css. --- */
.ch-author-card{display:flex;gap:18px;align-items:flex-start;background:var(--ch-surface);
  border:1px solid var(--ch-line);border-radius:var(--ch-radius-lg);padding:16px;margin:0 0 22px}
.ch-author-portrait{width:104px;height:104px;flex:0 0 104px;border-radius:50%;object-fit:cover;
  border:3px solid var(--ch-bg)}
.ch-author-meta{min-width:0}
.ch-author-meta>*{margin:0 0 4px}
.ch-author-role{font-weight:700;color:var(--ch-primary)}
.ch-author-where{font-size:.9rem;color:var(--ch-muted)}
.ch-author-tag{font-style:italic}
.ch-author-grid{display:grid;gap:16px;margin:18px 0 0}
@media(min-width:760px){.ch-author-grid{grid-template-columns:1fr 1fr}}
.ch-author-grid .ch-author-card{margin:0;flex-direction:column;gap:12px}
.ch-author-grid .ch-author-portrait{width:88px;height:88px;flex-basis:88px}
.ch-content ul.ch-tags{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.ch-content ul.ch-tags li{margin:0;padding:5px 12px;border-radius:999px;font-size:.88rem;
  background:var(--ch-surface);border:1px solid var(--ch-line);color:var(--ch-ink)}
.ch-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:16px 0 0}
@media(min-width:700px){.ch-stats{grid-template-columns:repeat(4,1fr)}}
.ch-stats>div{background:var(--ch-surface);border:1px solid var(--ch-line);
  border-radius:var(--ch-radius-lg);padding:14px;text-align:center}
.ch-stat-n{display:block;font-family:'Zilla Slab',Georgia,serif;font-weight:700;
  font-size:1.5rem;color:var(--ch-primary);line-height:1.1}
.ch-stat-l{display:block;font-size:.82rem;color:var(--ch-muted);margin-top:4px}

/* --- guide pages. A guide carries no toplist and no hero art: 0 of 3 measured
       guide peers (apuestas.guru / todoslots / egamersworld) run a display hero,
       all three open straight into bylined prose. The hero is therefore a flat
       azulejo band, and the breadcrumb sits under it as its own strip. --- */
.ch-hero.ch-hero-guide{background:var(--ch-surface);border-bottom:1px solid var(--ch-line);
  padding-block:38px 30px}
.ch-hero.ch-hero-guide::before,.ch-hero.ch-hero-guide::after{content:none}
.ch-hero.ch-hero-guide h1{max-width:22ch}
.ch-hero.ch-hero-guide .ch-lede{max-width:62ch}
nav.ch-crumb{background:var(--ch-bg);border-bottom:1px solid var(--ch-line);
  padding:10px 0;font-size:.85rem;color:var(--ch-muted);margin:0}
nav.ch-crumb a{color:var(--ch-primary);text-decoration:none}
nav.ch-crumb a:hover{text-decoration:underline}
.ch-content.ch-guide{max-width:74ch;margin-inline:auto}
.ch-content.ch-guide h2{margin-top:38px}
.ch-content.ch-guide h3{margin-top:26px}

/* --- guide pages. A guide carries no toplist and no hero art: 0 of 3 measured
       guide peers (apuestas.guru / todoslots / egamersworld) run a display hero,
       all three open straight into bylined prose. The hero is therefore a flat
       azulejo band, and the breadcrumb sits under it as its own strip. --- */
.ch-hero.ch-hero-guide{background:var(--ch-surface);border-bottom:1px solid var(--ch-line);
  padding-block:38px 30px}
.ch-hero.ch-hero-guide::before,.ch-hero.ch-hero-guide::after{content:none}
.ch-hero.ch-hero-guide h1{max-width:22ch}
.ch-hero.ch-hero-guide .ch-lede{max-width:62ch}
nav.ch-crumb{background:var(--ch-bg);border-bottom:1px solid var(--ch-line);
  padding:10px 0;font-size:.85rem;color:var(--ch-muted);margin:0}
nav.ch-crumb a{color:var(--ch-primary);text-decoration:none}
nav.ch-crumb a:hover{text-decoration:underline}
.ch-content.ch-guide{max-width:74ch}
.ch-content.ch-guide h2{margin-top:38px}
.ch-content.ch-guide h3{margin-top:26px}