/* fusion-bands.css  — scoped to this page */

/* ===== Tables (Stree Shakti look) ===== */
#fusion-venues .table-venues {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #eeecec;
  table-layout: fixed;            /* helps wrapping in narrow viewports */
}
#fusion-venues .table-venues th,
#fusion-venues .table-venues td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  white-space: normal;            /* allow wrapping */
  overflow-wrap: anywhere;        /* modern browsers */
  word-break: break-word;         /* fallback */
}
#fusion-venues .table-venues tbody tr:nth-child(odd){ background:#f5e3e3; } /* soft pink zebra */
#fusion-venues .table-venues caption{
  caption-side: top; text-align: center; font-weight: 600; margin-bottom: .5rem;
}

/* ===== Geometric bullets system ===== */
#fusion-venues .table-venues td{
  position: relative; padding-left: 1.5rem;
  --geom:"\25A0";      /* default: ■ */
  --geom-color:#6c757d;
  --geom-size:.9rem; --geom-left:.5rem; --geom-top:.72em;
}
#fusion-venues .table-venues td::before{
  content: var(--geom); position: absolute; left: var(--geom-left); top: var(--geom-top);
  color: var(--geom-color); opacity: .9; font-size: var(--geom-size); line-height: 1;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* Automatic variety by row/column */
#fusion-venues .table-venues tbody tr:nth-child(odd)  td:nth-child(1){ --geom:"\25A3"; } /* ▣ */
#fusion-venues .table-venues tbody tr:nth-child(odd)  td:nth-child(2){ --geom:"\25E7"; } /* ◧ */
#fusion-venues .table-venues tbody tr:nth-child(odd)  td:nth-child(3){ --geom:"\25E9"; } /* ◩ */
#fusion-venues .table-venues tbody tr:nth-child(even) td:nth-child(1){ --geom:"\25C8"; } /* ◈ */
#fusion-venues .table-venues tbody tr:nth-child(even) td:nth-child(2){ --geom:"\25C9"; } /* ◉ */
#fusion-venues .table-venues tbody tr:nth-child(even) td:nth-child(3){ --geom:"\25C7"; } /* ◇ */

/* Shape utilities */
#fusion-venues .geom-sq        { --geom:"\25A0"; } /* ■ */
#fusion-venues .geom-sq-o      { --geom:"\25A1"; } /* □ */
#fusion-venues .geom-sq-inset  { --geom:"\25A3"; } /* ▣ */
#fusion-venues .geom-sq-s      { --geom:"\25AA"; } /* ▪ */
#fusion-venues .geom-sq-s-o    { --geom:"\25AB"; } /* ▫ */
#fusion-venues .geom-sq-large  { --geom:"\25FB"; } /* ◻ */
#fusion-venues .geom-sq-large-o{ --geom:"\25FD"; } /* ◽ */

#fusion-venues .geom-diam      { --geom:"\25C6"; } /* ◆ */
#fusion-venues .geom-diam-o    { --geom:"\25C7"; } /* ◇ */
#fusion-venues .geom-diam-star { --geom:"\25C8"; } /* ◈ */
#fusion-venues .geom-lozenge   { --geom:"\25CA"; } /* ◊ */

#fusion-venues .geom-circle      { --geom:"\25CF"; } /* ● */
#fusion-venues .geom-circle-o    { --geom:"\25CB"; } /* ○ */
#fusion-venues .geom-circle-dot  { --geom:"\25C9"; } /* ◉ */
#fusion-venues .geom-circle-bull { --geom:"\25CE"; } /* ◎ */
#fusion-venues .geom-circle-big  { --geom:"\25EF"; } /* ◯ */
#fusion-venues .geom-circle-dots { --geom:"\25CC"; } /* ◌ */

