/* Portfolio card grid — same treatment as the portfolio archive Code Block.
   Loaded only when [pixelish_portfolio_grid] is on the page. */

.pf-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--hsp-m);
}

.pf-card-small  { grid-column: span 2; }
.pf-card-medium { grid-column: span 3; }
.pf-card-large  { grid-column: span 6; }

.pf-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #13213a;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

/* Hatch overlay, fades in on hover */
.pf-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.06) 0px,
        rgba(255, 255, 255, 0.06) 1px,
        transparent 1px,
        transparent 10px
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.pf-card:hover { transform: translateY(-4px); }
.pf-card:hover::before { opacity: 1; }

.pf-card > section {
    flex: 1;
    width: 100%;
    background: transparent;
    position: relative;
    z-index: 1;
}

.pf-card > section > .section-container {
    width: 100%;
    height: 100%;
    background: transparent;
}

/* Large card: image-left / body-right on desktop */
.pf-card-large > section > .section-container {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--hsp-l);
}

.pf-card-large__media,
.pf-card-large__body {
    flex: 1;
    min-width: 0;
}

/* Whole-card click overlay */
.pf-card-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    text-decoration: none;
    color: var(--hcl-neutral-1);
    pointer-events: auto;
}

/* Corner arrow with backdrop circle */
.pf-card-arrow {
    position: absolute;
    top: var(--hsp-m);
    right: var(--hsp-m);
    width: 40px;
    height: 40px;
    padding: 10px;
    color: var(--hcl-neutral-1);
    background: rgba(15, 27, 45, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    box-sizing: border-box;
    z-index: 3;
    transition: transform 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.pf-card:hover .pf-card-arrow {
    transform: translate(4px, -4px);
    background: var(--hcl-brand-9);
}

@media (max-width: 991px) {
    .pf-card-small,
    .pf-card-medium { grid-column: span 6; }

    .pf-card-large > section > .section-container {
        flex-direction: column;
        gap: var(--hsp-m);
    }
}

@media (max-width: 767px) {
    .pf-grid { grid-template-columns: 1fr; }
    .pf-card-small,
    .pf-card-medium,
    .pf-card-large { grid-column: 1 / -1; }
}