.podcast-host,
.podcast-panelist {
    border: solid 1px black;
    padding: 10px;
    height: 75px;
    width: 300px;
    background-color: #efefef;
    margin: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.podcast-host a,
.podcast-panelist a {
    text-decoration: underline;
}

.podcast-panelist {
    float: left;
    background-color: #71CABC;
    width: 235px;
    margin-right: 5px;
}

.podcast-host img,
.podcast-panelist img {
    border-radius: 50px;
    float: left;
    margin-right: 8px;
    height: 50px !important;
    width: 50px !important;
}

.podcast-host .wp-block-image,
.podcast-panelist .wp-block-image {
    margin: 0 !important;
    padding: 0;
    float: left;
    line-height: 0;
}

.podcast-host .wp-block-image img,
.podcast-panelist .wp-block-image img {
    float: none;
    display: block;
}

.podcast-host .host,
.podcast-panelist .table,
.podcast-host p.host {
    font-size: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.podcast-host .provider,
.podcast-panelist .provider,
.podcast-host p.provider {
    font-size: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.podcast-host .connect,
.podcast-panelist .connect {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
}

.podcast-host .connect svg,
.podcast-panelist .connect svg {
    vertical-align: middle;
    width: 14px;
    height: 14px;
}

.podcast-host .connect a,
.podcast-panelist .connect a {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.podcast_meta p {
    margin-bottom: 0px;
}

/*
 * Block-pattern cards.
 *
 * The .podcast-host / .podcast-panelist rules above are float-based and stay put
 * for pages still running the original raw HTML. The block patterns use these
 * flex-based rules instead: floats fight the block editor's wrappers, and the
 * .table class collides with Bootstrap (loaded site-wide via header.php), which
 * forces width:100% on that line.
 */
/*
 * inline-flex (not flex) so several standalone cards inserted one after
 * another sit side by side and wrap onto new rows on their own — no shared
 * wrapping container needed. This also sidesteps the block editor's
 * auto-centering for stand-alone top-level blocks: auto margins have no
 * effect on inline-level boxes, so the card naturally stays put at its
 * inline flow position instead of jumping to the canvas center.
 */
.ptt-card {
    display: inline-flex;
    vertical-align: top;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    width: 300px;
    max-width: 100%;
    min-height: 75px;
    margin: 10px 10px 10px 0;
    padding: 10px;
    border: solid 1px black;
    background-color: #efefef;
}

/*
 * Storefront ships no theme.json, so core wraps group children in an extra
 * .wp-block-group__inner-container. Without this the card's flex row has a
 * single child (the wrapper) and the avatar stacks above the text.
 * Block themes and the editor render without the wrapper, so both are covered.
 */
.ptt-card > .wp-block-group__inner-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.ptt-card--panelist {
    width: 235px;
    background-color: #71CABC;
}

.ptt-card .wp-block-image {
    flex: 0 0 50px;
    margin: 0 !important;
    padding: 0;
    line-height: 0;
}

.ptt-card img {
    display: block;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    object-fit: cover;
}

.ptt-card__body {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
}

.ptt-card__label,
.ptt-card__name,
.ptt-card__links {
    margin: 0 !important;
    padding: 0 !important;
}

.ptt-card__label {
    font-size: 10px !important;
    line-height: 1.2 !important;
}

.ptt-card__name {
    font-size: 20px !important;
    line-height: 1.2 !important;
}

/* Links row: social icons + a text CTA on one line. */
.ptt-card__links,
.ptt-card__links > .wp-block-group__inner-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.ptt-card__links {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin-top: 2px !important;
}

.ptt-card__cta {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ptt-card__cta a {
    text-decoration: underline;
}

/* Core social icons, shrunk to sit inline with the CTA text. */
.ptt-card__social {
    margin: 0 !important;
    padding: 0 !important;
    gap: 6px !important;
}

.ptt-card__social .wp-social-link {
    margin: 0 !important;
    padding: 0 !important;
    /* Monochrome instead of each network's brand color. Core sets that color
       on this element (e.g. .wp-social-link-facebook), so it has to be
       overridden here, not on the anchor — "currentColor" on the anchor
       would just re-inherit the same brand color from this element. */
    color: inherit !important;
}

.ptt-card__social .wp-social-link a {
    padding: 0 !important;
    line-height: 0;
}

.ptt-card__social svg {
    width: 16px !important;
    height: 16px !important;
}

/* No editor-only override needed: .ptt-card is inline-flex, and auto margins
   have no effect on inline-level boxes, so the editor's stand-alone-block
   auto-centering never engages here on either side of the block-gap. */