/* ── Custom Prediction Market Interactive Infographic Styles ── */

:root {
  --frame-width: 855px;
  --frame-height: 682px;
  --frame-inset: 30px;
  --frame-bg: #f6f4fa;
  --frame-purple: #4e1fa3;
  --frame-line: rgba(61, 61, 61, 0.6);
  --text-main: #191A1E;
  --muted-text: rgba(25, 26, 30, 0.64);
  --tile-border: rgba(25, 26, 30, 0.1);
}

.blog-frame {
  width: min(100%, var(--frame-width));
  min-height: var(--frame-height);
  height: auto;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  background: var(--frame-bg);
  box-shadow: 0 22px 60px rgba(53, 40, 90, 0.12);
  isolation: isolate;
  margin: 1.5rem auto 2rem auto;

  /* Container query context */
  container-type: inline-size;
  container-name: blog-frame;
}

.blog-frame::before {
  content: "";
  position: absolute;
  inset: var(--frame-inset);
  border: 1.474px solid var(--frame-line);
  border-radius: 20px;
  pointer-events: none;
  z-index: 2;
}

.blog-frame__canvas {
  position: relative;
  z-index: 1;
  padding: var(--frame-inset);
}

.blog-frame__header {
  padding: 29px 44px 17px;
  text-align: center;
}

.blog-frame__title {
  max-width: 760px;
  margin: 0 auto;
  color: #08070c !important;
  background: none !important;
  -webkit-text-fill-color: #08070c !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.16 !important;
}

.blog-frame__title span {
  color: var(--frame-purple) !important;
  background: none !important;
  -webkit-text-fill-color: var(--frame-purple) !important;
  font-weight: 600;
}