#fusion-venues .geom-tri-up     { --geom:"\25B2"; } /* ▲ */
#fusion-venues .geom-tri-up-o   { --geom:"\25B3"; } /* △ */
#fusion-venues .geom-tri-right  { --geom:"\25B6"; } /* ▶ */
#fusion-venues .geom-tri-left   { --geom:"\25C0"; } /* ◀ */
#fusion-venues .geom-tri-down   { --geom:"\25BC"; } /* ▼ */
#fusion-venues .geom-tri-down-o { --geom:"\25BD"; } /* ▽ */

#fusion-venues .geom-hex        { --geom:"\2B22"; } /* ⬢ */
#fusion-venues .geom-hex-o      { --geom:"\2B21"; } /* ⬡ */

#fusion-venues .geom-star       { --geom:"\2605"; } /* ★ */
#fusion-venues .geom-star-o     { --geom:"\2606"; } /* ☆ */
#fusion-venues .geom-star-spark { --geom:"\2726"; } /* ✦ */
#fusion-venues .geom-star-holo  { --geom:"\2727"; } /* ✧ */

#fusion-venues .geom-sm      { --geom-size:.8rem; }
#fusion-venues .geom-lg      { --geom-size:1.05rem; }
#fusion-venues .geom-muted   { --geom-color:#6c757d; }
#fusion-venues .geom-primary { --geom-color:var(--bs-primary, #0d6efd); }
#fusion-venues .geom-danger  { --geom-color:var(--bs-danger,  #dc3545); }
#fusion-venues .geom-success { --geom-color:var(--bs-success, #198754); }

/* Slightly tighter padding on tiny phones */
@media (max-width: 576px){
  #fusion-venues .table-venues th,
  #fusion-venues .table-venues td { padding: 8px .5rem; }
}

/* Mobile: let the icon sit inline so it never overlaps */
@media (max-width: 576px) {
  #fusion-venues .table-venues td {
    padding-left: .25rem;              /* remove the big left indent */
    line-height: 1.35;                  /* a touch more breathing room */
  }
  #fusion-venues .table-venues td::before {
    position: static;                   /* <-- not absolute anymore */
    display: inline-block;
    width: 1.1em;                       /* tiny "column" for the icon */
    margin-right: .35em;
    font-size: .9rem;                   /* slightly smaller on mobile */
    transform: translateY(.05em);       /* baseline nudge (optional) */
  }
}

/* Make embeds fill their ratio box */
.ratio > iframe { width: 100%; height: 100%; border: 0; }

/* Equalize the visual height of both cards */
.equal-embed .ratio { min-height: 360px; }   /* tweak to taste */
@media (min-width: 992px) {
  .equal-embed .ratio { min-height: 400px; }
}

.equal-embed .ratio iframe { width:100%; height:100%; display:block; }

.text-bg-maroon {
  /* Common Maroon HTML Color */
  background-color: #800000 !important;
  /* Ensures the text is white for readability */
  color: #ffffff;
}

/* Epic Stories table caption as header */
#epic-stories > caption{
  caption-side: top;         /* ensure it stays on top */
  background: #fff;
  padding: .75rem 1rem;
  margin-bottom: 0;          /* we add a border instead of spacing */
  border-bottom: 1px solid #dee2e6;
  font-weight: 600;
  text-align: center;
}
/* Keep the table readable; allow horizontal scroll on small screens */
#epic-stories { min-width: 720px; }           /* or 768px if you prefer */
.table-responsive { -webkit-overflow-scrolling: touch; }

/* ----- Mobile card layout for Epic Stories table ----- */
@media (max-width: 576px) {
  /* Turn the table into a vertical list */
  #epic-stories {
    display: block;
    border-collapse: separate;
    border-spacing: 0;
  }
  #epic-stories thead {
    display: none; /* hide the header row on mobile */
  }
  #epic-stories tbody {
    display: block;
  }

  /* Each row becomes a card */
  #epic-stories tbody tr {
    display: block;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.05);
    margin: .75rem 0;
    overflow: hidden;
  }

  /* Cells stack; add padding and label */
  #epic-stories tbody th[scope="row"],
  #epic-stories tbody td {
    display: grid;
    grid-template-columns: 10ch 1fr; /* label | value */
    gap: .75rem;
    padding: .75rem .9rem;
    border: 0; /* kill table borders */
  }

 /* ---------- Epic Stories: mobile card layout (≤576px) ---------- */
