/* ==================================================================
   BLOG-RESP F — final tablet + phone treatment
     Phone (≤600px):    accordion trigger (from A) + card posts (from C)
     Tablet (601–960):  card posts + single-line category chips
                        + drop "Showing X of Y" counter
                        + "Browse by tag" inline at start of popular row
                        + accordion toggle at the end of the same line
   ================================================================== */


/* ============================================================
   PHONE — accordion (A) + card-style posts (C)
   ============================================================ */
@media (max-width: 600px) {
  /* ----- A — injected trigger styling ----- */
  .mfs-rA-trigger {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    height: 52px;
    padding: 0 20px;
    background: #fff;
    border: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-sans); font-size: 14px; font-weight: 600;
    color: var(--navy-900);
    cursor: pointer;
    position: sticky; top: calc(var(--header-height) + env(safe-area-inset-top, 0px)); z-index: 5;
  }
  .mfs-rA-trigger svg { color: var(--navy-700); }
  .mfs-rA-trigger-label { flex: 1; text-align: left; }
  .mfs-rA-trigger-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--brand-burgundy); color: #fff;
    font-size: 11.5px; font-weight: 600;
    line-height: 1;
  }
  .mfs-rA-trigger-count[hidden] { display: none; }
  .mfs-rA-trigger-chevron {
    display: inline-flex; align-items: center;
    transition: transform .2s var(--ease-out);
    color: var(--navy-500);
  }
  body.mfs-rA-open .mfs-rA-trigger-chevron { transform: rotate(180deg); }

  /* ----- A — collapse both filter regions by default ----- */
  .mfs-bi-filterbar {
    position: static !important;
    border-bottom: 0;
    overflow: hidden;
    max-height: 0;
    padding: 0;
    transition: max-height .25s var(--ease-out), padding .2s ease;
  }
  .mfs-tc-v2 {
    overflow: hidden;
    max-height: 0;
    padding: 0;
    border-bottom: 0;
    transition: max-height .25s var(--ease-out), padding .2s ease;
  }
  body.mfs-rA-open .mfs-bi-filterbar {
    max-height: 240px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
  }
  body.mfs-rA-open .mfs-tc-v2 {
    max-height: 800px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
  }

  /* ----- C — card-style posts ----- */
  .mfs-tc-v2-page main { padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px)); }
  .mfs-bi-timeline { padding: 20px 0 60px; }

  .mfs-bi-year-row {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 24px 0 8px;
    border-top: 0;
  }
  .mfs-bi-year-row + .mfs-bi-year-row {
    border-top: 1px solid var(--border);
    margin-top: 16px;
  }
  .mfs-bi-year-col {
    position: static;
    display: flex; align-items: baseline; gap: 14px;
    padding: 0 4px 16px;
  }
  .mfs-bi-year { font-size: 36px; letter-spacing: -.02em; }
  .mfs-bi-year-count { margin-top: 0; font-size: 13px; }

  .mfs-bi-year-list { gap: 12px; display: flex; flex-direction: column; }
  .mfs-bi-item + .mfs-bi-item .mfs-bi-item-link { border-top: 0; }

  .mfs-bi-item-link {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s var(--ease-out), border-color .15s ease;
  }
  .mfs-bi-item-link:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--navy-300);
    padding-left: 16px;
  }
  .mfs-bi-item-date  { order: 1; flex: 0 0 auto; font-size: 12.5px; }
  .mfs-bi-chip       { order: 2; flex: 0 0 auto; }
  .mfs-bi-item-star  { order: 3; position: static; margin-left: auto; top: auto; left: auto; }
  .mfs-bi-item-title { order: 4; flex: 1 1 100%; font-size: 16px; font-weight: 600; line-height: 1.35; }

  .mfs-bi-item[data-featured] .mfs-bi-item-link {
    border-color: var(--brand-burgundy-tint);
    background: linear-gradient(180deg, #fff 0, #fffaf9 100%);
  }
}


/* ============================================================
   TABLET — single-line categories + inline "Browse by tag"
            + accordion toggle at the end of the popular row
            + card-style posts
   ============================================================ */
@media (min-width: 601px) and (max-width: 960px) {
  /* ----- Filter bar: scrollable chips on tablet ----- */
  .mfs-bi-chips {
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1 1 auto;
    min-width: 0;
  }
  .mfs-bi-chips::-webkit-scrollbar { display: none; }
  /* dots add width without benefit when chips scroll — hide them */
  .mfs-bi-chipbtn .mfs-bi-chip-dot { display: none; }
  /* result count not needed; chips scroll so it doesn't indicate space pressure */
  .mfs-bi-resultcount { display: none; }
  /* no room for separator or Featured label on tablet */
  .mfs-bi-chipbtn--featured::before { display: none; }
  .mfs-bi-chipbtn--featured { margin-left: 0; }

  /* ----- Tag section header rework ----- */
  /* Hide the standalone "Browse by tag" header — it moves inline. */
  .mfs-tc-v2 .mfs-tc-toggle { display: none; }

  /* Always show popular row, even when expanded — it becomes the
     permanent header for the tag section. */
  .mfs-tc-v2.is-expanded .mfs-tc-popular-row { display: grid !important; }

  /* Popular row layout: tags | toggle (label hidden) */
  .mfs-tc-v2 .mfs-tc-popular-row {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 18px;
  }

  .mfs-tc-v2 .mfs-tc-popular-row .mfs-tc-row-label { display: none; }

  /* Accordion toggle — moved into the popular row by F.js, displayed inline. */
  .mfs-tc-v2 .mfs-tc-floating-chevron {
    display: inline-flex !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    flex-shrink: 0;
  }

  /* Tighten sticky-band stuck-state behavior. */
  .mfs-tc-v2 .mfs-tc-sticky-band.is-stuck .mfs-tc-row { padding-right: 0 !important; }

  /* ----- Card-style posts on tablet ----- */
  .mfs-bi-year-row {
    grid-template-columns: 140px 1fr;
    gap: 32px;
    padding: 28px 0;
  }
  .mfs-bi-year-col { position: sticky; top: 130px; }
  .mfs-bi-year { font-size: 48px; }

  .mfs-bi-year-list { gap: 12px; display: flex; flex-direction: column; }
  .mfs-bi-item + .mfs-bi-item .mfs-bi-item-link { border-top: 0; }

  .mfs-bi-item-link {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 10px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s var(--ease-out), border-color .15s ease;
    grid-template-columns: none;  /* defeat desktop grid */
  }
  .mfs-bi-item-link:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--navy-300);
    padding-left: 18px;  /* defeat the +6px slide */
  }
  .mfs-bi-item-date  { order: 1; flex: 0 0 auto; font-size: 13px; }
  .mfs-bi-chip       { order: 2; flex: 0 0 auto; }
  .mfs-bi-item-star  { order: 3; position: static; margin-left: auto; top: auto; left: auto; }
  .mfs-bi-item-title { order: 4; flex: 1 1 100%; font-size: 17px; font-weight: 600; line-height: 1.35; }

  .mfs-bi-item[data-featured] .mfs-bi-item-link {
    border-color: var(--brand-burgundy-tint);
    background: linear-gradient(180deg, #fff 0, #fffaf9 100%);
  }
}