/* ============================================================
   The poster card in grids and carousels
   (woocommerce/content-product-icons.php, Display\ProductCard).
   After the canvas board "Kafelek produktu — stany".
   ============================================================ */

.pb-card {
    /* The frame's ground; a hairline inside it keeps light posters from
       melting into the cream sections. */
    --pb-card-ground: var(--color-surface-warm);
    --pb-card-ink: #23231F;
    --pb-card-muted: #6B6A62;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

/* ---- The picture ------------------------------------------------ */

.pb-card__media {
    position: relative;
    /* The poster files' own proportion. */
    aspect-ratio: 768 / 1075;
    overflow: hidden;
    border-radius: 6px;
    background: var(--pb-card-ground);
    box-shadow: inset 0 0 0 1px rgba(35, 35, 31, .07);
}

/* The poster sits in the frame with an even margin (20px at 256px wide).
   Frame and file share a proportion, so the same share all round fits the
   poster exactly, with no strips beside it. */
.pb-card .pb-card__img {
    position: absolute;
    inset: 7.8%;
    width: 84.4%;
    height: 84.4%;
    object-fit: contain;
    filter: drop-shadow(2px 4px 6px rgba(35, 35, 31, .18));
}

/* The room photo fills the frame. */
.pb-card .pb-card__alt {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .24s ease;
}

.pb-card__hint {
    position: absolute;
    z-index: 1;
    left: 10px;
    bottom: 10px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: var(--pb-card-ink);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    /* Hidden with visibility too, so screen readers do not read the hint
       on every card; it waits for the fade before going. */
    opacity: 0;
    visibility: hidden;
    transition: opacity .24s ease, visibility 0s linear .24s;
    pointer-events: none;
}

/* ---- Text ------------------------------------------------------- */

.pb-card .pb-card__title {
    margin: 0;
    padding: 0;
    font-family: var(--font-heading);
    font-size: 18px !important;
    font-weight: 400;
    line-height: 1.25;
    color: var(--pb-card-ink);
}

.pb-card .pb-card__link {
    /* At most two lines of name. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

/* One link for the whole card: the title's, stretched over it. */
.pb-card .pb-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}

.pb-card__desc {
    /* Up to three lines (four on phones), enough for the longest
       descriptions; a one-line ellipsis cut a third of them mid-word. In
       grids the row, not a fixed slot, gives every card the height of its
       longest, so the extra lines cost space only where they are used. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-top: -6px;
    overflow: hidden;
    font-family: var(--font-heading);
    font-size: 14px;
    font-style: italic;
    line-height: 1.35;
    color: var(--pb-card-muted);
}

/* Stored lowercase; the capital is painted only (as on the poster page). */
.pb-card__desc::first-letter {
    text-transform: uppercase;
}

.pb-card .pb-card__price {
    display: block;
    margin: 0;
    padding: 0;
    color: var(--pb-card-ink);
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.4;
}

.pb-card .pb-card__price .amount {
    color: inherit;
    font-size: inherit !important;
    font-weight: inherit;
}

.pb-card .pb-card__price del {
    margin-left: 4px;
    color: var(--pb-card-muted);
    font-weight: 400;
}

.pb-card .pb-card__price del .amount {
    font-weight: 400;
}

/* ---- States ----------------------------------------------------- */

/* Keyboard focus: an outline round the picture, no movement. */
.pb-card:has(.pb-card__link:focus-visible) .pb-card__media {
    outline: 2px solid #5E6A46;
    outline-offset: 3px;
}

/* The ring is drawn round the picture instead. WoodMart draws its dotted
   ring with !important from these variables, so they are emptied here. */
.pb-card .pb-card__link {
    --wd-otl-width: 0px;
    --wd-otl-style: none;
}

@media (hover: hover) {
    .pb-card .pb-card__media {
        transition: transform .24s ease, box-shadow .24s ease;
    }

    .pb-card:hover .pb-card__media {
        transform: translateY(-3px);
        box-shadow: 0 12px 26px rgba(35, 35, 31, .14);
    }

    .pb-card:hover .pb-card__alt.is-loaded,
    .pb-card:hover .pb-card__hint {
        opacity: 1;
    }

    .pb-card:hover .pb-card__hint {
        visibility: visible;
        transition-delay: 0s;
    }

    .pb-card:hover .pb-card__link {
        text-decoration: underline;
        text-decoration-color: #C2BAAB;
        text-underline-offset: 4px;
    }

    .pb-card:active .pb-card__media {
        transform: scale(.985);
        transition-duration: .08s;
    }
}

/* The room photo is on its way (first hover, or "Na ścianie" below): a
   light sheen sweeps across the card until it arrives. */
.pb-card.is-alt-loading .pb-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, .85) 50%, transparent 75%);
    transform: translateX(-100%);
    animation: pb-card-sheen 1.1s ease-in-out infinite;
    pointer-events: none;
}

/* "Na ścianie" (components/archive-view-toggle.php), category and search
   grids only: the room photo shows first and the poster comes back on
   hover. The poster is not drawn until then, so a lazy one is not even
   fetched: one picture per card, not two. Until the photo is in, the
   sheen above fills the card. */
.pb-view-room .pb-shop__grid .pb-card--has-alt .pb-card__img {
    display: none;
}

.pb-view-room .pb-shop__grid .pb-card--has-alt .pb-card__alt.is-loaded {
    opacity: 1;
}

