/**
 * MiniCAD -- Portfolio Component Styles
 *
 * Portfolio filters, grid, cards, midcta, standalone hero + overrides.
 * Loaded on page-home.php AND page-portfolio.php.
 *
 * @package MiniCAD
 */

/* -- Portfolio section ------------------------------------------ */

.mc-portfolio { position: relative; background: var(--mc-white); content-visibility: auto; contain-intrinsic-size: auto 800px; }
.mc-portfolio__header { margin-bottom: calc(20px * var(--mc-scale)); }

/* -- Filters ---------------------------------------------------- */

.mc-port-filters { display: flex; gap: calc(8px * var(--mc-scale)); flex-wrap: wrap; margin-bottom: calc(24px * var(--mc-scale)); }
.mc-port-filter {
    font-family: var(--mc-font-head); font-size: var(--mc-fs-sm); font-weight: 600;
    padding: calc(10px * var(--mc-scale)) calc(18px * var(--mc-scale)); border-radius: calc(8px * var(--mc-scale)); min-height: calc(44px * var(--mc-scale));
    border: 1px solid rgba(var(--mc-calypso-rgb),0.3); color: var(--mc-calypso);
    background: transparent; cursor: pointer;
    transition: all 0.25s var(--mc-ease);
}
.mc-port-filter:hover { border-color: var(--mc-calypso); color: var(--mc-calypso); background: rgba(var(--mc-calypso-rgb),0.06); }
.mc-port-filter.is-active { background: var(--mc-calypso); border-color: var(--mc-calypso); color: var(--mc-white); box-shadow: 0 4px 14px rgba(var(--mc-calypso-rgb),0.25); }



/* -- Grid ------------------------------------------------------- */

.mc-port-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(18px * var(--mc-scale)); }

/* -- Portfolio card --------------------------------------------- */

.mc-port-card {
    position: relative;
    background: var(--mc-white); border: 1px solid rgba(var(--mc-dark-rgb),0.07);
    border-radius: var(--mc-radius); overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform 0.35s var(--mc-ease), box-shadow 0.35s var(--mc-ease), opacity 0.25s ease, border-color 0.25s ease;
    cursor: pointer;
}
.mc-port-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 50px rgba(var(--mc-dark-rgb), 0.12);
}
.mc-port-card[hidden] { display: none; }

/* Thumb */
.mc-port-card__thumb {
    position: relative; overflow: hidden; aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--mc-dark) 0%, var(--mc-calypso) 55%, var(--mc-deep) 100%);
}
.mc-port-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--mc-ease); }
.mc-port-card__img--placeholder { object-fit: cover; object-position: center; }
.mc-port-card:hover .mc-port-card__img { transform: scale(1.06); }

/* Gallery crossfade */
.mc-port-card__thumb--gallery .mc-port-card__gallery-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0;
    transition: opacity 0.8s ease;
}
.mc-port-card__thumb--gallery .mc-port-card__gallery-img.is-active { opacity: 1; }
.mc-port-card__thumb::before {
    content: ''; position: absolute; inset: 0; z-index: 2;
    background: rgba(var(--mc-deep-rgb),0.55);
    opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.mc-port-card:hover .mc-port-card__thumb::before { opacity: 1; }
.mc-port-card__thumb::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 55%;
    background: linear-gradient(transparent, rgba(var(--mc-deep-rgb),0.88));
    pointer-events: none; z-index: 1;
}
.mc-port-card__thumb-link { display: block; width: 100%; text-decoration: none; position: static; }
.mc-port-card__thumb-link::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.mc-port-card__thumb-link:focus { outline: 2px solid var(--mc-keppel); outline-offset: -2px; }
.mc-port-card__thumb-link:focus:not(:focus-visible) { outline: none; }
.mc-port-card__thumb-link:focus-visible { outline: 2px solid var(--mc-keppel); outline-offset: -2px; }

