/* =============================================
   DESKTOP VARIABLES
   ============================================= */
:root {
  --body-width: 700px;      /* max width of all content (text, images, etc.) */
  --gap-sm: 15px;           /* small gap - space between paragraphs, lists, inline elements */
  --gap-lg: 45px;           /* large gap - space before headings, blockquotes, buttons */
  --media-gap: 40px;        /* space above and below images and embeds */
  --btn-gap-top: 40px;      /* space above button blocks */
  --btn-gap-bottom: var(--gap-lg); /* space below button blocks */
  --font-h2: 3rem;
  --font-h3: 2.7rem;
  --font-h4: 2.4rem;
  --font-p:  1.7rem;
  --color-link:        #000;
  --color-link-hover: #e60026;
  --color-btn-bg:      #000;
  --color-btn-text:    #fff;
}

/* =============================================
   MOBILE VARIABLES (max-width: 478px)
   ============================================= */
@media (max-width: 478px) {
  :root {
    --body-width: 90%;
    --gap-sm: 20px;
    --media-gap: 25px; /* images + imbeds */
    --font-h2: 2.5rem;
    --font-h3: 2.2rem;
    --font-h4: 2rem;
    --font-p:  1.6rem;
  }
}

/* =============================================
   LAYOUT
   ============================================= */
.brxe-post-content h2,
.brxe-post-content h3,
.brxe-post-content h4,
.brxe-post-content p,
.brxe-post-content ul,
.brxe-post-content ol,
.brxe-post-content .wp-block-buttons {
  width: var(--body-width);
  max-width: 100%;
  margin: var(--gap-sm) auto;
}

/* =============================================
   HEADINGS
   ============================================= */
.brxe-post-content h2 { font-size: var(--font-h2); margin-top: var(--gap-lg) !important; }
.brxe-post-content h3 { font-size: var(--font-h3); margin-top: var(--gap-lg) !important; }
.brxe-post-content h4 { font-size: var(--font-h4); margin-top: var(--gap-lg) !important; }
.brxe-post-content p  { font-size: var(--font-p); }

/* =============================================
   LINKS
   ============================================= */
.brxe-post-content a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-link);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.3s ease;
}
.brxe-post-content a:hover {
  text-decoration-color: var(--color-link-hover);
}

/* =============================================
   BLOCKQUOTES
   ============================================= */
.brxe-post-content .wp-block-quote {
  width: var(--body-width);
  max-width: 100%;
  margin: var(--gap-lg) auto;
  padding-left: 20px;
  border-left: 3px solid #e60026;
  box-sizing: border-box;
}

/* =============================================
   IMAGES & FIGURES
   ============================================= */
.brxe-post-content figure:not(.wp-block-gallery figure):not(.wp-block-embed),
figure.wp-block-image,
figure.aligncenter.size-full.is-resized,
.wp-block-image figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: var(--media-gap) auto !important;
  position: relative;
  overflow: hidden;
}

.wp-block-image.alignright.size-full {
  margin-top: -15px !important;
  margin-bottom: -5px !important;
}
.wp-block-image:not(.wp-block-columns .wp-block-image) img {
  object-fit: cover;
  width: 100%;
}

/* =============================================
   CAPTIONS
   ============================================= */

/* Featured Image Captions (White overlay text) */
:where(.brxe-image) .bricks-image-caption {
  text-transform: uppercase;
  font-size: 11px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #fff;
  padding: 10px 15px;
  text-align: center;
  box-sizing: border-box;
  margin: 0 !important;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.7);
}

/* Body Content Captions (Default style beneath image) */
.brxe-post-content .wp-element-caption {
  position: static;
  width: 100%;
  color: #666666;
  padding: 10px 0 0 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  box-sizing: border-box;
  margin: 0 !important;
}

.brxe-post-content figure.wp-block-image {
  margin-bottom: var(--media-gap) !important;
}

/* =============================================
   GALLERY
   ============================================= */
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
  width: 100% !important;
}

/* =============================================
   EMBEDS (YouTube, Instagram, Twitter)
   ============================================= */
.brxe-post-content .wp-block-embed {
  margin: var(--media-gap) auto;
}
.wp-block-embed__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.brxe-post-content .instagram-media {
  display: block !important;
  margin: 25px auto !important;
}
.wp-block-embed__wrapper .twitter-tweet {
  margin: 0 !important;
}

