.portfolio-content { position:relative; padding-top:42px; }
.portfolio-leaf-deco { position:absolute; top:28px; right:38px; width:90px; height:auto; pointer-events:none; z-index:0; opacity:.9; }
@media(max-width:900px) { .portfolio-leaf-deco { width:70px; } }
@media(max-width:640px) { .portfolio-leaf-deco { display:none; } }
.portfolio-content .projects-eyebrow { margin-bottom:14px; }
.portfolio-content .projects-eyebrow::after { display:none; }
.portfolio-heading { font:400 clamp(20px,2.2vw,28px)/1.2 Merriweather,Georgia,serif; color:#242720; margin:0 0 16px; }
.portfolio-intro { margin:0; padding-bottom:24px; color:#6a6c64; font-size:16px; }
.portfolio-filters { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:24px 0 0; padding:10px 16px; border:1px solid #e3e5dd; border-radius:14px; background:#f4eee8; }
.portfolio-filters button { border:1px solid transparent; border-radius:999px; background:none; color:#555b4e; font:600 13px/1.3 Lato,Arial,sans-serif; padding:8px 14px; cursor:pointer; }
.portfolio-filters button:hover { color:#343d2c; }
.portfolio-filters button[aria-pressed="true"] { background:#e3e8d8; border-color:#56634b; color:#3a4a2f; }
.portfolio-pagination button { border:1px solid #ddd4c2; border-radius:999px; background:#f4eee8; color:#555b4e; font:600 13px/1.3 Lato,Arial,sans-serif; padding:9px 16px; cursor:pointer; }
.portfolio-pagination button:hover { background:#efe6da; }
.portfolio-pagination button[aria-current="page"] { background:#56634b; border-color:#56634b; color:#fff; }
.portfolio-status { min-height:24px; font-size:13px; color:#79816f; margin:12px 0 24px; }

.portfolio-list { display:grid; grid-template-columns:1fr; gap:24px; margin-top:24px; }
.portfolio-card { display:grid; grid-template-columns:28.5% minmax(0,1fr); gap:16px; align-items:center; background:#f4eee8; border:1px solid #ddd4c2; border-radius:16px; padding:10px; scroll-margin-top:24px; box-shadow:none; }
.portfolio-card[hidden] { display:none; }

.portfolio-preview { display:block; border:0; background:none; padding:0; width:100%; border-radius:10px; overflow:hidden; cursor:pointer; }
.portfolio-preview img { display:block; width:100%; height:auto; }

.portfolio-description { min-width:0; padding:6px 6px 6px 0; display:flex; flex-direction:column; flex:1; }
.portfolio-description h2 { font:600 19px/1.35 Lato,Arial,sans-serif; color:#272a24; background:none; border-radius:0; padding:0; margin:0 0 10px; }
.portfolio-description h2 span { display:block; margin-top:4px; }
.portfolio-description dl { display:block; margin:0 0 14px; font-size:13.5px; line-height:1.6; color:#4a4d45; }
.portfolio-description dt { display:inline; font-weight:700; color:#272a24; }
.portfolio-description dt::after { content:': '; }
.portfolio-description dd { display:inline; margin:0; overflow-wrap:anywhere; }
.portfolio-description dd::after { content:''; display:block; margin-bottom:6px; }

.portfolio-card__tags { display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0 0 14px; }
.portfolio-card__tags li { padding:5px 10px; border-radius:999px; background:#eeede7; color:#555b4e; font-size:11px; line-height:1.3; }

.portfolio-actions { display:flex; justify-content:flex-start; margin-top:auto; }
.portfolio-actions .btn { display:inline-flex; align-items:center; gap:10px; min-height:0; padding:0; background:none; border:0; border-radius:0; color:#343d2c; font:600 14px/1.3 Lato,Arial,sans-serif; }
.portfolio-actions .btn:hover { background:none; color:#6c7d55; }
.portfolio-actions .btn img { display:block; flex-shrink:0; }

.portfolio-pagination { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:32px; }
.portfolio-pagination button { min-width:38px; min-height:38px; padding:8px 14px; }
.portfolio-pagination button:disabled { opacity:.45; cursor:default; }
.portfolio-empty { grid-column:1/-1; padding:28px; text-align:center; background:#f4eee8; border:1px solid #ddd4c2; border-radius:16px; }

@media(max-width:760px) {
  .portfolio-intro { font-size:15px; }
  .portfolio-filters { gap:8px; }
  .portfolio-filters button { padding:9px 12px; font-size:13px; }
  .portfolio-card { grid-template-columns:1fr; }
  .portfolio-description { padding:14px 6px 6px; }
  .portfolio-description h2 { font-size:18px; }
  .portfolio-status { margin-bottom:20px; }
}

/* Certificate timeline */
.cert-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin:24px 0 0; padding:10px 16px; border:1px solid #e3e5dd; border-radius:14px; background:#f4eee8; }
.cert-filters { display:flex; flex-wrap:wrap; gap:4px; }
.cert-filter { border:1px solid transparent; border-radius:999px; background:none; color:#555b4e; font:600 13px/1.3 Lato,Arial,sans-serif; padding:8px 14px; cursor:pointer; }
.cert-filter:hover { color:#343d2c; }
.cert-filter[aria-pressed="true"] { background:#e3e8d8; border-color:#56634b; color:#3a4a2f; }
.cert-sort { border:1px solid #e3e5dd; border-radius:999px; background:#fff; color:#555b4e; font:600 13px/1.3 Lato,Arial,sans-serif; padding:9px 34px 9px 16px; cursor:pointer; appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23555b4e'><path d='M5.5 8l4.5 4.5L14.5 8z'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; background-size:14px; }

.cert-timeline { display:flex; flex-direction:column; margin-top:60px; }
.cert-timeline-item { display:grid; grid-template-columns:66px 24px 1fr; gap:0; }
.cert-timeline-item[hidden] { display:none; }
.cert-timeline-date { display:flex; flex-direction:column; justify-content:center; padding:0 14px 0 0; text-align:right; }
.cert-timeline-date span { display:block; font:600 13px/1.3 Lato,Arial,sans-serif; color:#4a4d45; }
.cert-timeline-date span:last-child { font-weight:400; font-size:12px; color:#8a8d81; }
.cert-timeline-marker { position:relative; }
.cert-timeline-marker::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:#dcd6c8; transform:translateX(-50%); }
.cert-timeline-item:first-child .cert-timeline-marker::before { top:50%; }
.cert-timeline-item:last-child .cert-timeline-marker::before { bottom:50%; }
.cert-timeline-marker::after { content:""; position:absolute; left:50%; top:50%; width:9px; height:9px; border-radius:50%; background:#56634b; border:2px solid #faf8f3; transform:translate(-50%,-50%); }

.cert-row { --cert-col-w:420px; --cert-landscape-w:420px; --cert-portrait-w:280px; display:grid; grid-template-columns:var(--cert-col-w) minmax(0,1fr); gap:22px; align-items:center; background:#f4eee8; border:1px solid #ddd4c2; border-radius:14px; padding:16px; margin:0 0 18px; scroll-margin-top:24px; }
.cert-row__media { position:relative; display:block; overflow:hidden; justify-self:center; }
.cert-row--landscape .cert-row__media { width:var(--cert-landscape-w); }
.cert-row--portrait .cert-row__media { width:var(--cert-portrait-w); aspect-ratio:210/297; }
.cert-row__media img { display:block; width:100%; height:100%; object-fit:cover; border-radius:0; }
.cert-row--landscape .cert-row__media img { height:auto; object-fit:unset; }
.cert-row__body { min-width:0; }
.cert-row__tag { display:inline-block; padding:4px 10px; border-radius:999px; background:#eeede7; color:#555b4e; font:600 11px/1.3 Lato,Arial,sans-serif; }
.cert-row__title { margin:8px 0 2px; font:600 16px/1.35 Lato,Arial,sans-serif; color:#272a24; }
.cert-row__issuer { margin:0 0 8px; color:#6a6c64; font-size:13px; }
.cert-row__desc { margin:0; color:#4a4d45; font-size:13.5px; line-height:1.65; }

@media(max-width:640px) {
  .cert-toolbar { flex-direction:column; align-items:flex-start; }
  .cert-timeline-item { grid-template-columns:44px 20px 1fr; }
  .cert-timeline-date span { font-size:11px; }
  .cert-row { grid-template-columns:1fr; }
}

.cert-row__media { cursor:zoom-in; }

/* Certificate lightbox */
.cert-lightbox { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:32px; }
.cert-lightbox[hidden] { display:none; }
.cert-lightbox__backdrop { position:absolute; inset:0; background:#20241bcc; }
.cert-lightbox__panel { position:relative; max-width:min(1200px,95vw); max-height:92vh; background:#faf8f3; border-radius:14px; padding:16px; box-shadow:0 20px 60px #0004; }
.cert-lightbox__img { display:block; max-width:100%; max-height:calc(92vh - 32px); width:auto; height:auto; margin:0 auto; border-radius:6px; }
.cert-lightbox__close { position:absolute; top:-16px; right:-16px; width:38px; height:38px; border-radius:50%; border:0; background:#272a24; color:#fff; font-size:22px; line-height:1; cursor:pointer; display:grid; place-items:center; box-shadow:0 4px 12px #0003; }
.cert-lightbox__close:hover { background:#4a4d45; }
@media(max-width:640px) {
  .cert-lightbox { padding:16px; }
  .cert-lightbox__close { top:-14px; right:-14px; width:34px; height:34px; font-size:20px; }
}

.project-publication { margin:0 0 8px; color:#79816f; font:400 11px/1.4 Lato,Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; }

.portfolio-item[hidden] { display:none; }
.portfolio-pagination { display:flex; justify-content:center; gap:10px; margin-top:28px; }
.portfolio-pagination button { border:1px solid #dce1d3; border-radius:50%; width:36px; height:36px; background:transparent; color:#51613b; cursor:pointer; }
.portfolio-pagination button[aria-current="page"] { background:#56634b; color:white; }