@media (hover: hover) {
    .pb-view-room .pb-shop__grid .pb-card--has-alt:hover .pb-card__img {
        display: block;
    }

    .pb-view-room .pb-shop__grid .pb-card:hover .pb-card__alt.is-loaded {
        opacity: 0;
    }
}

@keyframes pb-card-sheen {
    to {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    /* No sweep: a still veil says "loading" instead. */
    .pb-card.is-alt-loading .pb-card__media::after {
        background: rgba(255, 255, 255, .3);
        transform: none;
        animation: none;
    }

    .pb-card .pb-card__media,
    .pb-card .pb-card__alt,
    .pb-card__hint {
        transition: none;
    }

    .pb-card:hover .pb-card__media,
    .pb-card:active .pb-card__media {
        transform: none;
    }
}

/* ---- Phones ----------------------------------------------------- */

@media (max-width: 767px) {
    .pb-card {
        gap: 8px;
    }

    /* A 172px card: descriptions get a fourth line. */
    .pb-card .pb-card__title {
        font-size: 16px !important;
    }

    .pb-card__desc {
        -webkit-line-clamp: 4;
        margin-top: -4px;
        font-size: 13px;
    }

    .pb-card .pb-card__price {
        font-size: 14px !important;
    }

}

/* ---- The grid around the cards ---------------------------------- */

/* Each card's four parts (picture, name, description, price) are rows of
   the grid row it sits in, through WoodMart's .wd-product and the card
   itself: a row is as tall as its longest name and description, prices
   line up, and short texts leave no gap in rows that do not need one.
   Inside a card the parts are spaced by margins; the grid's 32px stays
   between rows of cards. */
.wd-products.wd-grid-g:has(> .wd-product .pb-card) > .wd-product,
.wd-products.wd-grid-g > .wd-product > .pb-card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
}

.wd-products.wd-grid-g > .wd-product > .pb-card > .pb-card__title {
    margin-top: 10px;
}

.wd-products.wd-grid-g > .wd-product > .pb-card > .pb-card__desc {
    align-self: start;
    margin-top: 3px;
}

.wd-products.wd-grid-g > .wd-product > .pb-card > .pb-card__price {
    align-self: end;
    margin-top: 10px;
}

/* 32px between rows, 24px between columns: WoodMart's 60 / 20 read as
   separate strips rather than one grid. */
.wd-products.wd-grid-g:has(> .wd-product .pb-card) {
    gap: 32px 24px;
}

@media (max-width: 767px) {
    .wd-products.wd-grid-g:has(> .wd-product .pb-card) {
        gap: 24px 16px;
    }
}

/* ---- Our own grid (Display\ProductGrid, [pb_products]) ---------- */

/* Same rows as the WoodMart grid above, without its wrappers: each card's
   picture, title, description and price are rows of the row it sits in. */
.pb-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 24px;
}

.pb-grid > .pb-grid__item {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
}

.pb-grid > .pb-grid__item > .pb-card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
}

.pb-grid .pb-card > .pb-card__title {
    margin-top: 10px;
}

.pb-grid .pb-card > .pb-card__desc {
    align-self: start;
    margin-top: 3px;
}

.pb-grid .pb-card > .pb-card__price {
    align-self: end;
    margin-top: 10px;
}

@media (max-width: 767px) {
    .pb-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
    }
}

/* ---- Carousels -------------------------------------------------- */

/* A carousel's slides are not rows of one grid, so subgrid cannot line the
   prices up. Instead every slide is stretched to the tallest one and the
   card fills it, with the price pushed to the bottom: names and
   descriptions start together, prices end together. */
.wd-carousel-wrap:has(.pb-card) {
    align-items: stretch;
}

.wd-carousel-wrap > .wd-carousel-item:has(.pb-card) {
    display: flex;
    flex-direction: column;
    height: auto;
}

.wd-carousel-item .wd-product:has(> .pb-card),
.wd-carousel-item .pb-card {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

.wd-carousel-item .pb-card > .pb-card__price {
    margin-top: auto;
}

/* The gift card tile in a category grid (GiftCards::tile): a card on a
   darker one, on the card ground, where a poster would be. */
.pb-gift-tile__media {
    display: flex;
    align-items: center;
    justify-content: center;
}
.pb-gift-tile__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 5px 10px;
    border-radius: 999px;
    background: #23231f;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.pb-gift-tile__badge-short,
.pb-gift-tile__desc-short {
    display: none;
}
.pb-gift-tile__cards {
    position: relative;
    width: 78%;
    aspect-ratio: 1.6;
}
.pb-gift-tile__back,
.pb-gift-tile__front {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 3.75%/6%;
}
.pb-gift-tile__back {
    background: #3f4830;
    transform: rotate(7deg) translate(4%, 6%);
    box-shadow: 0 8px 18px rgba(35, 35, 31, .16);
}
.pb-gift-tile__front {
    display: block;
    transform: rotate(-4deg);
    box-shadow: 0 12px 26px rgba(35, 35, 31, .22);
}
@media (max-width: 767px) {
    .pb-gift-tile__badge {
        top: 8px;
        left: 8px;
        padding: 4px 8px;
        font-size: 10px;
    }
    .pb-gift-tile__cards {
        width: 80%;
    }
    .pb-gift-tile__badge-long,
    .pb-gift-tile__desc-long {
        display: none;
    }
    .pb-gift-tile__badge-short,
    .pb-gift-tile__desc-short {
        display: inline;
    }
}

/* The page's last poster, held back while the gift card tile takes a slot
   (templates/archive/category.php); "Pokaż kolejne" shows it. */
.pb-grid > .pb-grid__item--spare {
    display: none;
}