/* =============================================
   BUTTONS
   ============================================= */
.brxe-post-content .wp-block-buttons {
  margin: var(--btn-gap-top) auto var(--btn-gap-bottom);
}

.brxe-post-content .wp-block-buttons a.wp-block-button__link {
  background-color: var(--color-btn-bg) !important;
  color: var(--color-btn-text) !important;
  border: 1px solid var(--color-btn-bg) !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition: color 0.3s ease, background-color 0.3s ease !important;
}

.brxe-post-content .wp-block-buttons a.wp-block-button__link:hover {
  background-color: transparent !important;
  color: var(--color-btn-bg) !important;
}

/* =============================================
   SIDE BY SIDE IMAGES - Tablet (max-width: 980px)
   ============================================= */
@media (max-width: 980px) {
  :where(.wp-block-columns.is-layout-flex) { gap: 0 !important; }
  .wp-block-column.is-layout-flow {
    margin-top: -15px !important;
    margin-bottom: -15px !important;
  }
}

.wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-9d6595d7 {
  max-width: 800px;
  margin: 0 auto;
  margin-bottom: -15px;
}


/* =============================================
   RELATED POSTS / READ MORE CARDS
   Overlays the category + title on the bottom-left of each
   thumbnail, over a gradient. Targets the .brxe-related-posts
   class (not the element ID) so it works on every template,
   since the Bricks ID changes per page. Title styled by tag
   (h4) not field-id for the same reason.
   ============================================= */
:where(.brxe-related-posts) .related-posts img {
  object-position: top !important;
}

body .brxe-related-posts ul.related-posts {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body .brxe-related-posts li.repeater-item {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
}

body .brxe-related-posts li.repeater-item > figure {
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    width: 100% !important;
    display: block !important;
    line-height: 0 !important;
}

body .brxe-related-posts li.repeater-item > figure > a {
    display: block !important;
    width: 100% !important;
    line-height: 0 !important;
}

body .brxe-related-posts li.repeater-item > figure img,
body .brxe-related-posts li.repeater-item > figure .image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

body .brxe-related-posts li.repeater-item:hover > figure img,
body .brxe-related-posts li.repeater-item:hover > figure .image {
    transform: scale(1.04) !important;
}

body .brxe-related-posts li.repeater-item > figure::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 65%) !important;
    opacity: 1 !important;
    transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

body .brxe-related-posts li.repeater-item:hover > figure::after {
    opacity: 0.7 !important;
}

/* The overlay text box, pinned to the bottom of the card */
body .brxe-related-posts li.repeater-item > div.post-content {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    z-index: 2 !important;
    padding: 25px 30px 28px !important;
    margin: 0 !important;
    text-align: left !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
    display: block !important;
    grid-row: auto !important;
    grid-column: auto !important;
    align-self: auto !important;
    justify-self: auto !important;
    justify-content: initial !important;
}

body .brxe-related-posts li.repeater-item > div.post-content a {
    pointer-events: auto !important;
}

/* Category eyebrow */
body .brxe-related-posts li.repeater-item div.post-content > p {
    margin: 0 0 8px !important;
    font-size: 1.2rem !important;
    color: #fff !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    text-align: left !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}

body .brxe-related-posts li.repeater-item div.post-content > p a {
    color: #fff !important;
}

/* Headline */
body .brxe-related-posts li.repeater-item div.post-content > h4 {
    margin: 0 !important;
    font-size: 1.9rem !important;
    text-align: left !important;
    color: #fff !important;
    line-height: 1.25 !important;
    letter-spacing: 0.3px !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5) !important;
}

body .brxe-related-posts li.repeater-item div.post-content > h4 a {
    color: #fff !important;
}

@media (max-width: 991px) {
    body .brxe-related-posts ul.related-posts {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 767px) {
    body .brxe-related-posts ul.related-posts {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    body .brxe-related-posts li.repeater-item div.post-content > h4 {
        font-size: 2.2rem !important;
    }
    body .brxe-related-posts li.repeater-item > div.post-content {
        padding: 22px 25px 25px !important;
    }
}

@media (max-width: 478px) {
    body .brxe-related-posts ul.related-posts {
        gap: 15px !important;
    }
    body .brxe-related-posts li.repeater-item div.post-content > h4 {
        font-size: 2rem !important;
    }
    body .brxe-related-posts li.repeater-item > div.post-content {
        padding: 20px 22px 22px !important;
    }
}