/* Portefólio: cartões, etiquetas, molduras de dispositivo e páginas de caso. */

/* ---- Etiquetas: dizem sempre o que cada trabalho é ---- */
.port-tag { display: inline-block; padding: .15rem .65rem; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .02em; }
.port-tag--demo { border: 1px solid var(--color-border-strong); background: var(--color-bg-alt); color: var(--color-text); }
.port-tag--own { border: 1px solid var(--color-accent-text); color: var(--color-accent-text); background: var(--color-bg); }
.port-tag--client { background: var(--color-accent-text); color: var(--color-text-invert); }
.card .port-tag { margin-bottom: var(--space-sm); }

/* ---- Cartões ---- */
.port-grid { display: grid; gap: var(--space-md); }
@media (min-width: 48em) { .port-grid { grid-template-columns: repeat(2, 1fr); } }
.port-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); box-shadow: var(--shadow-xs); overflow: hidden; transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.port-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.port-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.port-card picture, .case-next picture { display: block; }
.port-card img, .case-next img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: var(--color-bg-alt); }
.port-card img { border-bottom: 1px solid var(--color-border); }
/* No telemóvel a captura é a de telemóvel: mais alta, para o texto dela se ler. */
@media (max-width: 47.99em) { .port-card img, .case-next img { aspect-ratio: 4 / 3; } }
.port-card__body { display: flex; flex-direction: column; flex: 1; gap: var(--space-2xs); padding: var(--space-md); }
.port-card__body .port-tag { align-self: flex-start; }
.port-card h2, .port-card h3 { font-size: var(--text-lg); }
.port-card p { flex: 1; color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); }
.port-card .text-link { margin-top: var(--space-2xs); }
.section__more { margin-top: var(--space-lg); text-align: center; }

/* ---- Molduras de dispositivo (só CSS, sem iframes) ----
   Cada captura abre em tamanho real. No telemóvel, a de telemóvel vem primeiro. */
.case-shots { display: grid; gap: var(--space-lg); align-items: start; }
@media (min-width: 55em) { .case-shots { grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); align-items: center; } .device--wide { grid-column: 1 / -1; } }
@media (max-width: 54.99em) { .device--phone { order: -1; } }
.device { margin: 0; }
.device img { width: 100%; background: var(--color-bg-alt); }
.device__screen { display: block; overflow: hidden; cursor: zoom-in; }
.device__hint { display: none; }
@media (hover: none) { .device__hint { display: inline; } }
.device figcaption { margin-top: var(--space-xs); color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); }
.device--browser .device__screen, .device--browser .device__bar { border-inline: 1px solid var(--color-border); }
.device--browser .device__screen { border-bottom: 1px solid var(--color-border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); box-shadow: var(--shadow-lg); }
.device__bar { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--color-border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--color-bg); }
.device__bar span { width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--color-border); }
.device--phone { max-width: 16rem; margin-inline: auto; }
.device--phone .device__screen { border: 8px solid var(--bmd-navy); border-radius: 28px; box-shadow: var(--shadow-lg); }
.device--phone img { aspect-ratio: 390 / 844; object-fit: cover; object-position: top; }

/* ---- Página de caso ---- */
.eyebrow-link { color: inherit; text-decoration: none; }
.eyebrow-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-hero .port-tag { margin-bottom: var(--space-2xs); }
.case-meta { display: grid; gap: var(--space-sm); margin: var(--space-lg) 0 0; }
@media (min-width: 48em) { .case-meta { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: var(--space-xl); } }
.case-meta dt { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.case-meta dd { margin: var(--space-3xs) 0 0; font-weight: var(--weight-semibold); }
.case-body { display: grid; gap: var(--space-xl); }
@media (min-width: 55em) { .case-body { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } }
.case-body h2, .case-see h2 { font-size: var(--text-2xl); margin-bottom: var(--space-sm); }
.case-body p { color: var(--color-text-muted); max-width: var(--measure); }
.case-list li { font-size: var(--text-base); }
.case-see .bmd-button { width: auto; margin-top: var(--space-sm); padding-inline: var(--space-lg); }
.case-see .text-muted { margin-top: var(--space-2xs); font-size: var(--text-sm); }

/* ---- Caso seguinte: um cartão próprio, à largura da página ---- */
.case-next__title { margin-bottom: var(--space-md); font-size: var(--text-2xl); }
.case-next { display: grid; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); box-shadow: var(--shadow-xs); color: inherit; text-decoration: none; transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.case-next:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
@media (min-width: 48em) { .case-next { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: center; } }
.case-next__body { display: grid; justify-items: start; gap: var(--space-2xs); padding: var(--space-md) var(--space-lg); }
.case-next__body strong { font-size: var(--text-xl); }
.case-next__line { color: var(--color-text-muted); }
@media (min-width: 48em) { .case-next img { height: 100%; border-right: 1px solid var(--color-border); } }

@media (prefers-reduced-motion: reduce) { .port-card:hover, .case-next:hover { transform: none; } }

/* ---- Dados e privacidade (em cada caso) ---- */
.case-privacy { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-items: start; max-width: 52rem; padding: var(--space-lg); border: 1px solid rgba(14, 122, 61, .3); border-radius: var(--radius-md); background: rgba(18, 161, 80, .05); }
.case-privacy__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-pill); background: rgba(18, 161, 80, .12); color: var(--color-accent-text); }
.case-privacy__icon svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.case-privacy h2 { font-size: var(--text-xl); margin-bottom: var(--space-2xs); }
.case-privacy p { color: var(--color-text-muted); max-width: var(--measure); }