/* ============================================================
   StackUI Widget: banner  (scoped styles — ALL variants)
   ------------------------------------------------------------
   Everything is scoped under .stk-banner so it can never leak
   into other widgets or fight the core.

   Variants covered:
     - split       (แบบ 1)  hero | financial panel side-by-side
     - hero-col12  (แบบ 2)  hero + 12-col financial grid section

   REMOVED vs the original ref-template (now provided by core):
     - Google-font @import, * reset, base body/p/a  -> core + tokens
     - .container + media queries                    -> Bootstrap
     - generic utils (.d-flex, .justify-content-between,
       .float-start, .text-end, .mb-0)               -> Bootstrap

   KEPT (widget-specific — needed for fidelity), all scoped:
     btn overrides, custom spacing (.mb-8, .mt-48), and EVERY
     banner rule (.left/.right/.block-grid/.block/.symbol/etc.)
     across both variants plus all responsive breakpoints.

   Brand green (#57CC33) -> central token var(--stk-primary).
   ============================================================ */

.stk-banner {
  /* original :root tokens, moved onto the widget scope */
  --text-header: #000000;
  --text-sub-header: #888888;
  --text-white: #ffffff;
  --bg-white: #ffffff;
  --bg-card: #FAFBFD;
  --button-primary-bg: #000000;
  --button-primary-text: #ffffff;
  --bg-color-primary: var(--stk-primary);  /* was #57CC33 */
  --border-radius-medium: 8px;
  --border-radius-large: 16px;
  --border-radius-small: 4px;
  --border-radius-xl: 100px;
}

/* ----- widget-scoped custom spacing (8pt scale, override Bootstrap) ----- */
.stk-banner .mb-8 { margin-bottom: 8px; }
.stk-banner .mt-48 { margin-top: 48px; }

/* ----- Button (widget-specific pill) ----- */
.stk-banner .btn {
  padding: 8px 24px;
  border-radius: var(--border-radius-xl);
  cursor: pointer;
  white-space: nowrap;
}
.stk-banner .btn-primary {
  color: var(--button-primary-text);
  background-color: var(--button-primary-bg);
  border-color: var(--button-primary-bg);
  width: max-content;
  cursor: pointer;
  transition: 0.35s;
}
.stk-banner .btn-primary:hover {
  background-color: var(--bg-color-primary);
  border-color: var(--bg-color-primary);
}
.stk-banner .btn-primary:active,
.stk-banner .btn-primary:focus {
  background-color: var(--bg-color-primary) !important;
  border-color: var(--bg-color-primary) !important;
}

/* ============================================================
   Banner shell (shared by both variants)
   ============================================================ */
.stk-banner .banner {
  display: flex;
  margin-top: 70px;
}

@media (max-width: 991px) {
  .stk-banner .banner {
    display: block;
  }
}

.stk-banner .logo-style {
  border-radius: 12px;
  background-color: var(--bg-white);
}

.stk-banner .left {
  flex: 1.3;
  background: url(./images/banner.webp) no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: var(--text-header);
  position: relative;
}

.stk-banner .left::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.stk-banner .left-content {
  position: relative;
  max-width: 640px;
  text-align: left;
  z-index: 1;
  backdrop-filter: blur(16px);
  padding: 48px 32px;
  border-radius: var(--border-radius-large);
}

.stk-banner .left-content h1 {
  font-size: 64px;
  font-weight: 600;
  color: var(--text-header);
}

.stk-banner .left-content p {
  font-size: 18px;
  margin-bottom: 20px;
  color: var(--text-sub-header);
}

.stk-banner .right {
  flex: 1;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.stk-banner .right::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url('./images/banner-overlay.webp');
  background-size: cover;
  background-position-x: 285px;
  background-position-y: top;
}

/* .block-grid is declared twice in the original style.css — merged into one rule
   (second declaration's grid-template-columns wins, matching the live site) */
.stk-banner .block-grid {
  width: 500px;
  padding: 16px;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* ============================================================
   Variant: hero-col12 (.banner-info-col-12)
   ============================================================ */
.stk-banner .banner-info-col-12 .block-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 25px;
  max-width: 100%;
  padding: 0;
  margin: 40px auto;
}

.stk-banner .banner-info-col-12 .block-grid .block {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  background-color: var(--bg-card);
  grid-column: span 2;
}

.stk-banner .banner-info-col-12 .block-grid .block:first-of-type {
  grid-column: span 4;
}

