.yg3-afterhub { margin-top: var(--gap, 24px); }

/* section chrome (desktop) */
.yg3-afterhub__section {
  border: 1px solid rgba(17,24,39,0.12);
  border-radius: var(--card-radius, 12px);
  background: #fff;
  margin-bottom: calc(var(--gap, 24px) * 1);
  overflow: hidden;
}

/* header acts as accordion trigger on mobile */
.yg3-afterhub__toggle {
  width: 100%; text-align: left; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: transparent; border: 0; cursor: pointer;
}
.yg3-afterhub__label { font-weight: 600; }
.yg3-afterhub__chev::before { content: '▾'; display:inline-block; margin-left:auto; transition: transform .2s ease; }
.yg3-afterhub__toggle[aria-expanded="true"] .yg3-afterhub__chev::before { transform: rotate(180deg); }

.yg3-afterhub__body { padding: 12px 14px; }

/* Icons */
.yg3-ah-icon { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }

/* Visibility rules */
.yg3-afterhub__section.show-desktop { display: block; }
.yg3-afterhub__section.show-mobile { display: block; }

/* Mobile: show as accordion, hide body by default */
@media (max-width: 768px){
  .yg3-afterhub__section.show-desktop:not(.show-mobile){ display:none; }
  .yg3-afterhub__body { display:none; }
  .yg3-afterhub__toggle[aria-expanded="true"] + .yg3-afterhub__body { display:block; }
}

/* Desktop: no accordion feel (always expanded) */
@media (min-width: 769px){
  .yg3-afterhub__section.show-mobile:not(.show-desktop){ display:none; }
  .yg3-afterhub__chev { display:none; }
  .yg3-afterhub__body { display:block; }
}
.yg3-ah-link { display:inline-block; padding:8px 12px; border-radius:8px; border:1px solid rgba(17,24,39,.12); text-decoration:none; }
/* section chrome (desktop) */
.yg3-afterhub__section {
  border: 1px solid rgba(17,24,39,0.12);
  border-radius: var(--card-radius, 12px);
  background: #fff;
  margin-bottom: calc(var(--gap, 24px) * 1);
  overflow: hidden;
}

/* Header line uses your default h1–h6 rules via <h3> */
.yg3-afterhub__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}
.yg3-afterhub__title { /* let global h1–h6 carry weight/margins; just reset local */
  margin: 0; /* your global h1–h6 margins are fine; zero here to avoid double spacing in header */
  font: inherit;
  font-weight: 600;
}

/* Chevron */
.yg3-afterhub__chev {
  margin-left: auto;
}
.yg3-afterhub__chev::before {
  content: '▾';
  display: inline-block;
  transition: transform .2s ease;
}

/* Content */
.yg3-afterhub__body { padding: 12px 14px; }

/* Icons */
.yg3-ah-icon { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }

/* Visibility rules */
.yg3-afterhub__section.show-desktop { display: block; }
.yg3-afterhub__section.show-mobile { display: block; }

/* Mobile: accordion behavior */
@media (max-width: 768px){
  .yg3-afterhub__section.show-desktop:not(.show-mobile){ display:none; }
  .yg3-afterhub__body { display:none; }
  .yg3-afterhub__section.is-open .yg3-afterhub__body { display:block; }
  .yg3-afterhub__section.is-open .yg3-afterhub__chev::before { transform: rotate(180deg); }
  .yg3-afterhub__header { cursor: pointer; } /* tap target on mobile */
}

/* Desktop: always expanded, no chevron spin */
@media (min-width: 769px){
  .yg3-afterhub__section.show-mobile:not(.show-desktop){ display:none; }
  .yg3-afterhub__body { display:block; }
  /* chevron can stay visible; remove if you prefer: */
  /* .yg3-afterhub__chev { display:none; } */
}
.yg3-ah-link { display:inline-block; padding:8px 12px; border-radius:8px; border:1px solid rgba(17,24,39,.12); text-decoration:none; }

/* Align heading with grid on desktop (account for icon + gap) */
@media (min-width: 769px){
  .yg3-afterhub { --ah-icon: 28px; --ah-gap: 10px; }

  /* Only apply if an icon exists before the title */
  .yg3-afterhub__header .yg3-ah-icon + .yg3-afterhub__title {
    margin-left: calc(-1 * (var(--ah-icon) + var(--ah-gap)));
  }
}

/* Ensure After-Hub headings inherit site h1–h6 sizing */
.yg3-afterhub__title { font-size: inherit; }

/* Mobile spacing: remove the extra gap above the first After-Hub section */
@media (max-width: 768px){
  /* If your Hub wrapper has a class, you can be even more specific: .hub + .yg3-afterhub … */
  .yg3-afterhub .yg3-afterhub__section:first-child {
    margin-top: 0;
  }
  /* Slightly reduce per-section gap if needed */
  .yg3-afterhub__section { margin-bottom: 14px; }
}

@media (max-width: 768px){
  .yg3-hub + .yg3-afterhub .yg3-afterhub__section:first-child { margin-top: 0; }
}