.feature-section {
  padding: 43px 39px 38px;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.feature-tile {
  min-height: 112px;
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 14px;
  padding: 17px 20px;
  border: 1px solid var(--tile-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 10px 24px rgba(56, 47, 90, 0.08);
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
  cursor: pointer;
  outline: none;
  user-select: none;
}

.feature-tile:hover,
.feature-tile.is-active {
  background: var(--active-bg);
  border-color: var(--active-border);
  box-shadow: 0 16px 30px var(--active-shadow);
  transform: translateY(-3px);
}

.feature-tile__icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 10px 18px var(--active-shadow);
  transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.feature-tile:hover .feature-tile__icon,
.feature-tile.is-active .feature-tile__icon {
  background: var(--accent-strong);
  box-shadow: 0 0 0 8px var(--accent-soft), 0 14px 24px var(--active-shadow);
  transform: scale(1.06);
}

.feature-tile__icon svg {
  width: 30px;
  height: 30px;
  display: block;
  fill: currentColor;
}

.feature-tile__content {
  min-width: 0;
}

.feature-tile__content h2 {
  margin: 0;
  color: #000000;
  background: none;
  -webkit-text-fill-color: #000000;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.16;
  transition: color 0.22s ease, -webkit-text-fill-color 0.22s ease;
}

.feature-tile:hover .feature-tile__content h2,
.feature-tile.is-active .feature-tile__content h2 {
  color: var(--accent-strong);
  -webkit-text-fill-color: var(--accent-strong);
}

.feature-detail {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid var(--active-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 14px 32px rgba(56, 47, 90, 0.08);
}

.feature-detail__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 19px 28px 16px;
  background: var(--active-bg);
}

.feature-detail__icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  flex: 0 0 50px;
  border-radius: 12px;
  background: var(--accent-strong);
  color: #ffffff;
  box-shadow: 0 10px 18px var(--active-shadow);
}

.feature-detail__icon svg {
  width: 29px;
  height: 29px;
  display: block;
  fill: currentColor;
}

.feature-detail__header h2 {
  margin: 0;
  color: #000000;
  background: none;
  -webkit-text-fill-color: #000000;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.12 !important;
}

.feature-detail__body {
  padding: 18px 28px 20px;
  border-top: 1px solid rgba(25, 26, 30, 0.08);
}

.feature-detail__body p {
  max-width: 830px;
  margin: 0 0 15px;
  color: rgba(25, 26, 30, 0.72);
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

.feature-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feature-detail__tags span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 16px;
  border: 1px solid var(--active-border);
  border-radius: 999px;
  background: var(--active-bg);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.feature-tile--violet,
.feature-detail--violet {
  --accent: #8a62d9;
  --accent-strong: #704ac3;
  --accent-muted: rgba(112, 74, 195, 0.72);
  --accent-soft: rgba(138, 98, 217, 0.15);
  --active-bg: #f5f0ff;
  --active-border: rgba(138, 98, 217, 0.34);
  --active-shadow: rgba(138, 98, 217, 0.2);
}

.feature-tile--coral,
.feature-detail--coral {
  --accent: #ff4058;
  --accent-strong: #e82943;
  --accent-muted: rgba(232, 41, 67, 0.72);
  --accent-soft: rgba(255, 64, 88, 0.15);
  --active-bg: #fff0f3;
  --active-border: rgba(255, 64, 88, 0.38);
  --active-shadow: rgba(255, 64, 88, 0.2);
}

.feature-tile--indigo,
.feature-detail--indigo {
  --accent: #3024aa;
  --accent-strong: #251a95;
  --accent-muted: rgba(37, 26, 149, 0.72);
  --accent-soft: rgba(48, 36, 170, 0.15);
  --active-bg: #f0efff;
  --active-border: rgba(48, 36, 170, 0.32);
  --active-shadow: rgba(48, 36, 170, 0.18);
}

.feature-tile--teal,
.feature-detail--teal {
  --accent: #168f8a;
  --accent-strong: #0f7773;
  --accent-muted: rgba(15, 119, 115, 0.72);
  --accent-soft: rgba(22, 143, 138, 0.15);
  --active-bg: #ecfbf9;
  --active-border: rgba(22, 143, 138, 0.32);
  --active-shadow: rgba(22, 143, 138, 0.18);
}

.feature-tile--amber,
.feature-detail--amber {
  --accent: #b56c12;
  --accent-strong: #96570b;
  --accent-muted: rgba(150, 87, 11, 0.72);
  --accent-soft: rgba(181, 108, 18, 0.15);
  --active-bg: #fff5e8;
  --active-border: rgba(181, 108, 18, 0.34);
  --active-shadow: rgba(181, 108, 18, 0.18);
}

.feature-tile--green,
.feature-detail--green {
  --accent: #1b8e3d;
  --accent-strong: #126f2d;
  --accent-muted: rgba(18, 111, 45, 0.72);
  --accent-soft: rgba(27, 142, 61, 0.15);
  --active-bg: #effaf2;
  --active-border: rgba(27, 142, 61, 0.32);
  --active-shadow: rgba(27, 142, 61, 0.18);
}

/* Container-query based responsive styling */
@container blog-frame (min-width: 481px) and (max-width: 799px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container blog-frame (min-width: 800px) {
  .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 16px;
  }
}

@container blog-frame (max-width: 480px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  :root {
    --frame-inset: 12px;
  }

  .blog-frame__header {
    padding: 16px 14px 10px;
  }

  .blog-frame__title {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  .feature-section {
    padding: 20px 12px 18px;
  }

  .feature-grid {
    gap: 8px;
  }

  .feature-tile {
    grid-template-columns: 42px 1fr;
    gap: 10px;
    padding: 10px 12px;
    min-height: 72px;
    border-radius: 8px;
  }

  .feature-tile__icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    box-shadow: 0 4px 10px var(--active-shadow);
  }

  .feature-tile:hover .feature-tile__icon,
  .feature-tile.is-active .feature-tile__icon {
    box-shadow: 0 0 0 4px var(--accent-soft), 0 6px 12px var(--active-shadow);
  }

  .feature-tile__icon svg {
    width: 22px;
    height: 22px;
  }

  .feature-tile__content h2 {
    font-size: 13.5px !important;
    line-height: 1.2 !important;
  }

  .feature-detail {
    margin-top: 12px;
    border-radius: 10px;
  }

  .feature-detail__header {
    padding: 12px 16px;
    gap: 12px;
  }

  .feature-detail__icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 8px;
    box-shadow: 0 4px 10px var(--active-shadow);
  }

  .feature-detail__icon svg {
    width: 22px;
    height: 22px;
  }

  .feature-detail__header h2 {
    font-size: 15.5px !important;
  }

  .feature-detail__body {
    padding: 12px 16px 14px;
  }

  .feature-detail__body p {
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    margin: 0 0 10px !important;
  }

  .feature-detail__tags {
    gap: 6px;
  }

  .feature-detail__tags span {
    min-height: 24px;
    padding: 3px 10px;
    font-size: 11px;
  }
}