/* instagram.css - the Instagram strip in #instagram, replacing the EmbedSocial widget.

   Cards are 4:5, which is Instagram's own grid ratio since 2025 and the shape these posts
   are authored in. Square would crop ~20% off a portrait post, and on these the message is
   baked into the image - the recruiting post loses its address line, the moon post its
   headline - so cropping costs content, not just aesthetics.

   Images are our own WebP served from Firebase Storage, not Instagram's CDN: their URLs
   expire, and re-hosting lets us optimise them. */

/* The band carries its own vertical rhythm rather than the section wrapper, so that a failed
   fetch collapses to nothing instead of leaving an empty grey stripe on the page. The class
   is added by instagram.js once there is actually something to show. */
.ec-ig {
    margin: 0 auto;
    padding: 0;
}

.ec-ig.ec-ig-ready {
    padding: 40px 0;
}

/* ---- account header ------------------------------------------------------------- */

.ec-ig-head {
    display: flex;
    flex-wrap: wrap; /* lets the follow button drop to its own line on a narrow screen */
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

/* The avatar links to the profile, same target as the follow button. */
.ec-ig-avatarlink {
    display: block;
    flex: 0 0 auto;
    border-radius: 50%;
    line-height: 0;
}

.ec-ig-avatarlink:focus-visible {
    outline: 3px solid #4285f4;
    outline-offset: 2px;
}

.ec-ig-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: block;
    flex: 0 0 auto;
    transition: opacity .15s ease;
}

.ec-ig-avatarlink:hover .ec-ig-avatar {
    opacity: .82;
}

/* An h3 for document structure, but it must not pick up the theme's heading styling — margin
   and Roboto Slab would both break the header row. */
.ec-ig-name {
    margin: 0;
    font-family: inherit;
    font-weight: 700;
    font-size: 1.05rem;
    color: #222629;
    line-height: 1.25;
    text-transform: none;
}

.ec-ig-handle {
    display: block;
    font-size: .85rem;
    font-weight: 400;
    color: #6b7480;
}

.ec-ig-follow {
    margin-left: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ---- the strip ------------------------------------------------------------------ */

.ec-ig-wrap {
    position: relative;
}

.ec-ig-track {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ec-ig-track::-webkit-scrollbar {
    display: none;
}

.ec-ig-card {
    position: relative;
    flex: 0 0 calc(33.3333% - 12px);
    scroll-snap-align: start;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 8px;
    background: #eceff1;
    display: block;
}

/* aspect-ratio is well supported, but a padding fallback costs nothing and avoids a
   collapsed card on anything old */
@supports not (aspect-ratio: 4 / 5) {
    .ec-ig-card {
        height: 0;
        padding-bottom: 125%;
    }
}

.ec-ig-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- overlays ------------------------------------------------------------------- */

/* A white glyph alone disappears on a bright photo, so it sits on a short scrim. */
.ec-ig-foot {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 28px 12px 10px;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    background: linear-gradient(transparent, rgba(0, 0, 0, .5));
    pointer-events: none;
}

/* like + comment counts, left; the Instagram glyph keeps the right */
.ec-ig-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .82rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.ec-ig-stat .fas {
    font-size: 14px;
}

.ec-ig-mark {
    margin-left: auto;
    font-size: 20px;
}

.ec-ig-badge {
    position: absolute;
    top: 10px;
    right: 12px;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
    pointer-events: none;
}

/* video: a centred play triangle, the same cue the old widget used */
.ec-ig-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 54px;
    height: 54px;
    margin: -27px 0 0 -27px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    pointer-events: none;
}

.ec-ig-play:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -9px 0 0 -5px;
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent #fff;
}

/* ---- caption on hover ------------------------------------------------------------ */

.ec-ig-cap {
    position: absolute;
    inset: 0;
    padding: 18px;
    display: flex;
    align-items: flex-end;
    color: #fff;
    font-size: .88rem;
    line-height: 1.5;
    background: rgba(0, 0, 0, .62);
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}

