/* =========================================
   REÂM Portfolio — Aurora Minimal Card
   ========================================= */

:root{
  --pf-aspect: 1/1;
  --pf-gap: clamp(16px, 2.2vw, 24px);
  --pf-br: 18px;
  --pf-border: color-mix(in oklab, var(--color-white) 10%, transparent);
  --pf-border-hover: color-mix(in oklab, var(--color-orange) 40%, transparent);
  --pf-shadow: 0 10px 18px rgba(0,0,0,.25);
  --pf-shadow-hover: 0 16px 28px rgba(0,0,0,.35);
}

[data-theme="light"] {
  --pf-border: color-mix(in oklab, var(--color-text-light) 15%, transparent);
  --pf-border-hover: color-mix(in oklab, var(--color-orange) 40%, transparent);
  --pf-shadow: 0 10px 18px rgba(0,0,0,.12);
  --pf-shadow-hover: 0 16px 28px rgba(0,0,0,.18);
}

.case-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pf-gap);
  margin-top: calc(var(--pf-gap) * .5);
}

/* Card shell */
.case-card{
  display: flex;
  flex-direction: column;
  border-radius: var(--pf-br);
  background: var(--color-elev-1);
  border: 1px solid var(--pf-border);
  box-shadow: var(--pf-shadow);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  isolation: isolate;
}

[data-theme="light"] .case-card {
  background: var(--color-bg-light);
  border: 1px solid var(--pf-border);
}

.case-link{ color: inherit; text-decoration: none; display: contents; } /* keep full-card click */

/* Media */
.case-card .media{
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--pf-aspect);
  background: var(--color-elev-2);
}

[data-theme="light"] .case-card .media {
  background: var(--color-bg-light-2);
}

.case-card .media img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transform: scale(1.02);
  transition: transform .6s cubic-bezier(.2,.9,.2,1);
}

/* Eyebrow chip */
/* Remove old overlay chip behavior entirely */
.case-card .chip { display: none !important; }

/* New small category line in meta, above the button */
.case-card .category{
  margin-top: 2px;
  margin-bottom: 8px;              /* space before the button */
  text-align: center;              /* match centered layout */
  font-weight: 700;
  font-size: 0.6rem;              /* small, readable */
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-white) 75%, #000 0%);
  opacity: .85;
}

