.br-read-more {
    margin-left: 4px;
    text-decoration: underline;
    cursor: pointer;
    display: inline;
}

/*
 * Enough to make a fresh paste look like a grid, and no more.
 *
 * Everything here is a single-class selector with no !important, so the site's
 * own stylesheet overrides all of it by being loaded later or by being one
 * degree more specific. Nothing sets a colour, a font or a border — those
 * belong to the site, and a plugin guessing at them is how feeds end up
 * looking bolted on.
 *
 * Column count is a custom property rather than a class so it can be changed at
 * any breakpoint without a shortcode attribute per screen size:
 *
 *   @media (max-width: 600px) { .fh-instagram { --fh-columns: 2 } }
 */

.fh-grid {
    display: grid;
    grid-template-columns: repeat(var(--fh-columns, 3), minmax(0, 1fr));
    gap: var(--fh-gap, 1rem);
}

/*
 * The two breakpoints read their own variable rather than redefining
 * --fh-columns. That is the whole trick: a site writing its own
 * `@media (...) { .fh-instagram { --fh-columns: 5 } }` overrides the base rule
 * and these queries never contradict it, because they are looking at a
 * different name. Redefining --fh-columns here would have quietly won instead.
 *
 * 900 and 550 rather than the usual 768/480 because the breakpoint that matters
 * for a grid is where the tiles get too narrow to read, not where a device
 * category begins.
 */
@media (max-width: 900px) {
    .fh-grid {
        grid-template-columns: repeat(var(--fh-columns-tablet, 3), minmax(0, 1fr));
    }
}

@media (max-width: 550px) {
    .fh-grid {
        grid-template-columns: repeat(var(--fh-columns-mobile, 2), minmax(0, 1fr));
    }
}

/* ---- Instagram ---- */

.fh-post {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.fh-post__image {
    width: 100%;
    height: 100%;
    /* Instagram covers are a mix of square, portrait and landscape. Cropping to
       a square tile is what makes a grid read as a grid; the full image is one
       click away on Instagram. */
    object-fit: cover;
    display: block;
}

/* The "there is more here" badge. White with a drop shadow rather than a
   colour, because it sits on an arbitrary photograph and has to stay legible
   over both a snowfield and a night shot. */
.fh-post__badge {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 1.25rem;
    height: 1.25rem;
    color: #fff;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}

.fh-post__badge svg {
    width: 100%;
    height: 100%;
    display: block;
}

.fh-post--openable {
    cursor: zoom-in;
}

/* Caption and counts share one scrim that appears on hover — Smash Balloon's
   `hoverdisplay: caption,likes` over `hovercolor: #0000007D`, which is 49%
   black. `focus-within` is not decoration: without it the overlay is
   unreachable for anyone tabbing through the feed. */
.fh-post__hover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem;
    color: #fff;
    text-align: center;
    background: rgba(0, 0, 0, .49);
    opacity: 0;
    transition: opacity .15s ease-in-out;
    pointer-events: none;
}

.fh-post:hover .fh-post__hover,
.fh-post:focus-within .fh-post__hover {
    opacity: 1;
}

@media (hover: none) {
    /* Nothing hovers on a touchscreen, so the scrim would never appear and the
       caption would simply not exist. A gradient along the bottom instead. */
    .fh-post__hover {
        inset: auto 0 0 0;
        opacity: 1;
        text-align: left;
        align-items: flex-start;
        background: linear-gradient(transparent, rgba(0, 0, 0, .65));
    }
}

.fh-post__caption {
    font-size: .8125rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fh-post__stats {
    display: flex;
    gap: 1rem;
}

.fh-post__stat {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    font-size: .875rem;
    line-height: 1;
}

.fh-icon {
    width: 1em;
    height: 1em;
    display: block;
}

/* ---- Feed actions ---- */

.fh-feed__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-top: 1rem;
}

/* Same two shapes Smash Balloon renders on this site: a quiet grey "load more"
   and a solid follow button. Colours are theirs (#F3F4F5 / #2C324C) so the
   swap is not visible as a colour change, and both are single-class selectors
   the site can repaint without a fight. */
.fh-feed__more,
.fh-feed__follow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: .6rem 1.25rem;
    border: 0;
    border-radius: var(--fh-button-radius, 0);
    font: inherit;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
}

.fh-feed__more {
    background: var(--fh-more-bg, #f3f4f5);
    color: var(--fh-more-fg, #2c324c);
}

.fh-feed__more:hover:not(:disabled) { background: var(--fh-more-bg-hover, #e8e8eb); }
.fh-feed__more:disabled { cursor: default; }
.fh-feed__more.is-loading { opacity: .6; }

.fh-feed__follow {
    background: var(--fh-follow-bg, #000);
    color: var(--fh-follow-fg, #fff);
}

/* ---- Lightbox ---- */

.fh-lb[hidden] { display: none; }

.fh-lb {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.fh-lb__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .8);
}

/* Scrolling the page behind an open dialog is the single most common way a
   lightbox feels broken on a phone. */
body.fh-lb-open { overflow: hidden; }

.fh-lb__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 0;
    width: min(1000px, 100%);
    max-height: 90vh;
    background: #fff;
    color: #111;
    overflow: hidden;
}

@media (max-width: 700px) {
    .fh-lb__panel {
        grid-template-columns: minmax(0, 1fr);
        overflow-y: auto;
    }
}

/* The stage is a fixed box and the image letterboxes inside it.
   Sizing the stage to the image instead means the panel resizes on every
   arrow press — a carousel mixing a portrait and a landscape shot makes the
   whole dialog jump, and the arrow you just clicked moves out from under the
   cursor. 640px because that is the longest edge we store, so nothing is ever
   scaled up. */
.fh-lb__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    min-height: 0;
    height: min(80vh, 640px);
}

.fh-lb__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

@media (max-width: 700px) {
    .fh-lb__stage { height: min(55vh, 420px); }
}

.fh-lb__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    width: 2.25rem;
    height: 2.75rem;
    cursor: pointer;
}

.fh-lb__nav[hidden] { display: none; }
.fh-lb__nav--prev { left: 0; }
.fh-lb__nav--next { right: 0; }

.fh-lb__dots {
    position: absolute;
    bottom: .625rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: .375rem;
}

.fh-lb__dot {
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
}

.fh-lb__dot.is-current { background: #fff; }

.fh-lb__side {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.25rem;
    overflow-y: auto;
}

.fh-lb__meta {
    display: flex;
    gap: .5rem;
    font-size: .8125rem;
    opacity: .7;
}

.fh-lb__caption { white-space: pre-line; }

.fh-lb__comments {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    font-size: .9375rem;
}

.fh-lb__comment-author {
    font-weight: 600;
    margin-right: .35em;
}

.fh-lb__link { margin-top: auto; }
.fh-lb__link[hidden] { display: none; }

.fh-lb__close {
    position: absolute;
    top: .25rem;
    right: .5rem;
    z-index: 1;
    border: 0;
    background: none;
    color: inherit;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

/* ---- Reviews ---- */

.fh-review {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.fh-review__head {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.fh-review__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.fh-review__avatar--initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.fh-review__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fh-review__author {
    /* A long name must not push the platform marker off the card. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fh-review__source {
    margin-left: auto;
    flex: 0 0 auto;
}

.fh-review__response {
    /* Visibly the owner talking, not the reviewer. The indent is the only
       structural cue; the site can style it however it likes. */
    margin-left: 1rem;
}

.fh-review__stars {
    display: flex;
    align-items: center;
    gap: 2px;
}

.br-star-icon {
    width: 1em;
    height: 1em;
    display: block;
}