.stk-banner .banner-info-col-12 .block-grid .block img {
  width: 50px;
  height: 50px;
}

.stk-banner .banner-info-col-12 .symbol-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ============================================================
   Blocks (shared, .block declared twice — merged)
   ============================================================ */
.stk-banner .block {
  background-color: var(--bg-white);
  padding: 20px;
  border-radius: var(--border-radius-medium);
  position: relative;
  z-index: 2;
  border: 0;
}

.stk-banner .block h5 {
  font-size: 14px;
  color: var(--text-sub-header);
  line-height: normal;
}

/* .block:first-of-type declared twice in original — merged */
.stk-banner .block:first-of-type {
  background-color: var(--bg-white);
  background-image: url("./images/circle-blur.png");
  background-position: left top;
  background-repeat: no-repeat;
  border: 0;
  grid-column: span 2;
}

.stk-banner .block:nth-of-type(2) {
  background-image: url(./images/circle-blur.png);
  background-position-x: 52px;
  background-size: cover;
  background-repeat: no-repeat;
}

.stk-banner .block:nth-of-type(3) {
  background-image: url(./images/circle-blur.png);
  background-position-x: 52px;
  background-size: cover;
  background-repeat: no-repeat;
}

.stk-banner .block:nth-of-type(4) {
  background-image: url(./images/circle-blur.png);
  background-position-x: right;
  background-size: cover;
  background-repeat: no-repeat;
}

.stk-banner .block:nth-of-type(5) {
  background-image: url(./images/circle-blur.png);
  background-position-x: left;
  background-size: cover;
  background-repeat: no-repeat;
}

.stk-banner .block .label {
  color: var(--text-sub-header);
  font-size: 14px;
}

.stk-banner .block .value {
  color: #161A19;
  font-size: 22px;
  font-weight: 600;
}

.stk-banner .symbol-info {
  display: flex;
  justify-content: space-between;
}

.stk-banner .symbol-info .lasted {
  text-align: right;
}

.stk-banner .symbol {
  font-size: 32px;
  font-weight: 600;
  color: var(--text-header);
}

/* ============================================================
   Responsive breakpoints (shared)
   ============================================================ */
@media (max-width: 1199px) {
  .stk-banner .banner-info-col-12 .block-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .stk-banner .banner-info-col-12 .block-grid .block {
    grid-column: auto;
  }

  .stk-banner .left-content h1 {
    font-size: 42px;
  }

  .stk-banner .left-content p {
    font-size: 16px;
  }
}

@media (max-width: 991px) {
  .stk-banner .banner-info-col-12 .block-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .stk-banner .banner-info-col-12 .block-grid .block:first-of-type {
    grid-column: span 2;
    grid-row: auto;
  }

  .stk-banner .left {
    justify-content: center;
    padding: 40px 24px;
  }

  .stk-banner .block-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .stk-banner .block:first-of-type {
    grid-row: span 2;
  }

  .stk-banner .symbol-info {
    display: block;
    justify-content: space-between;
  }

  .stk-banner .symbol-info .lasted {
    text-align: left;
  }
}

@media (max-width: 767px) {
  .stk-banner .banner-info-col-12 .block-grid .block:first-of-type {
    grid-row: auto;
    grid-column: span 2;
  }

  .stk-banner .block-grid {
    padding: 0;
  }

  .stk-banner .symbol-info {
    display: flex;
  }

  .stk-banner .symbol-info .lasted {
    text-align: right;
  }

  .stk-banner .block .value {
    font-size: 20px;
  }

  .stk-banner .block:first-of-type {
    grid-row: span 2;
    grid-column: span 4;
  }
}

@media (max-width: 575px) {
  .stk-banner .banner-info-col-12 .block-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .stk-banner .left-content h1 {
    font-size: 32px;
  }

  .stk-banner .left-content p {
    font-size: 14px;
  }

  .stk-banner .block {
    padding: 18px;
  }

  .stk-banner .block-grid {
    gap: 12px;
    padding: 0;
  }

  .stk-banner .block:nth-of-type(2),
  .stk-banner .block:nth-of-type(3),
  .stk-banner .block:nth-of-type(4),
  .stk-banner .block:nth-of-type(5) {
    grid-row: span 2;
    grid-column: span 2;
  }

  .stk-banner .block .value {
    font-size: 18px;
  }

  .stk-banner .symbol-info .lasted h5 {
    font-size: 12px;
    font-weight: 400;
  }
}