/*
 * Portfolio presentation.
 *
 * No card boxes: each project is just its mockup sitting on the page with
 * the text under (or beside) it. The mockup spans the full width of its
 * column — the browser window itself is the visual, edge to edge.
 *
 * Layout alternates on a 3-item rhythm (one wide, two half) so the page
 * does not read as one repeated grid cell, and the mockup backdrop cycles
 * through a small palette so neighbouring items never look identical.
 */

/* ---------------------------------------------------------- filter chips */
.projects-filter-block{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:64px}
.filter-chip{display:inline-flex;align-items:center;padding:11px 20px;border:1px solid #e3eae3;border-radius:999px;background:#fff;color:#4b574b;font-weight:600;font-size:14px;cursor:pointer;transition:all .25s ease;margin:0}
.filter-chip:hover{border-color:#bcd3bc;color:#0D0D0D}
.filter-chip.active{background:#0D0D0D;color:#fff;border-color:#0D0D0D}

/* ------------------------------------------------------------ the mockup */
.pw-item{margin-bottom:76px}
.pw-shotlink{display:block;text-decoration:none;border-radius:14px;overflow:hidden;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.pw-shotlink:hover{transform:translateY(-6px)}

/* browser window — full column width, no surrounding padding */
.pw-win{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 26px 60px -22px rgba(13,13,13,.42)}
.pw-chrome{display:flex;align-items:center;gap:14px;padding:13px 18px;background:#f6f8f6;border-bottom:1px solid #e9eee9}
.pw-dots{display:inline-flex;gap:7px;flex:0 0 auto}
.pw-dots i{width:11px;height:11px;border-radius:50%;display:block}
.pw-dots i:nth-child(1){background:#f4a29a}
.pw-dots i:nth-child(2){background:#f5cf95}
.pw-dots i:nth-child(3){background:#a4cfa4}
.pw-url{flex:1;min-width:0;background:#fff;border:1px solid #e9eee9;border-radius:999px;padding:6px 16px;font-size:12.5px;color:#7b8a7b;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr}
.pw-shot{display:block;width:100%;height:auto;aspect-ratio:1180/738;object-fit:cover;object-position:top center}

/* dark chrome variant, used on every other wide item for contrast */
.pw-win--dark .pw-chrome{background:#191d1a;border-bottom-color:#262b27}
.pw-win--dark .pw-url{background:#222723;border-color:#2e3430;color:#9aa89c}

/* phone — centred on a tinted panel that fills the column */
.pw-phonewrap{display:flex;align-items:center;justify-content:center;padding:44px 20px;border-radius:14px}
.pw-phone{position:relative;width:258px;padding:12px 12px 0;border-radius:36px 36px 0 0;background:#14181a;box-shadow:0 26px 55px -18px rgba(13,13,13,.5)}
.pw-notch{position:absolute;top:17px;left:50%;transform:translateX(-50%);width:74px;height:6px;border-radius:99px;background:#2d3436;z-index:2}
.pw-phone .pw-shot{border-radius:26px 26px 0 0;aspect-ratio:520/1156}
/* a landscape image filed under mobile: show it plainly instead of cropping */
.pw-phonewrap.pw-wide .pw-phone{width:100%;padding:0;border-radius:14px;background:transparent}
.pw-phonewrap.pw-wide .pw-notch{display:none}
.pw-phonewrap.pw-wide .pw-shot{border-radius:14px;aspect-ratio:1180/738}
.pw-phonewrap.pw-wide{padding:0}

/* backdrop palette — cycled per item so neighbours differ */
.pw-tint-1{background:linear-gradient(150deg,#eef4ee 0%,#dfeade 100%)}
.pw-tint-2{background:linear-gradient(150deg,#eef2f8 0%,#dee6f1 100%)}
.pw-tint-3{background:linear-gradient(150deg,#f7f2ec 0%,#efe4d7 100%)}
.pw-tint-4{background:linear-gradient(150deg,#1b211d 0%,#2a322c 100%)}

/* ------------------------------------------------------------- item text */
.pw-meta{padding-top:24px}
.pw-cat{display:block;font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#6FA06F;margin-bottom:10px}
.pw-title{font-size:26px;line-height:1.28;font-weight:700;color:#0D0D0D;margin:0 0 9px}
.pw-title a{color:inherit;text-decoration:none}
.pw-item:hover .pw-title a{color:#4a7a4a}
.pw-sub{font-size:15px;line-height:1.75;color:#74827a;margin:0}
.pw-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:18px}
.pw-more,.pw-live{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;text-decoration:none;transition:gap .25s ease,color .25s ease}
.pw-more{color:#0D0D0D}
.pw-more:hover{color:#4a7a4a;gap:13px}
.pw-live{color:#6FA06F}
.pw-live:hover{color:#4a7a4a;gap:13px}

/* -------------------------------------------------- wide (feature) layout */
.pw-item--wide{margin-bottom:92px}
.pw-wide-row{display:grid;grid-template-columns:1.35fr 1fr;align-items:center;gap:56px}
.pw-item--wide.pw-flip .pw-wide-row{grid-template-columns:1fr 1.35fr}
.pw-item--wide.pw-flip .pw-wide-visual{order:2}
.pw-item--wide.pw-flip .pw-wide-text{order:1}
.pw-item--wide .pw-meta{padding-top:0}
.pw-item--wide .pw-title{font-size:33px}
.pw-item--wide .pw-sub{font-size:16px}

/* -------------------------------------------------------------- home page */
.wk-item{display:block;text-decoration:none}
.wk-shotlink{display:block;border-radius:13px;overflow:hidden;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.wk-item:hover .wk-shotlink{transform:translateY(-6px)}
.wk-win{border-radius:13px;overflow:hidden;background:#fff;box-shadow:0 22px 48px -20px rgba(13,13,13,.4)}
.wk-chrome{display:flex;align-items:center;gap:11px;padding:11px 14px;background:#f6f8f6;border-bottom:1px solid #e9eee9}
.wk-dots{display:inline-flex;gap:6px}
.wk-dots i{width:9px;height:9px;border-radius:50%;display:block}
.wk-dots i:nth-child(1){background:#f4a29a}
.wk-dots i:nth-child(2){background:#f5cf95}
.wk-dots i:nth-child(3){background:#a4cfa4}
.wk-url{flex:1;min-width:0;background:#fff;border:1px solid #e9eee9;border-radius:999px;padding:5px 13px;font-size:11.5px;color:#7b8a7b;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr}
.wk-shot{display:block;width:100%;height:auto;aspect-ratio:1180/738;object-fit:cover;object-position:top center}
.wk-phonewrap{display:flex;align-items:center;justify-content:center;padding:26px 16px;border-radius:13px}
.wk-phone{position:relative;width:180px;padding:9px 9px 0;border-radius:28px 28px 0 0;background:#14181a;box-shadow:0 18px 38px -14px rgba(13,13,13,.45)}
.wk-notch{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:55px;height:4px;border-radius:99px;background:#2d3436;z-index:2}
.wk-phone .wk-shot{border-radius:20px 20px 0 0;aspect-ratio:520/1156}
.wk-meta{display:block;padding-top:20px}
.wk-cat{display:block;font-size:11px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:#6FA06F;margin-bottom:8px}
.wk-title{font-size:21px;font-weight:700;color:#0D0D0D;margin:0 0 6px;line-height:1.32}
.wk-sub{font-size:14px;line-height:1.65;color:#74827a;margin:0}

/* ------------------------------------------------------------ RTL + small */
[dir="rtl"] .pw-url,[dir="rtl"] .wk-url{direction:ltr}
[dir="rtl"] .pw-more svg,[dir="rtl"] .pw-live svg{transform:scaleX(-1)}

@media (max-width:991px){
    .pw-wide-row{grid-template-columns:1fr;gap:26px}
    .pw-item--wide.pw-flip .pw-wide-row{grid-template-columns:1fr}
    .pw-item--wide.pw-flip .pw-wide-visual{order:0}
    .pw-item--wide.pw-flip .pw-wide-text{order:0}
    .pw-item--wide .pw-title{font-size:26px}
    .pw-item,.pw-item--wide{margin-bottom:56px}
    .projects-filter-block{margin-bottom:42px}
    .pw-phone{width:210px}
}
@media (max-width:575px){
    .filter-chip{padding:9px 15px;font-size:13px}
    .pw-title{font-size:21px}
    .pw-item--wide .pw-title{font-size:23px}
    .pw-chrome{padding:10px 13px;gap:10px}
    .pw-url{font-size:11px;padding:5px 12px}
    .pw-item,.pw-item--wide{margin-bottom:46px}
    .pw-phonewrap{padding:30px 16px}
    .pw-phone{width:180px}
}