/**
 * pathways-image-title-text
 *
 * Styles for the component that has an image, a title, and some text.
 * This is used in several other places such as the 'must read' section
 * on the home page, and in the slider on the home page.
 * We default the images to being 220px high, but other
 * patterns/components that use this may override that.
 */
.pathways-image-title-text p,
.pathways-image-title-text p a {
    font-size: 0.98em;
    font-weight: 600;
    color: var(--color-ubc-primary, #002145);
    margin-top: 0.75em;
    line-height: 1.5rem;
    margin-bottom: 1em;
    text-decoration: none;
}

.pathways-image-title-text p a:hover {
    text-decoration: underline;
}

html body .pathways-image-title-text .wp-block-image img {
    object-fit: cover;
    /* height: 220px; */
    width: 100%;
    object-position: 50% 20%;
}

/**
 * pathways-never-miss-an-issue
 *
 * Mostly it's correct it's just the narrow line under the title
 * needs a little extra room. The divider needs more room too.
 */
.never-miss-an-issue .is-style-pathways-narrow-line-under {
    margin-bottom: 1.8em;
}

 .never-miss-an-issue .is-style-pathways-narrow-line-under::after {
    bottom: -22px;
}

html body div.never-miss-an-issue hr.is-style-pathways-wide-tertiary {
    margin-bottom: 3.5em;
    background-color: #C3D0DB;
}

/**
 * pathways-related-stories
 *
 * Mostly fine just need to tweak the spacing around the paragraph text
 * and the link should only be underlined on hover
 */
html body .wp-block-group.related-stories p {
    margin-top: 1.3em;
}

html body .wp-block-group.related-stories p a {
    text-decoration: none;
}

html body .wp-block-group.related-stories p:hover {
    text-decoration: underline;
}

html body .wp-block-group.related-stories .wp-block-image img {
    object-fit: cover;
    height: 249px;
    width: 100%;
    object-position: 50% 20%;
}

/**
 * Featured Header
 */
html body .opinion-header,
html body.wp-admin .is-root-container .wp-block-group.opinion-header {
    max-width: var(--size-max-container-width) !important; /* Gutenberg adds an !important because whynot */
    margin: 0 auto;
}

html body .opinion-header .opinion-lede {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

html body .opinion-header .opinion-lede p.is-style-pathways-narrow-line-under {
    font-size: 1em;
    font-weight: 600;
    letter-spacing: 3px;
    line-height: 3rem;
    margin-bottom: 1em;
}

html body .opinion-header .opinion-lede h1 {
    font-size: 2em;
    letter-spacing: 2px;
    margin-bottom: 0.3em;
}

html body .opinion-header .opinion-lede h1+p {
    margin-top: 1em;
    line-height: 1.65em;
    font-size: 16px;
    font-weight: 400;
}