/* Casos index page styles */

/* ─── PAGE HEADER (interior pages) ─── */

/* ── Portfolio index — hero background system ── */
#page-portfolio .page-header{
  padding:180px 0 80px;
  position:relative;
  overflow:hidden;
  background:#ffffff;
}
#page-portfolio .page-header::before{
  content:'';
  position:absolute;
  top:22.5%;right:20%;bottom:22.5%;left:20%;
  border-radius:10%;
  background:radial-gradient(ellipse 100% 100%,
    rgba(119,183,252,0.26) 0%,
    rgba(255,255,255,0.09) 42%,
    transparent 90%);
  filter:blur(100px);
  transform-origin:center center;
  animation:pearlOrbit1 30s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
}
#page-portfolio .page-header::after{
  content:'';
  position:absolute;
  top:25%;right:22%;bottom:25%;left:22%;
  border-radius:10%;
  background:radial-gradient(ellipse 100% 100%,
    rgba(213,128,242,0.24) 0%,
    rgba(255,255,255,0.08) 42%,
    transparent 90%);
  filter:blur(100px);
  transform-origin:center center;
  animation:pearlOrbit2 30s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
}
/* ── Portfolio index — container (single col, image floats behind) ── */
#page-portfolio .page-header .container {
  position: relative;
  z-index: 1;
}
#page-portfolio .page-header .page-title {
  font-size: clamp(2rem, 4.6vw, 4.3rem);
  line-height: 1.01;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
  max-width: none;
  white-space: nowrap;
}
#page-portfolio .page-header .section-body {
  font-size: 1.05rem;
  font-weight: 350;
  color: rgba(28,30,42,0.62);
  line-height: 1.72;
}

/* ── Portfolio index — casos hero visual ── */
.casos-hero-visual {
  position: absolute;
  top: -115px;
  right: -5%;
  width: clamp(450px, 50vw, 640px);
  pointer-events: none;
  opacity: 0.99;
  z-index: -1;
  filter: drop-shadow(0 32px 64px rgba(90,108,180,.18)) drop-shadow(0 8px 24px rgba(160,180,255,.14));
  animation: heroFloat 9s ease-in-out infinite;
}
.casos-hero-visual img { width: 100%; height: auto; display: block; }


/* ─── PORTFOLIO LIST PAGE ─── */
.portfolio-list{
  display:flex;
  flex-direction:column;
  gap:16px;
  background:transparent;
  border:none;
  margin:-10px 0 56px;
}
.portfolio-card{
  padding:36px 32px;
  position:relative;
  cursor:pointer;
  transition:border-color var(--tr), box-shadow var(--tr), transform var(--tr);
}
.portfolio-card:hover{
  transform:translateY(-2px);
}
.portfolio-card .cs-open-hint{
  position:absolute;bottom:32px;right:32px;
  font-family:var(--mono);
  font-size:0.70rem;
  letter-spacing:0.06em;
  color:var(--accent);
  opacity:0.32;
  transition:opacity var(--tr);
}
.portfolio-card:hover .cs-open-hint,
.portfolio-card:focus-within .cs-open-hint{
  opacity:1;
}
.portfolio-card .capability{
  font-family:var(--mono);font-size:0.65rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:20px;
}
.portfolio-card .case-card-subtitle{
  font-family:var(--serif);font-size:3.2rem;font-weight:700;
  font-style:normal;color:var(--text);letter-spacing:-0.025em;
  line-height:1.1;margin-top:50px;margin-bottom:12px;
}