/* View pill */
.mc-port-card__view-pill {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, calc(-50% + 10px));
    z-index: 3;
    font-family: var(--mc-font-head); font-size: calc(var(--mc-fs) * 0.929); font-weight: 700;
    color: var(--mc-white); background: var(--mc-keppel);
    padding: calc(8px * var(--mc-scale)) calc(20px * var(--mc-scale)); border-radius: calc(6px * var(--mc-scale));
    opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none; white-space: nowrap;
}
.mc-port-card:hover .mc-port-card__view-pill { opacity: 1; transform: translate(-50%, -50%); }

/* Category badge */
.mc-port-card__category {
    position: absolute; top: calc(12px * var(--mc-scale)); left: calc(12px * var(--mc-scale)); z-index: 4;
    font-family: var(--mc-font-head); font-size: var(--mc-fs-2xs); font-weight: 700;
    letter-spacing: var(--mc-ls-label); text-transform: uppercase;
    color: var(--mc-white); background: rgba(var(--mc-keppel-rgb),0.85);
    padding: calc(4px * var(--mc-scale)) calc(10px * var(--mc-scale)); border-radius: var(--mc-radius-sm); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    transition: background 0.2s ease;
}
.mc-port-card:hover .mc-port-card__category { background: var(--mc-keppel); }

