/* ============================================================
   home-redesign.css — R164: dark "casino-night" homepage to match
   the approved mockup. Loaded ONLY on the front page (index.html),
   so every rule here is front-page-scoped by file, and additionally
   guarded with body.home-redesign for specificity over style.min.css.
   ============================================================ */
:root{
  --hd-bg0:#0a1424; --hd-bg1:#091020;
  --hd-panel:rgba(255,255,255,0.05); --hd-panel-2:rgba(255,255,255,0.03);
  --hd-line:rgba(245,200,66,0.16);
  --hd-gold:#f5c842; --hd-gold-d:#D4A017; --hd-green:#1B8A4E;
  --hd-txt:#e8eef6; --hd-txt-soft:rgba(232,238,246,0.70);
}

/* ---------- page base: deep navy ---------- */
body.home-redesign{
  background:#0a1424;
  background-image:
    radial-gradient(120% 80% at 50% -8%, rgba(22,44,78,0.65) 0%, transparent 58%),
    linear-gradient(180deg, #0a1424 0%, #091020 100%);
  background-attachment:fixed;
  color:var(--hd-txt);
}

/* hide the bits the mockup drops between hero and Top 7
   (the full casino list #top-kasinot stays VISIBLE per request — all casinos
   shown, not just the Top 7 featured rail) */
body.home-redesign .breadcrumbs,
body.home-redesign .toc-sidebar,
body.home-redesign .author-box{ display:none !important; }

/* sections become transparent so the navy shows through */
body.home-redesign .section,
body.home-redesign .section-alt,
body.home-redesign .section--alt,
body.home-redesign .section--warm,
body.home-redesign .aff-section{ background:transparent !important; }
body.home-redesign .section-title,
body.home-redesign .section h2,
body.home-redesign .section h3{ color:var(--hd-txt); }
body.home-redesign .section-subtitle,
body.home-redesign .section p{ color:var(--hd-txt-soft); }
body.home-redesign .reveal-up{ opacity:1; }   /* never hide critical content */

/* ---------- shared section header (title left, link right) ---------- */
.home-sec-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.home-sec-title{ margin:0; font-size:clamp(1.45rem,3vw,2.1rem); font-weight:800; color:var(--hd-txt); position:relative; padding-left:.95rem; line-height:1.1; }
.home-sec-title::before{ content:""; position:absolute; left:0; top:.12em; bottom:.12em; width:5px; border-radius:4px; background:linear-gradient(180deg,var(--hd-gold),var(--hd-green)); }
.home-sec-link{ color:var(--hd-gold); font-weight:600; text-decoration:none; white-space:nowrap; font-size:.92rem; transition:opacity .2s; }
.home-sec-link:hover{ opacity:.8; text-decoration:underline; }

/* ============================================================
   UUSIMMAT UUTISET + UUTISKIRJE
   ============================================================ */
/* R166: uutiskirje piilotettu toistaiseksi (ei backend-kytkentää) → uutisruudukko
   täysleveäksi (poistettu 2.5fr/1fr-sivupalsta jonka uutiskirjelaatikko täytti). */
.home-news__layout{ display:block; }
.hnews-grid{ display:grid; gap:1rem; grid-template-columns:repeat(2,1fr); }
@media(min-width:1180px){ .hnews-grid{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:540px){ .hnews-grid{ grid-template-columns:1fr; } }
.hnews-card{ display:flex; flex-direction:column; border-radius:15px; overflow:hidden; text-decoration:none;
  background:rgba(255,255,255,.04); border:1px solid var(--hd-line); transition:transform .3s, border-color .3s, box-shadow .3s; }
.hnews-card:hover{ transform:translateY(-5px); border-color:rgba(245,200,66,.45); box-shadow:0 18px 40px -22px rgba(0,0,0,.85); }
.hnews-card__img{ display:block; width:100%; aspect-ratio:16/9; overflow:hidden; background-color:#0d1b2e; }
.hnews-card__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.hnews-card:hover .hnews-card__img img{ transform:scale(1.05); }
.hnews-card__body{ padding:.8rem .9rem 1rem; display:flex; flex-direction:column; gap:.45rem; }
.hnews-card__kicker{ font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--hd-gold); }
.hnews-kicker--viihde{ color:#e9a8ff; }
.hnews-card__title{ font-size:.92rem; font-weight:700; color:var(--hd-txt); line-height:1.32;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.hnews-card:hover .hnews-card__title{ color:#fff; }

.newsletter-box{ align-self:stretch; display:flex; flex-direction:column; justify-content:center; text-align:center; padding:1.8rem 1.4rem; border-radius:18px;
  background:linear-gradient(160deg, rgba(27,138,78,.20), rgba(212,160,23,.12)); border:1px solid rgba(245,200,66,.32); box-shadow:0 22px 50px -30px rgba(0,0,0,.8); }
.newsletter-box__icon{ color:var(--hd-gold); line-height:0; display:flex; justify-content:center; margin-bottom:.25rem; }
.newsletter-box__title{ margin:.5rem 0 .3rem; font-size:1.18rem; font-weight:800; color:var(--hd-txt); }
.newsletter-box__text{ margin:0 0 1.1rem; font-size:.85rem; color:var(--hd-txt-soft); line-height:1.45; }
.newsletter-box__form{ display:flex; flex-direction:column; gap:.6rem; }
.newsletter-box__input{ padding:.72rem .9rem; border-radius:10px; border:1px solid rgba(255,255,255,.20); background:rgba(0,0,0,.28); color:#fff; font-size:.9rem; }
.newsletter-box__input::placeholder{ color:rgba(255,255,255,.5); }
.newsletter-box__input:focus{ outline:none; border-color:var(--hd-gold); }
.newsletter-box__btn{ padding:.74rem; border:none; border-radius:10px; cursor:pointer; font-weight:800; font-size:.92rem; color:#1a1200; background:linear-gradient(135deg,var(--hd-gold),var(--hd-gold-d)); transition:filter .2s; }
.newsletter-box__btn:hover{ filter:brightness(1.07); }
.newsletter-box__note{ display:block; margin-top:.7rem; font-size:.72rem; color:var(--hd-txt-soft); }

/* ============================================================
   DARK-IFY the existing lower sections (kept per request)
   ============================================================ */
/* category cards */
body.home-redesign .category-card{ background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02)) !important; border:1px solid var(--hd-line); color:var(--hd-txt); box-shadow:0 12px 30px -20px rgba(0,0,0,.8); transition:transform .3s, border-color .3s, box-shadow .3s; }
body.home-redesign .category-card:hover{ transform:translateY(-5px); border-color:rgba(245,200,66,.5); box-shadow:0 22px 46px -22px rgba(245,200,66,.4); }
body.home-redesign .category-card h3{ color:#fff; }
body.home-redesign .category-card p{ color:var(--hd-txt-soft); }

/* comparison table */
body.home-redesign .comparison-table{ background:rgba(255,255,255,.035); border:1px solid var(--hd-line); color:var(--hd-txt); border-radius:16px; overflow:hidden; }
body.home-redesign .comparison-table thead{ background:linear-gradient(180deg, rgba(20,42,76,.85), rgba(12,26,46,.85)); }
body.home-redesign .comparison-table th{ color:#fff; border-color:rgba(255,255,255,.08); }
body.home-redesign .comparison-table td{ color:var(--hd-txt-soft); border-color:rgba(255,255,255,.07); }
body.home-redesign .comparison-table tbody tr{ background:transparent; }
body.home-redesign .comparison-table tbody tr:nth-child(even){ background:rgba(255,255,255,.03); }
body.home-redesign .comparison-table tbody tr:hover{ background:rgba(245,200,66,.08); }
body.home-redesign .comparison-table a{ color:var(--hd-gold); }

/* payment method tiles */
body.home-redesign .payment-card{ background:rgba(255,255,255,.05) !important; border:1px solid var(--hd-line); color:var(--hd-txt); transition:transform .3s, border-color .3s; }
body.home-redesign .payment-card:hover{ transform:translateY(-4px); border-color:rgba(245,200,66,.5); }
body.home-redesign .payment-card__logo{ filter:brightness(0) invert(1) opacity(.85); }

/* full casino list (#top-kasinot) → dark glass cards (all casinos shown) */
body.home-redesign #top-kasinot .casino-card{
  background:#000000 !important;   /* R169e: joka kortin pohja AINA musta */
  border:1px solid var(--hd-line) !important;
  color:var(--hd-txt);
  box-shadow:0 14px 34px -22px rgba(0,0,0,.9);
}
body.home-redesign #top-kasinot .casino-card:hover{ border-color:rgba(245,200,66,.5) !important; box-shadow:0 22px 48px -24px rgba(245,200,66,.35); }
body.home-redesign #top-kasinot .casino-name,
body.home-redesign #top-kasinot .casino-name a{ color:#fff !important; }
body.home-redesign #top-kasinot .rating-value,
body.home-redesign #top-kasinot .casino-bonus,
body.home-redesign #top-kasinot .casino-bonus strong,
body.home-redesign #top-kasinot .casino-meta,
body.home-redesign #top-kasinot .meta-item,
body.home-redesign #top-kasinot .meta-item span,
body.home-redesign #top-kasinot .tc-note{ color:var(--hd-txt-soft) !important; }
body.home-redesign #top-kasinot .casino-bonus strong{ color:var(--hd-txt) !important; }
body.home-redesign #top-kasinot .stars{ color:var(--hd-gold) !important; }
/* R165: meta-pillit + cta-jalka käyttivät VAALEAA gradienttitaustaa
   (style.min.css: linear-gradient(#f8faf9,#eef5f0) / rgba(248,250,253,0.5)).
   Tumman teeman vaalea teksti jäi näkymättömäksi (vaalea-vaalealla).
   Pakotetaan tummat lasitaustat → tekstit näkyvät. */
body.home-redesign #top-kasinot .meta-item,
body.home-redesign #top-kasinot .meta-item:hover{
  background:rgba(255,255,255,0.07) !important;
  border-color:rgba(255,255,255,0.14) !important;
}
body.home-redesign #top-kasinot .casino-cta{
  background:transparent !important;
  border-color:rgba(255,255,255,0.10) !important;
}

/* ============================================================
   R169: #top-kasinot → VIEREKKÄINEN korttiruudukko
   Käyttäjäpyyntö 2026-06-05: "kasinot pitää olla sivuttaisessa
   rivissä desktopissa… samalla tavalla kuin ennen [Top 7 -rivi]".
   CSS-only: HTML + datat + linkit + suodatin-attribuutit säilyvät,
   vain asettelu muuttuu yhdestä leveästä strip-kortista/rivi
   kompaktiksi pystykortti-ruudukoksi (KAIKKI 41 kasinoa vierekkäin,
   niin monta riviä kuin tarvitaan). minmax+auto-fill → desktop ~4/rivi,
   tabletti ~2–3/rivi, mobiili 1/rivi (responsiivinen ilman erikois-bp:tä).
   ============================================================ */
body.home-redesign #top-kasinot .casino-list{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:1.1rem;
  max-width:100% !important;
  margin:0 !important;
}
body.home-redesign #top-kasinot .casino-card{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  text-align:center;
  height:100%;
  gap:.5rem;
  padding:1.4rem 1rem 1.1rem !important;
  position:relative;
  max-height:none !important;
}
/* sija-merkki (#N) → kompakti pyöreä badge vasempaan yläkulmaan */
body.home-redesign #top-kasinot .casino-rank,
body.home-redesign #top-kasinot .casino-card--featured .casino-rank{
  position:absolute !important; top:.6rem !important; left:.6rem !important; right:auto !important;
  width:30px !important; height:30px !important; padding:0 !important;
  display:flex !important; align-items:center; justify-content:center;
  border-radius:50% !important; border:0 !important;
  font-size:.8rem !important; font-weight:800; color:#1a1200;
  background:linear-gradient(135deg,var(--hd-gold),var(--hd-gold-d)) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.45) !important; z-index:3;
}
/* logo → täysleveä boksi, logo KOKONAISENA (contain, ei crop) */
body.home-redesign #top-kasinot .casino-logo-wrap{
  width:100% !important; height:78px !important; min-height:0 !important;
  border-radius:12px !important; margin:0 !important; padding:10px 14px !important;
  display:flex !important; align-items:center; justify-content:center; overflow:hidden;
}
body.home-redesign #top-kasinot .casino-logo-wrap img,
body.home-redesign #top-kasinot .casino-logo-img{
  max-width:100% !important; max-height:56px !important;
  width:auto !important; height:auto !important;
  object-fit:contain !important; object-position:center !important;
  padding:0 !important; transform:none !important; filter:none !important; cursor:default;
}
/* info → keskitetty pino */
body.home-redesign #top-kasinot .casino-info{
  display:flex !important; flex-direction:column; align-items:center; gap:.4rem;
  width:100%; padding:0 !important;
}
body.home-redesign #top-kasinot .casino-rating{ justify-content:center; }
body.home-redesign #top-kasinot .casino-bonus{ font-size:.82rem; line-height:1.34; }
/* meta-pillit → pieninä, keskitettyinä, rivittyvät */
body.home-redesign #top-kasinot .casino-meta{
  display:flex !important; flex-direction:column; align-items:center; gap:.3rem; width:100%;
}
body.home-redesign #top-kasinot .meta-item{ justify-content:center; font-size:.72rem; }
/* napit → kortin pohjaan, täysleveinä, allekkain */
body.home-redesign #top-kasinot .casino-cta{
  margin-top:auto; width:100%; padding-top:.4rem;
  display:flex !important; flex-direction:column; gap:.5rem; align-items:stretch;
}
body.home-redesign #top-kasinot .casino-cta .btn{ width:100%; }
body.home-redesign #top-kasinot .tc-note{ font-size:.7rem; text-align:center; }

