/* Shared only by Portfolio and Explore; other preview surfaces retain their
   own controls and placement. */
:is(.page-portfolio .showcase-card-overlay, .page-explore .discover-card-overlay) {
    --carousel-control-size:36px;
    --carousel-icon-size:16px;
    --carousel-control-border:rgba(255,255,255,.36);
    --carousel-control-bg:rgba(15,23,42,.72);
    --carousel-control-text:#f8fafc;
    --carousel-control-shadow:0 .22rem .65rem rgba(15,23,42,.24);
    --carousel-control-hover-border:rgba(255,255,255,.72);
    --carousel-control-hover-bg:rgba(15,23,42,.88);
}
:is(.page-portfolio .showcase-card-overlay, .page-explore .discover-card-overlay) :is(
    .showcase-reaction-more,
    .showcase-conversation-trigger,
    .showcase-card-action-icon,
    .project-follow-button
) {
    box-sizing:border-box;
    display:inline-grid;
    place-items:center;
    flex:0 0 var(--carousel-control-size);
    width:var(--carousel-control-size);
    min-width:var(--carousel-control-size);
    max-width:var(--carousel-control-size);
    height:var(--carousel-control-size);
    min-height:var(--carousel-control-size);
    max-height:var(--carousel-control-size);
    padding:0;
}
:is(.page-portfolio .showcase-card-overlay, .page-explore .discover-card-overlay) :is(
    .showcase-reaction-more,
    .showcase-conversation-trigger,
    .showcase-card-action-icon,
    .project-follow-button
) > svg {
    flex:none;
    width:var(--carousel-icon-size);
    height:var(--carousel-icon-size);
}
:is(.page-portfolio .showcase-card-overlay, .page-explore .discover-card-overlay) :is(
    .showcase-conversation-trigger,
    .showcase-card-action-icon
) {
    border:1px solid var(--carousel-control-border);
    border-radius:var(--control-radius,10px);
    background:var(--carousel-control-bg);
    color:var(--carousel-control-text);
    box-shadow:var(--carousel-control-shadow);
    backdrop-filter:blur(8px) saturate(1.08);
}
:is(.page-portfolio .showcase-card-overlay, .page-explore .discover-card-overlay) :is(
    .showcase-conversation-trigger,
    .showcase-card-action-icon
):is(:hover,:focus-visible,[aria-expanded="true"]) {
    border-color:var(--carousel-control-hover-border);
    background:var(--carousel-control-hover-bg);
    color:#fff;
}
.page-explore .discover-card-overlay {
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:4px;
    max-width:calc(100% - 1.3rem);
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
}
@media (max-width:767.98px), (any-pointer:coarse) {
    :is(.page-portfolio .showcase-card-overlay, .page-explore .discover-card-overlay) {
        --carousel-control-size:44px;
        --carousel-icon-size:18px;
    }
}