/* Tags */
.mc-port-card__tags { position: absolute; bottom: calc(12px * var(--mc-scale)); left: calc(12px * var(--mc-scale)); z-index: 4; display: flex; gap: calc(5px * var(--mc-scale)); flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.mc-port-card__tag {
    font-family: var(--mc-font-mono); font-size: calc(var(--mc-fs) * 0.607); font-weight: 700;
    letter-spacing: 0.8px; text-transform: uppercase;
    color: rgba(var(--mc-light-rgb),0.72); background: rgba(var(--mc-dark-rgb),0.7);
    border: 1px solid rgba(var(--mc-fountain-rgb),0.22); padding: 3px calc(7px * var(--mc-scale)); border-radius: 3px;
}

/* Card body */
.mc-port-card__body { padding: calc(18px * var(--mc-scale)) calc(20px * var(--mc-scale)) calc(20px * var(--mc-scale)); }
.mc-port-card__title { font-family: var(--mc-font-head); font-size: var(--mc-fs); font-weight: 700; color: var(--mc-dark); margin-bottom: calc(6px * var(--mc-scale)); line-height: 1.3; transition: color 0.2s ease; }
.mc-port-card:hover .mc-port-card__title { color: var(--mc-keppel); }
.mc-port-card__meta { display: flex; align-items: center; justify-content: space-between; gap: calc(8px * var(--mc-scale)); }
.mc-port-card__type { font-family: var(--mc-font-head); font-size: var(--mc-fs-xs); font-weight: 700; color: var(--mc-calypso); text-transform: uppercase; letter-spacing: 0.8px; }
.mc-port-card__formats { font-family: var(--mc-font-mono); font-size: calc(var(--mc-fs) * 0.679); color: var(--mc-gray); letter-spacing: 0.4px; }
.mc-port-card__cta {
    display: inline-flex; align-items: center; gap: calc(6px * var(--mc-scale)); margin-top: calc(10px * var(--mc-scale));
    font-family: var(--mc-font-head); font-size: calc(var(--mc-fs) * 0.786); font-weight: 700;
    color: var(--mc-keppel-text); text-transform: uppercase;
    letter-spacing: 0.8px; text-decoration: none;
    transition: color 0.2s ease, gap 0.2s ease;
}
.mc-port-card__cta { position: relative; z-index: 1; }
.mc-port-card__cta:hover { color: var(--mc-amber); gap: calc(10px * var(--mc-scale)); }

/* -- Mid-page CTA bar (portfolio) ------------------------------- */

.mc-portfolio__midcta {
    display: flex; align-items: center; justify-content: space-between;
    gap: calc(20px * var(--mc-scale)); flex-wrap: wrap;
    margin-top: calc(32px * var(--mc-scale)); padding: calc(24px * var(--mc-scale)) calc(28px * var(--mc-scale));
    background: rgba(var(--mc-dark-rgb), 1);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: var(--mc-radius);
    border: 1px solid rgba(var(--mc-keppel-rgb),0.2);
    background-image: linear-gradient(rgba(var(--mc-keppel-rgb),.05) 1px,transparent 1px),
                      linear-gradient(90deg,rgba(var(--mc-keppel-rgb),.05) 1px,transparent 1px);
    background-size: 40px 40px;
}
.mc-portfolio__midcta-text {
    font-family: var(--mc-font-head); font-size: var(--mc-fs-xl); font-weight: 700;
    color: var(--mc-light); margin: 0; line-height: 1.3;
}

/* -- Reduced Motion --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .mc-port-card__view-pill, .mc-port-card__thumb::before { display: none; }
    .mc-port-card__gallery-img { transition: none; }
}

/* -- Standalone hero (page-portfolio.php) ----------------------- */

/* Standalone-only overrides (scoped via hero sibling) */
.mc-page-hero--portfolio ~ .mc-portfolio .mc-portfolio__header { display: none; }
.mc-page-hero--portfolio ~ .mc-portfolio {
    background: var(--mc-tint);
    padding-top: calc(var(--mc-section-y) - 8px);
    content-visibility: visible;
    overflow: visible;
}



/* -- Responsive ------------------------------------------------- */

@media (max-width: 1024px) {
    .mc-port-grid { grid-template-columns: repeat(2, 1fr); }
    .mc-port-card--featured { grid-column: span 2; }
}

@media (max-width: 768px) {
    .mc-port-grid { grid-template-columns: 1fr; }
    .mc-port-card--featured { grid-column: span 1; }
    .mc-port-card__thumb { aspect-ratio: 16/9; }
    .mc-port-filters { gap: calc(6px * var(--mc-scale)); margin-bottom: calc(24px * var(--mc-scale)); }
    .mc-port-filter { font-size: calc(var(--mc-fs) * 0.786); padding: calc(6px * var(--mc-scale)) calc(14px * var(--mc-scale)); }
    .mc-portfolio__midcta { padding: calc(20px * var(--mc-scale)); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .mc-portfolio__midcta-text { font-size: var(--mc-fs-lg); padding-right: 0; }
}

@media (max-width: 480px) {
    .mc-portfolio__midcta {
        flex-direction: column;
            text-align: center;
            padding: calc(20px * var(--mc-scale)) calc(16px * var(--mc-scale));
        }
        .mc-portfolio__midcta-text {
            font-size: var(--mc-fs-md);
        }
        .mc-port-filters {
            flex-wrap: wrap;
            gap: calc(5px * var(--mc-scale));
            margin-bottom: calc(20px * var(--mc-scale));
        }
        .mc-port-filter {
            font-size: var(--mc-fs-xs);
            padding: calc(5px * var(--mc-scale)) calc(10px * var(--mc-scale));
            min-height: calc(36px * var(--mc-scale));
        }
        .mc-port-card__body {
            padding: calc(14px * var(--mc-scale)) calc(14px * var(--mc-scale)) calc(16px * var(--mc-scale));
        }
        .mc-port-card__tags {
            gap: 3px;
        }
        .mc-port-card__tag {
            font-size: calc(var(--mc-fs) * 0.571);
            padding: 2px calc(5px * var(--mc-scale));
        }
    .mc-port-card__title { font-size: calc(var(--mc-fs) * 0.929); }
        .mc-port-card__type {
            font-size: calc(var(--mc-fs) * 0.679);
        }
        .mc-port-card__cta {
            font-size: calc(var(--mc-fs) * 0.714);
        }
        .mc-port-card__view-pill {
            font-size: calc(var(--mc-fs) * 0.857);
            padding: calc(6px * var(--mc-scale)) calc(16px * var(--mc-scale));
        }
        }
    
        @media (max-width: 320px) {
            .mc-port-card__body {
                padding: calc(12px * var(--mc-scale));
            }
        .mc-port-filter {
            font-size: calc(var(--mc-fs) * 0.679);
            padding: calc(4px * var(--mc-scale)) calc(8px * var(--mc-scale));
            min-height: calc(32px * var(--mc-scale));
        }
        .mc-portfolio__midcta {
            padding: calc(16px * var(--mc-scale)) calc(12px * var(--mc-scale));
        }
}