/*
 * SBOTOTO R6.9.0.2 — CHINDOTOTO Geometry Discipline Pass
 * Presentation-only homepage override.
 * Geometry authority: supplied CHINDOTOTO reference snapshot/source:
 * - Bootstrap desktop container: 1170px
 * - Main rail: col-sm-3 / col-sm-9 => 3:9 ratio
 * - Eight-item compact primary menu
 * - Artwork is viewport framing (cover/fixed), not a stretched page-height image
 * - Dense, continuous vertical portal rhythm with no detached lower island
 */

body.reference-portal.page-home{
  --geo-shell:1170px;
  --geo-rail-ratio:3fr;
  --geo-main-ratio:9fr;
  --geo-gutter:15px;
  --geo-section-gap:10px;
  --geo-red:#e70606;
  --geo-red-mid:#a20808;
  --geo-maroon:#3d0202;
  --geo-maroon-deep:#260000;
  --geo-gold:#ffd126;
  --geo-line:rgba(255,209,38,.34);
}

@media (min-width:901px){
  /* Reference background behavior: fixed COVER artwork around a centered 1170px portal. */
  body.reference-portal.page-home{
    background-color:#160000;
    background-image:url('../assets/site-background-r6819-crimson.webp');
    background-position:center top;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
  }
  body.reference-portal.page-home::before{
    background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.10) 48%,rgba(0,0,0,.18));
  }
  body.reference-portal.page-home::after{display:none}

  body.reference-portal.page-home .container{
    width:min(calc(100% - 20px),var(--geo-shell));
    max-width:var(--geo-shell);
  }

  /* Header stays inside exactly the same 1170px axis as the portal body. */
  body.reference-portal.page-home .topbar{background:transparent;border:0;box-shadow:none;backdrop-filter:none}
  body.reference-portal.page-home .topbar-inner{
    min-height:56px;
    padding:0 var(--geo-gutter);
    border-left:1px solid rgba(255,209,38,.22);
    border-right:1px solid rgba(255,209,38,.22);
    background:linear-gradient(180deg,rgba(61,2,2,.985),rgba(38,0,0,.99));
    box-shadow:0 7px 18px rgba(0,0,0,.32);
  }
  body.reference-portal.page-home .brand-logo-native{height:35px;max-width:190px}
  body.reference-portal.page-home .login-form{gap:5px}
  body.reference-portal.page-home .login-form input{width:128px;height:28px;font-size:8px}
  body.reference-portal.page-home .login-form .btn{height:28px;min-height:28px;padding-inline:11px;font-size:7px}

  /* Reference news strip is thin and flush with the same shell. */
  body.reference-portal.page-home .ticker-grid{
    height:26px;
    grid-template-columns:150px minmax(0,1fr);
    border-left:1px solid var(--geo-line);
    border-right:1px solid var(--geo-line);
    border-bottom:1px solid var(--geo-line);
    background:linear-gradient(180deg,#a90c13,#69060a);
  }
  body.reference-portal.page-home .ticker-label{font-size:7px}
  body.reference-portal.page-home .ticker-track{font-size:7px}

  /* Eight compact menu cells; dimensions mirror the supplied .new-menu rhythm. */
  body.reference-portal.page-home .portal-nav{background:transparent;border:0;box-shadow:none}
  body.reference-portal.page-home .portal-nav-inner{
    min-height:62px;
    gap:10px;
    padding:10px;
    border-left:1px solid var(--geo-line);
    border-right:1px solid var(--geo-line);
    border-bottom:1px solid var(--geo-line);
    background:linear-gradient(180deg,var(--geo-maroon),var(--geo-maroon-deep));
    overflow:visible;
  }
  body.reference-portal.page-home .portal-nav a{
    flex:1 1 0;
    min-width:0;
    min-height:42px;
    padding:4px 7px;
    gap:3px;
    border:1px solid var(--geo-red);
    border-left-width:3px;
    border-right-width:3px;
    border-radius:10px;
    background:linear-gradient(180deg,#e70606,#e10505 34%,#bd0606 68%,#a10808);
    box-shadow:inset 0 1px rgba(255,255,255,.12),0 3px 8px rgba(0,0,0,.25);
  }
  body.reference-portal.page-home .portal-nav .ui-icon-host{width:18px;height:18px}
  body.reference-portal.page-home .portal-nav .ui-icon-host svg{width:18px;height:18px}
  body.reference-portal.page-home .portal-nav strong{font-size:6.6px;line-height:1.05}

  /* Exact Bootstrap-like 3/9 rail geometry. No arbitrary 230px sidebar. */
  body.reference-portal.page-home .main-shell{padding:0 0 10px}
  body.reference-portal.page-home .main-shell>.page-grid{
    display:grid;
    grid-template-columns:var(--geo-rail-ratio) var(--geo-main-ratio);
    gap:0;
    padding:10px 0 12px;
    border-left:1px solid var(--geo-line);
    border-right:1px solid var(--geo-line);
    border-bottom:1px solid var(--geo-line);
    background:rgba(0,0,0,.73);
    box-shadow:0 24px 44px rgba(0,0,0,.40);
  }
  body.reference-portal.page-home .sidebar{
    position:static;
    width:auto;
    min-width:0;
    gap:10px;
    padding:0 var(--geo-gutter);
    align-content:start;
  }
  body.reference-portal.page-home .content-column{
    min-width:0;
    gap:var(--geo-section-gap);
    padding:0 var(--geo-gutter);
  }

  /* Left rail density follows the reference sidebar/transaction proportions. */
  body.reference-portal.page-home .sidebar-register{
    min-height:35px;
    border-radius:8px;
    font-size:8px;
  }
  body.reference-portal.page-home .transaction-box,
  body.reference-portal.page-home .results-panel,
  body.reference-portal.page-home .support-card{
    border-radius:5px;
  }
  body.reference-portal.page-home .transaction-box{padding:7px}
  body.reference-portal.page-home .transaction-box .panel-heading{margin:-7px -7px 6px}
  body.reference-portal.page-home .panel-heading{min-height:28px;padding:6px 8px}
  body.reference-portal.page-home .panel-heading-title h2{font-size:7.5px}
  body.reference-portal.page-home .transaction-window{height:150px}
  body.reference-portal.page-home .auto-scroll-list{max-height:150px}
  body.reference-portal.page-home .transaction-item{
    min-height:29px;
    grid-template-columns:22px minmax(0,1fr) auto;
    gap:6px;
    padding:4px 3px;
    font-size:6.8px;
  }
  body.reference-portal.page-home .transaction-item small{font-size:5.8px}
  body.reference-portal.page-home .result-slider{max-height:174px;overflow:hidden}
  body.reference-portal.page-home .latest-news{max-height:168px;overflow:auto}

  /* Main banner: restore the taller 9-column reference banner ratio. */
  body.reference-portal.page-home .hero{
    min-height:0;
    aspect-ratio:840 / 482;
    border-radius:5px;
  }
  body.reference-portal.page-home .hero-slide{
    min-height:0;
    height:100%;
    grid-template-columns:minmax(0,1.18fr) minmax(250px,.82fr);
    padding:36px 38px 44px;
  }
  body.reference-portal.page-home .hero-copy{max-width:520px}
  body.reference-portal.page-home .hero h1{font-size:52px;line-height:.94}
  body.reference-portal.page-home .hero h2{font-size:19px}
  body.reference-portal.page-home .hero p{font-size:9px;line-height:1.52}
  body.reference-portal.page-home .hero-actions{margin-top:15px}
  body.reference-portal.page-home .hero-art{min-height:255px}
  body.reference-portal.page-home .pe-hero-logo{width:min(220px,78%)}
  body.reference-portal.page-home .pe-hero-orbit{width:205px;height:205px}

  /* Reference promotion row is three horizontal tiles under the hero. */
  body.reference-portal.page-home .pg22-public-showcase{
    grid-template-columns:repeat(3,minmax(0,267px));
    justify-content:center;
    gap:10px;
    margin:25px 0 15px;
  }
  body.reference-portal.page-home .pg22-feature{
    width:100%;
    max-width:267px;
    min-height:142px;
    border:2px groove #dbaf4c;
    border-radius:10px;
  }
  body.reference-portal.page-home .pg22-feature:nth-child(n+4){display:none}
  body.reference-portal.page-home .pg22-feature-content{left:10px;right:10px;bottom:9px}
  body.reference-portal.page-home .pg22-feature h3{font-size:18px}

  /* Four metric cells directly below promotions, as in the supplied reference. */
  body.reference-portal.page-home .service-strip{border-radius:5px}
  body.reference-portal.page-home .service-strip article{min-height:58px;padding:8px 10px}
  body.reference-portal.page-home .service-strip small{font-size:6px}
  body.reference-portal.page-home .service-strip strong{font-size:11px}

  /* Secondary shortcuts remain subordinate and compact. */
  body.reference-portal.page-home .feature-menu{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
  body.reference-portal.page-home .feature-menu a{min-height:58px;padding:7px;border-radius:5px}
  body.reference-portal.page-home .feature-menu .ui-icon-host{width:28px;height:28px;padding:6px}

  /* Reference results/bank blocks are dense, not large dashboard cards. */
  body.reference-portal.page-home .section-card,
  body.reference-portal.page-home .bank-schedule{border-radius:5px}
  body.reference-portal.page-home .section-title,
  body.reference-portal.page-home .latest-pools-heading,
  body.reference-portal.page-home .bank-schedule-header{min-height:39px;padding:7px 10px}
  body.reference-portal.page-home .pools-track{gap:7px;padding:0 9px 9px}
  body.reference-portal.page-home .pool-card{flex:0 0 calc((100% - 21px)/4);border-radius:5px}
  body.reference-portal.page-home .bank-carousel-track{gap:7px;padding:8px 9px}
  body.reference-portal.page-home .bank-card{flex:0 0 142px;min-height:70px;border-radius:5px}

  /* Lower visual stays inside portal and no full-width artwork break is allowed. */
  body.reference-portal.page-home .trust-strip-section{height:72px;border-radius:5px}

  /* Footer exactly inherits the reference desktop container width. */
  body.reference-portal.page-home .footer{
    width:min(calc(100% - 20px),var(--geo-shell));
    margin:0 auto;
    border-radius:0;
    border-top:1px solid var(--geo-gold);
    background:#3a0000;
    box-shadow:0 30px 54px rgba(0,0,0,.56);
  }
  body.reference-portal.page-home .footer>.container{width:100%;max-width:none;padding-inline:15px}
  body.reference-portal.page-home .footer-grid{padding:15px 0 10px;gap:12px 16px}

  /* Floating widget must live outside the portal, not obscure its right column. */
  body.reference-portal.page-home .asean-circle-menu{
    right:max(12px,calc((100vw - var(--geo-shell))/2 - 60px));
    bottom:18px;
  }
}

/* Fluid 3/9 geometry down to tablet, then existing mobile model takes over. */
@media (min-width:621px) and (max-width:900px){
  body.reference-portal.page-home .main-shell>.page-grid{
    grid-template-columns:3fr 9fr;
    gap:0;
    padding-inline:0;
  }
  body.reference-portal.page-home .sidebar,
  body.reference-portal.page-home .content-column{padding-inline:10px}
  body.reference-portal.page-home .hero,
  body.reference-portal.page-home .hero-slide{min-height:350px}
  body.reference-portal.page-home .pg22-public-showcase{grid-template-columns:repeat(3,minmax(0,1fr));margin:10px 0}
}

@media (max-width:620px){
  body.reference-portal.page-home{background-attachment:scroll;background-size:auto 100vh}
  body.reference-portal.page-home .pg22-public-showcase{grid-template-columns:1fr 1fr}
  body.reference-portal.page-home .pg22-feature:nth-child(n+4){display:block}
}