/* ============================================================
   R169c: mobiilissa KASINOT ennen UUTISIA.
   Desktop: .home-reorder = display:contents (näkymätön kääre) →
   osiot lähdejärjestyksessä (uutiset → kasinot). Mobiili: kääre
   muuttuu flex-pylvääksi ja #top-kasinot saa order:-1 → kasinot
   nousevat uutisten edelle. Puhdas CSS, ei layout-shiftiä.
   ============================================================ */
.home-reorder{ display:contents; }
@media (max-width:768px){
  .home-reorder{ display:flex; flex-direction:column; }
  .home-reorder #top-kasinot{ order:-1; }
  .home-reorder #uutiset-nosto{ order:0; }
}

/* "miksi" content + guide cards + faq */
body.home-redesign .content-block,
body.home-redesign .guide-card,
body.home-redesign .faq-item,
body.home-redesign .feature-box,
body.home-redesign .info-card{ background:rgba(255,255,255,.04) !important; border:1px solid var(--hd-line); color:var(--hd-txt); border-radius:14px; }
body.home-redesign .guide-card h3,
body.home-redesign .content-block h3,
body.home-redesign .faq-question,
body.home-redesign .faq-item summary,
body.home-redesign .faq-item h3{ color:#fff; }
body.home-redesign .guide-card p,
body.home-redesign .content-block p,
body.home-redesign .faq-item p,
body.home-redesign .faq-answer{ color:var(--hd-txt-soft); }
body.home-redesign .faq-item summary::marker,
body.home-redesign .faq-item summary::-webkit-details-marker{ color:var(--hd-gold); }

/* footer → ensure dark + readable */
body.home-redesign .site-footer{ background:#070d18 !important; border-top:1px solid var(--hd-line); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce){
  body.home-redesign{ background-attachment:scroll; }
  .hnews-card, body.home-redesign .category-card, body.home-redesign .payment-card{ transition:none; }
}

/* ============================================================
   R169d: kasinolistauksen otsikko NÄYTTÄVÄNÄ KYLTTINÄ (kasino-marquee).
   Käyttäjäpyyntö 2026-06-05: "Parhaat kasinot juuri nyt!" hienon ja
   näyttävän kyltin sisällä. Tumma kiiltävä laatta + kaksoiskultakehys +
   hehkuvat marquee-lamput ylä/alareunassa + kultainen kohotekstilogo.
   ============================================================ */
.casino-sign-wrap{ text-align:center; margin:0 0 1.6rem; }
.casino-sign{
  position:relative; display:inline-flex; align-items:center; gap:.85rem;
  padding:.95rem clamp(1.5rem,4vw,2.8rem); border-radius:16px;
  background:linear-gradient(180deg, rgba(22,44,78,.97) 0%, rgba(9,18,36,.99) 100%);
  box-shadow:
    0 0 0 2px rgba(245,200,66,.92),
    0 0 0 5px rgba(9,16,30,.96),
    0 0 0 7px rgba(212,160,23,.7),
    0 16px 40px -12px rgba(0,0,0,.7),
    0 0 30px rgba(245,200,66,.30),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -14px 30px rgba(0,0,0,.5);
}
/* marquee-lamput ylä- ja alareunaan */
.casino-sign::before, .casino-sign::after{
  content:""; position:absolute; left:18px; right:18px; height:7px; pointer-events:none;
  background-image:radial-gradient(circle, #fff1c4 0 1.9px, rgba(245,200,66,.35) 2.3px, transparent 2.8px);
  background-size:15px 7px; background-repeat:repeat-x; background-position:center;
  filter:drop-shadow(0 0 3px rgba(245,200,66,.85));
  animation:casinoSignBulbs 1.5s ease-in-out infinite;
}
.casino-sign::before{ top:6px; }
.casino-sign::after{ bottom:6px; animation-delay:.75s; }
@keyframes casinoSignBulbs{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
.casino-sign__ic{
  color:var(--hd-gold); font-size:1.25rem; line-height:1;
  filter:drop-shadow(0 0 7px rgba(245,200,66,.75)); flex:none;
}
.casino-sign__text{
  margin:0 !important; padding:0 !important;
  font-family:var(--font-heading, 'Playfair Display', Georgia, serif);
  font-size:clamp(1.35rem,3.4vw,2.05rem); font-weight:800; line-height:1.12; white-space:nowrap;
  background:linear-gradient(180deg,#fff7e0 0%,#f5c842 52%,#d4a017 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.45)); letter-spacing:.4px;
}
.casino-sign__text::before, .casino-sign__text::after{ display:none !important; }
@media (max-width:600px){
  .casino-sign{ gap:.5rem; padding:.8rem 1.05rem; }
  .casino-sign__text{ white-space:normal; font-size:clamp(1.1rem,5.2vw,1.5rem); }
  .casino-sign::before, .casino-sign::after{ left:11px; right:11px; }
  .casino-sign__ic{ font-size:1.05rem; }
}
@media (prefers-reduced-motion: reduce){
  .casino-sign::before, .casino-sign::after{ animation:none; }
}