[data-theme="light"] .case-card .category {
  color: color-mix(in oklab, var(--color-text-light) 75%, #fff 0%);
}

/* If your meta is not centered yet, keep this for readability */
.case-card .meta{
  text-align: center;
}

/* Optional: slightly tighten the desc when category exists */
.case-card .desc{
  margin: 0 auto 10px;
}

/* Meta panel */
.case-card .meta{
  display: grid; gap: 8px;
  padding: 14px 16px 16px;
  background: color-mix(in oklab, var(--color-white) 2%, transparent);
  border-top: 1px solid var(--pf-border);
  min-height: 132px; /* keeps rows visually even */
}

[data-theme="light"] .case-card .meta {
  background: color-mix(in oklab, var(--color-text-light) 2%, transparent);
  border-top: 1px solid var(--pf-border);
}

.case-card .title{
  font-weight: 800; font-size: 1.05rem; margin: 0;
  color: var(--color-white);
}

[data-theme="light"] .case-card .title {
  color: var(--color-text-light);
}

.case-card .desc{
  color: color-mix(in oklab, var(--color-white) 86%, #000 0%);
  opacity: .9; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

[data-theme="light"] .case-card .desc {
  color: color-mix(in oklab, var(--color-text-light) 86%, #fff 0%);
}

/* Footer row (button) */
.case-card .actions{
  margin-top: 6px;
}

.btn--ghost{
  display:inline-block;
  padding:10px 16px;
  border:1px solid color-mix(in oklab, var(--color-orange) 45%, transparent);
  border-radius:999px;
  font-size:.9rem; font-weight:700; letter-spacing:.15px;
  color:var(--color-white);
  background: radial-gradient(60% 120% at 50% 120%, transparent, transparent 70%);
  transition: transform .18s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

[data-theme="light"] .btn--ghost {
  color: var(--color-text-light);
  border: 1px solid color-mix(in oklab, var(--color-orange) 45%, transparent);
}

.btn--ghost:hover,
.btn--ghost:focus-visible{
  background:linear-gradient(90deg, var(--color-orange), var(--color-orange-2));
  border-color:transparent;
  box-shadow:0 0 18px color-mix(in oklab, var(--color-orange) 45%, transparent);
  transform: translateY(-1px);
  color: var(--color-white);
}

/* Hover state */
@media (hover:hover){
  .case-card:hover{
    transform: translateY(-3px);
    box-shadow: var(--pf-shadow-hover);
    border-color: var(--pf-border-hover);
  }
  .case-card:hover .media img{
    transform: scale(1.07);
  }
}

/* Focus state */
:where(.case-card) :where(a.case-link):focus-visible{
  outline: 2px solid color-mix(in oklab, var(--color-orange) 60%, transparent);
  outline-offset: 4px;
  border-radius: var(--pf-br);
}

/* Responsive columns */
@media (max-width: 1024px){
  .case-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .case-grid{ grid-template-columns: 1fr; }
}

/* ===== Header (Hero Stack) ===== */
.pf-head--hero{
  text-align:center;
  max-width: 80ch;
  margin: 0 auto clamp(20px, 4vw, 44px);
  padding-top: clamp(18px, 3vw, 38px);
}

.pf-head--hero .eyebrow{
  display:inline-block;
  font-weight: 800;
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .9;
  background: linear-gradient(90deg, var(--color-orange), var(--color-orange-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.pf-head--hero .pf-title{
  margin: 8px 0 6px;
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.1;
  font-weight: 900;
  color: var(--color-white);
}

[data-theme="light"] .pf-head--hero .pf-title {
  color: var(--color-text-light);
}

.pf-head--hero .pf-title .accent{
  position: relative;
  white-space: nowrap;
}

.pf-head--hero .pf-title .accent::after{
  content:"";
  position:absolute;
  left: 0; right: 0; bottom: -.15em;
  height: .18em;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-orange), var(--color-orange-2));
  opacity: .85;
}

.pf-head--hero .pf-sub{
  margin: 0 auto;
  max-width: 70ch;
  opacity: .92;
  font-size: clamp(1rem, .38vw + .95rem, 1.08rem);
  line-height: 1.6;
  color: var(--color-ink);
}

[data-theme="light"] .pf-head--hero .pf-sub {
  color: var(--color-text-light);
}

.pf-divider{
  width: min(140px, 18vw);
  height: 2px;
  margin: clamp(14px, 2.6vw, 24px) auto;
  background: linear-gradient(90deg, transparent, var(--color-orange), var(--color-orange-2), transparent);
  opacity: .8;
}

.pf-kpis{
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  gap: clamp(8px, 1.8vw, 16px);
  justify-content: center;
}

.pf-kpi{
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--color-orange) 30%, transparent);
  background: color-mix(in oklab, var(--color-white) 3%, transparent);
  backdrop-filter: blur(3px);
  font-weight: 700;
}

[data-theme="light"] .pf-kpi {
  background: color-mix(in oklab, var(--color-text-light) 3%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-orange) 30%, transparent);
}

.pf-kpi .k{
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: linear-gradient(90deg, var(--color-orange), var(--color-orange-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.pf-kpi .v{
  font-size: .95rem;
  color: var(--color-white);
}

[data-theme="light"] .pf-kpi .v {
  color: var(--color-text-light);
}

/* Stack KPI chips on small screens */
@media (max-width: 640px){
  .pf-kpis{ grid-auto-flow: row; grid-template-columns: 1fr; }
  .pf-kpi{ justify-content: center; }
}

/* ===== Footer (CTA Row) ===== */
.pf-cta.pf-cta--row{
  text-align: center;
  margin: clamp(28px, 5vw, 56px) auto 22px;
  padding: clamp(14px, 2.2vw, 22px) 0 0;
  border-top: 1px solid color-mix(in oklab, var(--color-white) 10%, transparent);
  max-width: 86ch;
}

[data-theme="light"] .pf-cta.pf-cta--row {
  border-top: 1px solid color-mix(in oklab, var(--color-text-light) 10%, transparent);
}

.pf-cta-title{
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 900;
  line-height: 1.15;
  color: var(--color-white);
}

[data-theme="light"] .pf-cta-title {
  color: var(--color-text-light);
}

.pf-cta-sub{
  margin: 8px auto 16px;
  max-width: 60ch;
  opacity: .92;
  line-height: 1.6;
  color: var(--color-ink);
}

[data-theme="light"] .pf-cta-sub {
  color: var(--color-text-light);
}

.pf-cta-actions{
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
}

.pf-cta .btn{ min-width: 180px; }

.pf-cta-note{
  margin: 12px 0 0;
  font-size: .92rem;
  opacity: .8;
  color: var(--color-ink-dim);
}

[data-theme="light"] .pf-cta-note {
  color: var(--color-text-light-dim);
}

/* Compact on very small screens */
@media (max-width: 420px){
  .pf-cta .btn{ min-width: 100%; }
}

/* Additional button styles for portfolio */
.pf-cta .btn--primary{
  background: linear-gradient(135deg, var(--color-orange), var(--color-orange-2));
  border-color: transparent;
  color: var(--color-white);
}

.pf-cta .btn--ghost{
  background: transparent;
  color: var(--color-white);
  border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
}

[data-theme="light"] .pf-cta .btn--ghost {
  color: var(--color-text-light);
  border-color: color-mix(in oklab, var(--color-text-light) 30%, transparent);
}

.pf-cta .btn--ghost:hover{
  background: linear-gradient(135deg, var(--color-orange), var(--color-orange-2));
  border-color: transparent;
  color: var(--color-white);
}