/* ==========================================================================
   casino.css — /maruay888-online-casino/ only. Loaded after style.css + responsive.css.
   Colours, the page head, picture frames, headings and buttons come from style.css
   (section 16 "Shared page components"); this file only holds the layout.
   Reused from style.css: .breadcrumb, .article*, .feature*, .faq*, .cta, .btn, .register-cta.

   1. Hero layout    2. Quick provider nav    3. Provider sections    4. Related links    5. Responsive
   ========================================================================== */

/* 1. Hero layout (surface: .casino-hero in style.css) ----------------------------------------- */
.casino-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 47%); gap: var(--space-lg); align-items: center; }
.casino-hero__media { overflow: hidden; }
.casino-hero__media img { display: block; width: 100%; height: auto; }

/* 2. Quick provider nav: sticky chip row, scrolls sideways when it does not fit -------- */
.provider-nav {
    position: sticky; top: var(--header-h); z-index: 20;
    margin-top: 14px; padding: 10px 0;
    border-bottom: 1px solid var(--line);
    background: var(--bg-main);
}
.provider-nav__list { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.provider-nav__list::-webkit-scrollbar { display: none; }
.provider-nav__link {
    display: inline-flex; align-items: center; min-height: 36px; padding: 4px 16px;
    border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
    background: var(--surface-1); color: var(--text-nav); font-size: 14px; font-weight: 400; white-space: nowrap;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.provider-nav__link:hover { border-color: var(--border-hover); color: var(--gold-bright); }
.provider-nav__link[aria-current="true"] { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-bright); }

/* 3. Article frame + provider sections (image | text, alternating) ------------------------ */
.casino-article { max-width: none; margin: 0; padding-top: 0; border-top: 0; }
.casino-article .article__section > p, .casino-article .faq { max-width: 820px; }
.casino-article > .article__section:first-child { margin-top: var(--space-lg); }
/* anchors land below the app bar + the sticky chip row */
.casino-article .article__section { scroll-margin-top: calc(var(--header-h) + 72px); }

.provider {
    display: grid; grid-template-columns: minmax(0, 45%) minmax(0, 1fr); gap: 32px; align-items: center;
    margin-top: 0; padding: 36px 0;
    border-bottom: 1px solid rgba(228, 184, 63, .1);
}
.casino-article > .provider:first-of-type { margin-top: var(--space-lg); border-top: 1px solid rgba(228, 184, 63, .1); }
.provider--flip .provider__media { order: 2; }
.provider__media { overflow: hidden; transition: border-color var(--transition); }
.provider__media img { display: block; width: 100%; height: auto; transition: transform var(--transition); }
.provider:hover .provider__media { border-color: var(--border-hover); }
.provider:hover .provider__media img { transform: scale(1.01); }
.provider__body { min-width: 0; max-width: 760px; }
.provider__body p { color: var(--text-article); font-size: 16px; line-height: 1.8; }
.provider__body p + p { margin-top: 12px; }
.provider__facts { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.provider__facts div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; font-size: 15px; line-height: 1.7; }
.provider__facts dt { color: #b9913a; font-weight: 400; }           /* muted gold, still readable at 15px */
.provider__facts dd { margin: 0; color: var(--text-secondary); }

/* 4. Related links (3 instead of the 4 columns of the home page) ----------------------------- */
.casino-article .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 5. Responsive -------------------------------------------------------------------------------- */
@media (max-width: 959px) {
    .casino-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .casino-hero__media { order: -1; }
    .provider { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 28px 0; }
    .provider--flip .provider__media { order: 0; }
    .provider__body { max-width: none; }
    .casino-article .article__section { scroll-margin-top: calc(var(--header-h) + 64px); }
}
@media (max-width: 599px) {
    .provider-nav { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
    .provider__title { font-size: 19px; }
    .provider__body p { font-size: 15px; }
    .provider__facts div { grid-template-columns: 84px minmax(0, 1fr); font-size: 14px; }
    .casino-article .feature-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (hover: none) {
    .provider:hover .provider__media img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .provider:hover .provider__media img { transform: none; }
}