/* ------------------------------------------------------------------ *
 * Foundation Facebook feed: "Two-up grid"
 *
 * Chosen from the six treatments reviewed on 2026-09-01. Before this file
 * existed the feed had no stylesheet at all: the child template emits
 * .foundation-facebook-* class names and nothing anywhere styled them, so
 * the section rendered as centred unstyled text with the post photos
 * stretched to the full container width.
 *
 * Two columns is the point of the design, not a preference. The plugin
 * caches each post image at the "Max image width" set in Foundation ->
 * Facebook (600px on this site, 1200 once that setting is raised). One
 * column of the .container is 1050-1300px wide, so a full-width photo was
 * being enlarged up to 2.9x and going soft; two columns give each card a
 * roughly 500-620px well, which is the size the cached files actually are.
 *
 * The images are also held to a fixed 4:3 well with object-fit: cover. Left
 * to their natural ratio the portrait shots ran to over 2000px tall, one
 * post filling two screens.
 *
 * Hover on "View on Facebook" is a background change only, #d8001d to
 * #ff2a45, matching the slider arrows in glide.css. No lift, no shadow, the
 * ink does not move.
 *
 * Rejected treatments and the reasoning are in the studies artifact:
 * https://claude.ai/code/artifact/f908524e-7f22-4c82-a083-2e01e9347ce1
 * ------------------------------------------------------------------ */

.foundation-facebook-feed {
    /* The builder wraps this section in .container.center, so every line of
       the feed inherits text-align: center. Undo it once, here. */
    text-align: left;

    --fb-red:      #d8001d;
    --fb-red-hov:  #ff2a45;
    --fb-ink:      #24222a;
    --fb-ink-soft: #6b6874;
    --fb-rule:     #e2e0e6;
    --fb-well:     #f7f6f9;
}

/* ---------- page header (avatar + page name, once above the grid) ---------- */

.foundation-facebook-feed .foundation-social-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.foundation-facebook-feed .foundation-social-avatar {
    border-radius: 50%;
    flex: none;
}

.foundation-facebook-feed .foundation-social-handle {
    font-weight: 700;
    color: var(--fb-ink);
}

.foundation-facebook-feed .foundation-social-header .foundation-social-handle {
    font-size: 16px;
}

/* ---------- the grid ---------- *
 *
 * The column count is set here, not by the shortcode. The plugin forces
 * columns to 1 whenever the shortcode omits it, which is the state live is in,
 * and a fixed count cannot be right at every width anyway: three across is
 * comfortable on a laptop and cramped on an iPad.
 *
 * The ladder is 2 up to a laptop, 3 on a laptop, 4 on a large desktop, 1 on a
 * phone. Breakpoints are the site's own - 1550, 1200 and 770 all already appear
 * in the child style.css, and 770 is the theme's mobile breakpoint.
 *
 * The widths below are the .container, which is width:80% capped at 1300px and
 * floored at 1050px, not the viewport. Worst case is 4 across in a 1240px
 * container, which is a 293px card: still wider than the caption needs and
 * still narrower than the 600px cached image, so nothing is enlarged at any
 * step of the ladder.
 */

.foundation-facebook-grid {
    display: grid;
    gap: 22px;

    /* Tablets and small laptops. Also the base for anything unmatched. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Laptop */
@media only screen and (min-width: 1201px) {
    .foundation-facebook-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Large desktop */
@media only screen and (min-width: 1550px) {
    .foundation-facebook-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
    }
}

/* ---------- a card ---------- */

.foundation-facebook-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--fb-rule);
    border-radius: 4px;
    overflow: hidden;
}

/*
 * The image sits after the caption in the markup, because that is the order a
 * Facebook post reads in and it is the order the feed degrades to with no CSS.
 * order: -1 lifts it to the top of the card without the template having to
 * know which treatment is in use.
 */
.foundation-facebook-media {
    order: -1;
    display: block;
    background: var(--fb-well);
}

.foundation-facebook-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/*
 * A post with no image. Facebook's "updated their status" auto-posts have no
 * photo at all, and without this the card would be a short block of text
 * sitting beside a 400px-tall neighbour.
 */
.foundation-facebook-plate {
    order: -1;
    aspect-ratio: 4 / 3;
    background: var(--fb-red);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.foundation-facebook-plate span {
    color: #ffffff;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.35;
    text-align: center;
}

.foundation-facebook-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px 10px;
}

.foundation-facebook-card-head .foundation-social-avatar {
    width: 34px;
    height: 34px;
}

.foundation-facebook-card-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.foundation-facebook-card-meta .foundation-social-handle {
    font-size: 14px;
}

.foundation-facebook-date {
    font-size: 12px;
    color: var(--fb-ink-soft);
}

.foundation-facebook-caption {
    /* Facebook captions carry their own line breaks; keep them. */
    white-space: pre-line;
    margin: 0 18px 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--fb-ink);
    overflow-wrap: break-word;

    /* Pushes the footer to the bottom so every card in a row lines up. */
    flex: 1 1 auto;
}

.foundation-facebook-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    padding: 12px 18px;
    border-top: 1px solid var(--fb-rule);
}

.foundation-facebook-stats {
    font-size: 12px;
    color: var(--fb-ink-soft);
}

.foundation-facebook-view {
    flex: none;
    padding: 7px 14px;
    border-radius: 3px;
    background: var(--fb-red);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .16s ease;
}

.foundation-facebook-view:hover,
.foundation-facebook-view:focus-visible {
    background: var(--fb-red-hov);
    color: #ffffff;
}

.foundation-facebook-view:focus-visible {
    outline: 2px solid #222222;
    outline-offset: 2px;
}

/* ---------- phone ---------- */

/*
 * 770px is the theme's mobile breakpoint, the same one the parent style.css and
 * glide.css use. It is also where .container drops its 1050px min-width, so
 * below this the feed is genuinely as wide as the phone and no wider.
 */
@media only screen and (max-width: 770px) {
    .foundation-facebook-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .foundation-facebook-plate span {
        font-size: 18px;
    }
}

/*
 * The footer is a stats line and a button on one row. On the narrowest cards -
 * 4 across on a 1240px container - there is not always room for both, so let it
 * drop the button onto its own line rather than squeeze the label.
 */
@media only screen and (max-width: 1650px) {
    .foundation-facebook-footer {
        flex-wrap: wrap;
        gap: 8px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .foundation-facebook-view {
        transition: none;
    }
}