@media (max-width: 576px) {
  /* Let the table shrink; avoid horizontal overflow */
  #epic-stories { min-width: 0; width: 100%; display: block; }
  .table-responsive { overflow: visible; } /* no sideways scroll needed */

  /* Hide header row on mobile */
  #epic-stories thead { display: none; }

  /* Each row becomes a card */
  #epic-stories tbody { display: block; }
  #epic-stories tbody tr {
    display: block;
    margin: .75rem 0;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.05);
    overflow: hidden;
  }

  /* Stack cells vertically */
  #epic-stories tbody th[scope="row"],
  #epic-stories tbody td {
    display: block;
    padding: .75rem 1rem;
    border: 0;
  }

  /* Row title as card header */
  #epic-stories tbody th[scope="row"] {
    background: #f8f9fa;
    font-weight: 700;
  }

  /* Inject column labels above each value */
  #epic-stories tbody td:nth-child(2)::before {
    content: "Brief Description";
    display: block;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: .25rem;
  }
  #epic-stories tbody td:nth-child(3)::before {
    content: "The Impact for Your Audience";
    display: block;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: .25rem;
  }


} 

/* --- Mobile Caption Fix (Insert inside the @media (max-width: 576px) block) --- */
  #epic-stories > caption {
    /* Critical Overrides for Mobile-Only */
    display: block !important;
    width: 100% !important; 
    min-width: 100% !important;
    box-sizing: border-box !important;
    position: static !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: normal !important;
    
    /* Existing Mobile Styles to make it look like a header */
    background: #fff;
    border-bottom: 1px solid #dee2e6;
    padding: .6rem .75rem;
    margin-bottom: 0;
    font-weight: 600;
    text-align: center;
  }
 
}

/* Let the table breathe to the edges of the card on phones */
@media (max-width: 575.98px) {
  .card .table-responsive {
    margin-left: -0.75rem;   /* pull to card edges */
    margin-right: -0.75rem;
  }
}
@media (min-width: 576px) {
  .card .table-responsive {
    margin-left: 0;
    margin-right: 0;
  }
}
/* Caption stays on top and reads comfortably (GLOBAL/DESKTOP STYLES) */
#epic-stories > caption {
  caption-side: top;
  background: #fff;
  padding: .65rem .75rem;
  margin-bottom: 0;
  border-bottom: 1px solid #dee2e6;
  font-weight: 600;
  text-align: center;
  white-space: normal;
  word-break: normal;
}

/* Table caption styling */
#epic-stories > caption.epic-caption{
  caption-side: top;
  background:#fff;
  padding:.75rem 1rem;
  margin-bottom:0;
  border-bottom:1px solid #dee2e6;
  font-weight:600;
  text-align:center;
  text-wrap: balance;            /* nicer wrapping on small screens */
}

/* Optional: trim gutters on phones so it doesn’t look over-inset */
@media (max-width: 576px){
  .container-xxl.px-3{           /* adjust if your wrapper uses a different class */
    padding-left:.75rem !important;
    padding-right:.75rem !important;
  }
}