/* ── Coming soon card ── */
.portfolio-card--coming{
  background:rgba(248,250,255,0.40);
  border-color:rgba(200,200,220,0.4);
  box-shadow:none;
  cursor:default;
  pointer-events:none;
}
.portfolio-card--coming .capability{
  color:var(--muted);
}
.portfolio-card--coming .cs-title{
  color:rgba(28,30,42,0.38);
}
.portfolio-card--coming .cs-desc{
  color:rgba(28,30,42,0.28);
}
.portfolio-card--coming .cs-meta{
  border-top-color:rgba(28,30,42,0.06);
}
.portfolio-card--coming:hover{
  background:rgba(248,250,255,0.40);
  box-shadow:none;
}
.portfolio-card .cs-title{
  position:absolute;top:36px;right:32px;max-width:44%;text-align:right;
  font-family:var(--serif);font-size:0.8rem;font-weight:400;
  line-height:1;letter-spacing:0;color:var(--muted);margin:0;opacity:0.7;
}
.portfolio-card .cs-desc{font-size:0.88rem;font-weight:300;color:var(--text2);line-height:1.65;margin-bottom:24px}
.portfolio-card .cs-meta{
  display:flex;gap:0;padding-top:20px;padding-bottom:12px;border-top:1px solid var(--line);
}
.cs-meta-item{flex:1;border-right:1px solid var(--line);padding-right:16px;margin-right:16px}
.cs-meta-item:last-child{border-right:none;padding-right:0;margin-right:0}
.cs-meta-item .val{font-family:var(--serif);font-size:1.45rem;color:var(--accent);line-height:1;font-weight:700}
.cs-meta-item .lbl{font-family:var(--mono);font-size:0.70rem;color:var(--muted);margin-top:4px;line-height:1.4}

/* Casos index responsive */
@media (max-width: 960px){
  .portfolio-list{grid-template-columns:1fr}
}

@media (max-width: 860px){
  #page-portfolio .page-header{
    padding:108px 0 44px;
  }
  #page-portfolio .page-header .page-title{
    white-space:normal;
  }
  #page-portfolio .page-header > .container{
    padding-top:0;
  }
  .casos-hero-copy{
    padding-right:0;
  }
  .casos-hero-visual{
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    translate:none;
    opacity:0.08;
  }
  .casos-hero-visual img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:right center;
    filter:none;
  }
  #page-portfolio .page-header .section-body{
    font-size:0.88rem;
  }
  .portfolio-card .cs-title{
    display:none;
  }
}

/* ── Casos hero filter strip ── */
.casos-hero-filter {
  padding: 150px 0 0px;
  margin-top: 50px;
}

@media (max-width: 860px){
  .casos-hero-filter{
    padding:36px 0 0;
    margin-top:0;
  }
}

/* ── Casos filter bar ── */
.casos-filter-wrap {
  margin: 0;
}
.casos-filter-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.60rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.9;
  margin-bottom: 10px;
}
.casos-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.casos-filter {
  appearance: none;
  background: var(--bg2);
  border: 1px solid var(--line3);
  border-radius: 999px;
  color: var(--text2);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.casos-filter.is-active {
  background: radial-gradient(ellipse at center, rgba(80,70,160,0.08) 0%, transparent 70%);
  border-color: var(--line4);
  color: var(--accent);
}
.casos-filter:hover:not(.is-active) {
  border-color: var(--line4);
  color: var(--text);
}
.casos-empty {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 48px 0;
  text-align: center;
}
@media (max-width: 860px) {
  .casos-filterbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .casos-filterbar::-webkit-scrollbar { display: none; }
  .casos-filter { flex-shrink: 0; }
}

/* ── Mobile visual hierarchy (≤ 767px) ── */
@media (max-width: 767px) {
  /* Reduce card padding: 36/32px → 24/20px */
  .portfolio-card {
    padding: 24px 20px;
  }
  /* Re-anchor open hint for reduced padding */
  .portfolio-card .cs-open-hint {
    bottom: 20px;
    right: 20px;
  }
  /* Case card subtitle: 3.2rem → controlled mobile scale (below hero title) */
  .portfolio-card .case-card-subtitle {
    font-size: clamp(1.65rem, 4.8vw, 1.9rem);
    margin-top: 24px;
  }
  /* Metric values: 1.45rem → 1.2rem (proportional to reduced card) */
  .cs-meta-item .val {
    font-size: 1.2rem;
  }
  /* Tighten card stack */
  .portfolio-list {
    gap: 12px;
    margin-bottom: 44px;
  }
}