.ec-ig-cap span {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Only on real pointers: on a touch screen there is no hover, and a tap should open the
   post rather than leave a stuck overlay behind. */
@media (hover: hover) and (pointer: fine) {
    .ec-ig-card:hover .ec-ig-cap,
    .ec-ig-card:focus-visible .ec-ig-cap {
        opacity: 1;
    }
}

.ec-ig-card:focus-visible {
    outline: 3px solid #4285f4;
    outline-offset: 3px;
}

/* ---- arrows + dots (same behaviour as the review carousel) ----------------------- */

/* Quieter than the review carousel's arrows, closer to the booking lab's date nav: on desktop
   these sit on the section background rather than on a photo, so a heavy drop shadow would be
   floating over nothing. The hairline border is what keeps them legible there; the very light
   shadow only earns its keep on tablet, the one width where they still overlap an image. */
.ec-ig-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #d5d9de;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .10);
    color: #222629;
    cursor: pointer;
    padding: 0;
}

/* Stroked chevron as a CSS mask — see the same block in reviews.css for why this replaced the
   ‹ › characters, why the viewBox is cropped tight, and why it is duplicated rather than shared. */
.ec-ig-arrow::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.9 1.9L8.1 9L1.9 16.1'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.9 1.9L8.1 9L1.9 16.1'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ec-ig-prev::before {
    transform: scaleX(-1);
}

.ec-ig-prev {
    left: -14px;
}

.ec-ig-next {
    right: -14px;
}

.ec-ig-arrow:hover:not(:disabled) {
    background: #f2f4f6;
}

/* At the first/last page — dimmed, not hidden. See reviews.css for the reasoning. */
.ec-ig-arrow:disabled {
    opacity: .3;
    box-shadow: none;
    cursor: default;
}

.ec-ig-arrow:focus-visible {
    outline: 3px solid #4285f4;
    outline-offset: 2px;
}

.ec-ig-arrow[hidden] {
    display: none;
}

.ec-ig-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    padding-top: 18px;
}

/* keep the row's height when there is only one page, so the gap below does not jump */
.ec-ig-dots[hidden] {
    display: flex;
    visibility: hidden;
}

.ec-ig-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ccd2d8;
    cursor: pointer;
}

.ec-ig-dot[aria-current="true"] {
    background: #222629;
}

/* ---- responsive ------------------------------------------------------------------ */

/* Desktop only: the arrows get their own gutters inside the column instead of sitting on top
   of the photos — a button over an image always covers something, and this strip is nothing
   but images. Pushing them past the container edge is not an option: the container is 1140px
   from a 1200px viewport, so there are only 30px of page margin to play with and an arrow
   needs 44px. Below 992px there is no width to give away, so they go back to overlapping. */
@media (min-width: 992px) {
    .ec-ig-wrap {
        padding: 0 44px;
    }

    .ec-ig-prev {
        left: 0;
    }

    .ec-ig-next {
        right: 0;
    }
}

@media (max-width: 991px) {
    .ec-ig-card {
        flex-basis: calc(50% - 9px);
    }

    .ec-ig-prev {
        left: -8px;
    }

    .ec-ig-next {
        right: -8px;
    }
}

@media (max-width: 575px) {
    /* a sliver of the next card is what tells people it swipes */
    .ec-ig-card {
        flex-basis: calc(78% - 9px);
    }

    /* The account name alone fills a phone row, so the button goes to a second line under it.
       flex-basis: 100% is what forces that break; max-content then shrinks the box back to its
       label, otherwise it would render as a full-width block button, which is far too heavy for
       a strip header. Vertical spacing comes from the header's own 14px row gap. */
    .ec-ig-follow {
        margin-left: 0;
        flex-basis: 100%;
        max-width: max-content;
    }

    /* Neither arrows nor dots on a phone: the card peeking in at the right edge already says
       the strip swipes, and this is the one width where a thumb is the obvious way to move it.
       Two buttons floating over a photo would only cover it. Note the arrows survive on tablet
       above — there the cards sit exactly two across with no peek, so they are the only cue. */
    .ec-ig-arrow {
        display: none;
    }

    /* The dots' [hidden] form has to be overridden too — on desktop that one deliberately
       keeps its height so the gap below the strip does not jump when there is only one page. */
    .ec-ig-dots,
    .ec-ig-dots[hidden] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ec-ig-track {
        scroll-behavior: auto;
    }

    .ec-ig-cap,
    .ec-ig-avatar {
        transition: none;
    }
}