/*
 * PtGrid layout and the three card looks for list pages (static/js/ptgrid.js).
 * The look is a class on the grid container: pt-look-gallery, pt-look-caption, pt-look-mosaic.
 */

/* ---- layout ---- */
.pt-grid { position: relative; }
.pt-grid.is-native { display: grid-lanes; }

/* The selectors repeat .container so they outrank the old per-page `.container div` rules. */
.container.pt-grid > .pt-grid-item,
.pt-grid > .pt-grid-item {
    display: block;
    max-width: none;
    max-height: none;
    margin: 0;
    /* Card badges are position: fixed in the markup; this keeps them pinned to the card. */
    contain: layout;
}
.pt-grid.is-js > .pt-grid-item { position: absolute; top: 0; left: 0; }
.pt-grid.is-native > .pt-grid-item { position: relative; width: auto !important; }
.pt-grid.is-native > .pt-grid-item.is-wide { grid-column: 1 / -1; }
/* Before ptgrid.js runs: rough columns, cards hidden, so nothing piles up on the left and
   jumps. If the script never runs, the cards appear in these columns after 3 seconds. */
[data-pt-grid]:not(.pt-grid) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 40%), 1fr));
    gap: 16px;
    align-items: start;
}
[data-pt-grid]:not(.pt-grid) > * {
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    contain: layout;
    visibility: hidden;
    animation: pt-grid-show 0s 3s forwards;
}
[data-pt-grid]:not(.pt-grid) .outer_card > a:first-child { display: block; contain: layout; }
[data-pt-grid]:not(.pt-grid) .outer_card > a:first-child > img,
[data-pt-grid]:not(.pt-grid) .outer_card > a:first-child > video { display: block; width: 100%; }
@keyframes pt-grid-show { to { visibility: visible; } }

/* Cards fade in once their picture is in, from the top down (the reveal option).
   Only the fade in is animated, so hiding them at start is instant. */
.pt-grid.is-revealing > .pt-grid-item { opacity: 0; }
.pt-grid.is-revealing > .pt-grid-item.is-shown {
    opacity: 1;
    transition: opacity .35s ease var(--pt-reveal-delay, 0s);
}
.pt-grid.is-animated > .pt-grid-item { transition: transform .25s ease; }
.pt-grid.is-revealing.is-animated > .pt-grid-item.is-shown {
    transition: opacity .35s ease var(--pt-reveal-delay, 0s), transform .25s ease;
}
@media (prefers-reduced-motion: reduce) {
    .pt-grid.is-revealing > .pt-grid-item,
    .pt-grid.is-animated > .pt-grid-item { transition: none; }
}

/* Badges inside the picture link stay on the picture, not on the caption under it. */
.pt-grid .outer_card > a:first-child { display: block; width: 100%; contain: layout; }
.pt-grid .outer_card > a:first-child > img,
.pt-grid .outer_card > a:first-child > video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 120px;
}

/* Image-to-image cards: before and after side by side, cropped to the same height. */
.pt-grid .outer_card > a:first-child:has(> .image_i2i) { display: flex; align-items: stretch; }
.pt-grid .outer_card > a:first-child > img.image_original_i2i,
.pt-grid .outer_card > a:first-child > img.image_i2i { width: 50%; min-width: 0; height: auto; object-fit: cover; }

/* ---- card overlays ----
 * One spot per kind, so nothing on a card lands on top of something else:
 *   top left     media type: Video / Music (articleapp/components/card_media_badge.html)
 *   top right    card action: save to a box (liked posts), "Not interested" (For you), author avatar (subscriptions, gallery look)
 *   centre       music play button (card_music_play.html)
 *   bottom right like count (card_likes.html; behind the "Like counts" chip on most pages)
 * Pills (1.75rem) are information, round buttons (2.5rem, like .bx-card-btn) are actions;
 * pills sit on the centre line of a button in the same row. The play button is the card's
 * main action, so it is bigger (3.25rem) and centred on the picture. */