/* Recharge intro refinements */
#recharge-intro .stat-chip{
  display:inline-block;
  border:1px solid #e5e7eb;
  background:#fff;
  padding:.35rem .6rem;
  border-radius:999px;
  font-size:.875rem;
  line-height:1.2;
  white-space:nowrap;
}
@media (max-width: 575.98px){
  #recharge-intro header h2 { font-size:1.15rem; }
  #recharge-intro .stat-chip { font-size:.82rem; }
}
/* Recharge intro refinements */
#recharge-intro .stat-chip{
  display:inline-block;
  border:1px solid #e5e7eb;
  background:#fff;
  padding:.35rem .6rem;
  border-radius:999px;
  font-size:.875rem;
  line-height:1.2;
  white-space:nowrap;
}
@media (max-width: 575.98px){
  #recharge-intro header h2 { font-size:1.15rem; }
  #recharge-intro .stat-chip { font-size:.82rem; }
}
/* Strong, consistent card outline */
.outlined {
  border: 1.5px solid #d9dee5 !important; /* tweak color to taste */
  border-radius: .75rem !important;
}
@media (prefers-color-scheme: dark){
  .outlined { border-color: rgba(255,255,255,.22) !important; }
}
/* Put this in fusion-bands.css */
#masters-quotes,
#q-jasraj, #q-louis-banks, #q-vm-bhatt, #q-sivamani {
  scroll-margin-top: 90px; /* tweak if your header is taller/shorter */
}
/* Recharge audio cards — tighten caption spacing */
#recharge-audio .card-body {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

/* Optional: reduce white gap under each card a touch */
#recharge-audio .card {
  margin-bottom: .5rem;
}
@media (min-width: 992px) {
  #recharge-audio .ratio.ratio-4x3 {
    --bs-aspect-ratio: 85%; /* slightly taller than 4:3 */
  }
}
/* Rounded corners like your other embeds */
.spotify-embed { border-radius: 12px; }

/* Tighten caption spacing under each card */
#recharge-audio .card-body { padding-top: .5rem; padding-bottom: .5rem; }

/* Keep the floating button above other UI */
#onThisPage,
button[data-bs-target="#onThisPage"] { z-index: 1035; }

/* “On this page” minor polish (optional) */
#onThisPage .list-group-item {
  padding: .5rem .75rem;
  border: 0;
}
#onThisPage .list-group-item.active,
#onThisPage .nav-link.active {
  font-weight: 600;
  text-decoration: underline;
}

/* Prevent anchor headings from hiding under the fixed header */
:target {
  scroll-margin-top: 80px; /* ~ fixed header height */
}



/* Match site’s light-grey for the “On this page” inline TOC */
.on-this-page,
.on-this-page a {
  color: #6c757d !important;        /* Bootstrap's text-muted tone */
}

.on-this-page a {
  text-decoration: none;
}

.on-this-page a:hover,
.on-this-page a:focus {
  color: #495057 !important;        /* slightly darker on hover/focus */
  text-decoration: underline;
}

.on-this-page .sep {
  color: #adb5bd;                    /* softer dot separator */
  margin: 0 .4rem;
}
/* On this page — band headings in red/bold */
#onThisPage .band-link {
  color: var(--bs-danger);
  font-weight: 700;
  text-decoration: none;
}
#onThisPage .band-link:hover,
#onThisPage .band-link:focus {
  color: #a71d2a; /* darker red on hover */
  text-decoration: underline;
}

/* On this page — red divider between bands */
#onThisPage .toc-divider {
  border: 0;
  border-top: 2px solid var(--bs-danger);
  opacity: 1;
  margin: .5rem 0 1rem;
}

/* Keep sub-links grey (match your site) */
#onThisPage .link-secondary {
  color: #6c757d;
}
#onThisPage .link-secondary:hover,
#onThisPage .link-secondary:focus {
  color: #5a6268;
}
/* Red pipe between pills (desktop and up) */
@media (min-width: 576px) {
  #band-pills .nav-item + .nav-item {
    position: relative;
    margin-left: .75rem;
  }
  #band-pills .nav-item + .nav-item::before {
    content: "|";
    color: var(--bs-danger);
    position: absolute;
    left: -.55rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
  }
}
/* Make pill text a tad bolder */
#band-pills .nav-link { font-weight: 600; }
/* Remove stray red separators between the 3 pills */
#band-pills .nav-item::before,
#band-pills .nav-item + .nav-item::before {
  content: none !important;
  display: none !important;
  margin: 0 !important;
}