.outer_card { --pt-ov-edge: .6rem; --pt-ov-pill: 1.75rem; --pt-ov-btn: 2.5rem; --pt-ov-play: 3.25rem; }
.pt-card-media,
.pt-card-likes {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: var(--pt-ov-pill);
    max-width: calc(100% - var(--pt-ov-btn) - 3 * var(--pt-ov-edge));
    padding: 0 .6rem 0 .45rem;
    border-radius: 999px;
    background: rgba(22, 22, 22, .62);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
    color: #fff;
    font-family: var(--pt-font-text, inherit);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .01em;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity .15s ease;
}
.pt-card-media > span { overflow: hidden; text-overflow: ellipsis; }
.outer_card .pt-card-media .material-icons,
.outer_card .pt-card-likes .material-icons { font-size: 1rem !important; margin: 0 !important; flex: none; }
.pt-card-media .material-icons { color: var(--pt-amber-500) !important; }
.pt-card-media { top: calc(var(--pt-ov-edge) + (var(--pt-ov-btn) - var(--pt-ov-pill)) / 2); left: var(--pt-ov-edge); }
.pt-card-likes { bottom: calc(var(--pt-ov-edge) + (var(--pt-ov-btn) - var(--pt-ov-pill)) / 2); right: var(--pt-ov-edge); font-variant-numeric: tabular-nums; }
.pt-card-likes[hidden] { display: none; }
.pt-card-likes .material-icons { color: #ff6b6b !important; }
.pt-card-likes .material-icons.is-muted { color: rgba(255, 255, 255, .7) !important; margin-left: .25rem !important; }

/* Graphic posts (card_graphic_cover.html): a cover that blurs the picture under it until
   tapped. backdrop-filter, so hover effects on the picture cannot unblur it; z-index 1
   keeps the media and like pills above it. Corners follow each card look. */
.outer_card > a:has(> .pt-card-graphic) > img,
.outer_card > a:has(> .pt-card-graphic) > video { transform: none !important; }
.pt-card-graphic {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: rgba(22, 22, 22, .4);
    -webkit-backdrop-filter: blur(28px) saturate(.7); backdrop-filter: blur(28px) saturate(.7);
    color: #fff;
    text-align: center;
    cursor: pointer;
}
.pt-look-caption .pt-card-graphic { border-radius: var(--pt-radius-lg); }
.pt-look-mosaic .pt-card-graphic { border-radius: var(--pt-radius-sm); }
.outer_card .pt-card-graphic .material-icons { font-size: 1.75rem !important; margin: 0 0 .15rem !important; color: #fff !important; }
.pt-card-graphic strong { font-size: .9375rem; font-weight: 600; }
.pt-card-graphic span { font-size: .8125rem; opacity: .85; }

.pt-card-play {
    position: absolute;
    z-index: 3;
    left: calc(50% - var(--pt-ov-play) / 2);
    top: calc(50% - var(--pt-ov-play) / 2);
    width: var(--pt-ov-play);
    height: var(--pt-ov-play);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(22, 22, 22, .62);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    color: var(--pt-amber-500);
    transition: background .12s, color .12s, transform .12s;
}
.outer_card .pt-card-play .material-icons { font-size: 2rem !important; margin: 0 !important; color: inherit !important; }
.pt-card-play:hover { background: var(--pt-ink); transform: scale(1.06); }
.pt-card-play:focus-visible { outline: 2px solid var(--pt-accent); outline-offset: 2px; }
.pt-card-play.is-playing { background: var(--pt-amber-500); color: var(--pt-ink); }

/* ---- caption block (title + author), drawn by articleapp/components/card_caption.html ---- */
.pt-card-cap { display: none; }
.pt-card-cap,
.pt-card-cap:hover { color: var(--pt-text); text-decoration: none; text-align: left; }
.pt-card-cap-title {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.35;
}
.pt-card-cap-by {
    display: flex;
    align-items: center;
    gap: .375rem;
    min-width: 0;
    margin-top: .25rem;
    font-size: .75rem;
    color: var(--pt-text-muted);
}
.pt-card-cap-by img {
    width: 1.25rem !important;
    height: 1.25rem !important;
    min-height: 0 !important;
    border-radius: 50% !important;
    object-fit: cover;
    flex: none;
    box-shadow: none !important;
}
.pt-card-cap-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---- A. gallery: pictures only, roomy (the look before PtGrid) ---- */
/* Nothing extra: polish.css already rounds and lifts the pictures. */

/* ---- B. caption: picture with title and author under it (site default) ---- */
.pt-look-caption { --pt-cap-h: 3.25rem; }
.pt-look-caption.pt-cap-title-only { --pt-cap-h: 2rem; }   /* profile pages: no author line */
.pt-look-caption .pt-card-cap { display: block; height: var(--pt-cap-h); padding: .5rem .25rem 0; overflow: hidden; }
/* Subscriptions page: the caption already names the author, so drop the avatar on the picture. */
.pt-look-caption .ps-sub-avatar { display: none !important; }
/* The music play button sits beside the picture link; centre it on the picture, not picture + caption. */
.pt-look-caption .pt-card-play { top: calc((100% - var(--pt-cap-h) - var(--pt-ov-play)) / 2); }
.pt-look-caption .outer_card > a:first-child > img,
.pt-look-caption .outer_card > a:first-child > video { border-radius: var(--pt-radius-lg) !important; }

/* ---- C. mosaic: dense wall, small corners, details over the picture on hover ---- */
.pt-look-mosaic .outer_card > a:first-child > img,
.pt-look-mosaic .outer_card > a:first-child > video {
    border-radius: var(--pt-radius-sm) !important;
    box-shadow: none !important;
}
@media (hover: hover) {
    .pt-look-mosaic .outer_card:hover > a:first-child > img,
    .pt-look-mosaic .outer_card:hover > a:first-child > video { transform: none; filter: brightness(.92); }
}
.pt-look-mosaic .pt-card-cap {
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 2rem .75rem .625rem;
    border-radius: 0 0 var(--pt-radius-sm) var(--pt-radius-sm);
    background: linear-gradient(to top, rgba(10, 10, 12, .78), rgba(10, 10, 12, 0));
    color: #fff;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}
.pt-look-mosaic .pt-card-cap-by { color: rgba(255, 255, 255, .8); }
.pt-look-mosaic .outer_card:hover .pt-card-cap,
.pt-look-mosaic .outer_card:focus-within .pt-card-cap { opacity: 1; }
.pt-look-mosaic .outer_card:hover .pt-card-media,
.pt-look-mosaic .outer_card:hover .pt-card-likes { opacity: 0; }
@media (hover: none) {
    .pt-look-mosaic .pt-card-cap { display: none; }
}

/* Phones: keep the cards off the screen edges (the containers carry an inline padding: 0). */
@media (max-width: 640px) {
    .container.pt-grid,
    .container[data-pt-grid] { padding-left: 12px !important; padding-right: 12px !important; }
}