/* "Selected Work" section: the section label style used by every
   section, plus the Wayfarer project spotlight card (features list,
   tech stack badges). */

.sec-label{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:36px;
}
.sec-label .tag{
  background:var(--ink);
  color:var(--paper);
  font-size:12px;
  padding:5px 10px;
  text-transform:uppercase;
  letter-spacing:0.1em;
}
.sec-label h2{
  font-size:clamp(24px,4vw,36px);
}
.sec-label .rule{
  flex:1;
  height:2px;
  background:var(--ink);
}

/* ===== PROJECT SPOTLIGHT ===== */
.project-spotlight{
  border:3px solid var(--ink);
  padding:32px;
}
.project-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;
  border-bottom:2px solid var(--ink);
  padding-bottom:20px;
  margin-bottom:24px;
}
.proj-status{
  display:inline-block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  padding:4px 8px;
  margin-bottom:10px;
}
.proj-status.live{background:var(--ink);color:var(--paper);}
.proj-status.released{background:var(--red);color:var(--paper);}
.project-head h3{
  font-family:'Archivo Black', sans-serif;
  font-size:32px;
  text-transform:uppercase;
  line-height:1;
}
.proj-tagline{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  opacity:0.7;
  margin-top:8px;
}

.project-tech-preview{
  display:flex;
  gap:6px;
  margin-top:14px;
}
.project-tech-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border:1px solid var(--ink);
  background:var(--paper);
  box-sizing:border-box;
  flex-shrink:0;
}
.project-tech-icon i{
  font-size:14px;
  line-height:1;
}

/* Phosphor icons use currentColor, so they automatically pick up
   var(--ink) as text color and re-theme correctly in dark mode with
   zero extra CSS -- no invert filter needed. */

/* ===== VIEW-LINK BUTTON (View Live / GitHub / Download APK) =====
   Punch hover consistent with .social-row a, .channel-tile,
   .work-carousel_btn, .resume-btn: lift + hard shadow. Shadow uses
   --ink for contrast since the hover background itself turns red. */
.view-link{
  text-decoration:none;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  border:2px solid var(--ink);
  padding:8px 12px;
  white-space:nowrap;
  background:var(--caution);
  color:var(--ink);
  display:inline-block;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .15s ease, box-shadow .15s ease;
}
.view-link:hover{
  background:var(--red);
  color:var(--paper);
  border-color:var(--red);
  transform:translate(-2px,-2px);
  box-shadow:3px 3px 0 var(--ink);
}
.view-link:active{
  transform:translate(0,0);
  box-shadow:none;
}

/* ============================================
   LIVE PREVIEW — floating iframe preview shown
   on hover of the "View Live" link. See js/live-preview.js.
   ============================================ */
.live-preview-wrap{
  position:relative;
  display:inline-block;
}
.live-preview{
  position:fixed;
  width:380px;
  max-width:min(380px, 90vw);
  height:250px;
  border:1px solid rgba(17,17,17,0.15);
  border-radius:10px;
  background:var(--paper);
  box-shadow:0 12px 28px rgba(17,17,17,0.22);
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:60;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.live-preview[hidden]{display:none;}
.live-preview.is-visible{
  opacity:1;
  transform:translateY(0);
}
.live-preview.is-above{
  transform:translateY(6px);
}
.live-preview.is-above.is-visible{
  transform:translateY(0);
}
.live-preview_bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  background:#e8e6de;
  border-bottom:1px solid rgba(17,17,17,0.1);
  flex-shrink:0;
}
.live-preview_dot{
  width:9px;
  height:9px;
  border-radius:50%;
  display:inline-block;
}
.live-preview_dot--red{background:#FF5F57;}
.live-preview_dot--yellow{background:#FEBC2E;}
.live-preview_dot--green{background:#28C840;}
.live-preview_url{
  margin-left:8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  opacity:0.6;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.live-preview_frame-wrap{
  flex:1;
  width:100%;
  overflow:hidden;
  background:var(--paper);
}
.live-preview_frame{
  border:none;
  display:block;
}

@media (max-width:900px){
  .live-preview{display:none !important;}
}

.project-desc{
  font-size:15px;
  max-width:75ch;
  margin-bottom:32px;
}

.project-cols{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:40px;
}
.project-cols h4{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  border-bottom:2px solid var(--ink);
  padding-bottom:10px;
  margin-bottom:16px;
}
.feature-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.feature-list li{
  font-size:13px;
  padding-left:20px;
  position:relative;
}
.feature-list li::before{
  content:"▪";
  color:var(--red);
  position:absolute;
  left:0;
}

.stack-group{margin-bottom:20px;}
.stack-group:last-child{margin-bottom:0;}
.stack-label{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  opacity:0.6;
  margin-bottom:8px;
}
.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tag-row span{
  font-size:11px;
  border:1px solid var(--ink);
  padding:4px 8px;
  text-transform:uppercase;
}
.tech-badge{
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--ink);
  padding:6px 10px;
  background:var(--paper);
}
.tech-badge i{
  font-size:14px;
  flex-shrink:0;
  line-height:1;
  opacity:0.8;
}
.tech-badge span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.02em;
  white-space:nowrap;
}


/* ============================================
   PROJECT SPOTLIGHT — click-to-reveal + brutalist
   hover lift.
   ============================================ */

.project-spotlight{
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  box-shadow:8px 8px 0 var(--ink);
}
.project-spotlight:hover{
  transform:translate3d(0,-4px,0);
  box-shadow:12px 12px 0 var(--ink);
}
.project-spotlight[data-open="true"]{
  box-shadow:12px 12px 0 var(--red);
}
.project-spotlight[data-open="true"]:hover{
  transform:none;
}

.project-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  flex-shrink:0;
}

.press-hint{
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  border:2px solid var(--ink);
  padding:8px 12px;
  white-space:nowrap;
  background:var(--paper);
  color:var(--ink);
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .15s ease, box-shadow .15s ease;
}
.press-hint:hover{
  background:var(--red);
  color:var(--paper);
  border-color:var(--red);
  transform:translate(-2px,-2px);
  box-shadow:3px 3px 0 var(--ink);
}
.press-hint:active{
  transform:translate(0,0);
  box-shadow:none;
}
.press-hint .glyph{
  display:inline-block;
  font-size:16px;
  line-height:1;
}

/* ============================================
   WORK CAROUSEL — 3D coverflow. The active card
   sits upright and full size at centre; side cards
   scale down, tilt back in perspective, and dim.
   Positioning math lives in js/work-carousel.js;
   these rules just define the resting/transition
   states. Same punch hover language as every other
   button on the site.

   Cards are compact now (Details opens a shared
   modal instead of expanding in place), so every
   card gets the same min-height for a tidy, uniform
   look regardless of how much text a tagline has.
   ============================================ */
.work-carousel{
  perspective:1400px;
  margin-bottom:24px;
}
.work-carousel_track{
  position:relative;
  transition:height .4s cubic-bezier(.2,.8,.2,1);
  counter-reset:project;
}
.work-carousel_track > .project-spotlight{
  counter-increment:project;
  position:absolute;
  top:50%;
  left:50%;
  width:min(680px, 100%);
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:var(--paper);
  cursor:pointer;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease, box-shadow .35s ease;
  box-shadow:8px 8px 0 var(--ink);
  border-top:6px solid var(--ink);
  padding:36px;
  overflow:hidden;
}
.work-carousel_track > .project-spotlight::before{
  content:counter(project, decimal-leading-zero);
  position:absolute;
  top:-6px;
  right:12px;
  font-family:'Archivo Black', sans-serif;
  font-size:88px;
  line-height:1;
  color:var(--ink);
  opacity:0.06;
  pointer-events:none;
  z-index:0;
}
.work-carousel_track > .project-spotlight > *{
  position:relative;
  z-index:1;
}
.work-carousel_track > .project-spotlight:has(.proj-status.released){
  border-top-color:var(--red);
}
.work-carousel_track > .project-spotlight .project-head{
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:none;
  flex-wrap:nowrap;
}
.work-carousel_track > .project-spotlight .project-head > div:first-child{
  flex:1;
  min-width:0;
}
.work-carousel_track > .project-spotlight .project-head-actions{
  flex-shrink:0;
}
.work-carousel_track > .project-spotlight.is-active{
  cursor:default;
}
.work-carousel_track > .project-spotlight.is-active:hover{
  transform:translate(-50%,-50%) !important;
}
.work-carousel_track > .project-spotlight.is-side:hover{
  box-shadow:8px 8px 0 var(--red);
}

@media (max-width:900px){
  .work-carousel{perspective:none;}
  .work-carousel_track > .project-spotlight{width:100%;}
}
@media (max-width:480px){
  .work-carousel_track > .project-spotlight{min-height:290px;}
}

.work-carousel_controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:20px;
}
.work-carousel_btn{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, transform .15s ease, box-shadow .15s ease;
}
.work-carousel_btn:hover:not(:disabled){
  background:var(--ink);
  color:var(--paper);
  transform:translate(-2px,-2px);
  box-shadow:3px 3px 0 var(--red);
}
.work-carousel_btn:active:not(:disabled){
  transform:translate(0,0);
  box-shadow:none;
}
.work-carousel_btn:disabled{
  opacity:0.3;
  cursor:not-allowed;
}

.work-carousel_dots{
  display:flex;
  gap:8px;
}
.work-carousel_dot{
  width:9px;
  height:9px;
  border:2px solid var(--ink);
  background:var(--paper);
  padding:0;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.work-carousel_dot:hover{
  transform:scale(1.2);
}
.work-carousel_dot[data-active="true"]{
  background:var(--ink);
}

/* ============================================
   MOBILE COMPACT VIEW
   ============================================ */
@media (max-width:480px){
  .project-head-actions{
    width:100%;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:8px;
  }
  .project-head-actions .view-link{
    width:100%;
    text-align:center;
    box-sizing:border-box;
  }
  .press-hint{
    width:100%;
    justify-content:center;
    box-sizing:border-box;
  }

  .project-spotlight{padding:20px;}
  .project-head h3{font-size:26px;}

  .work-carousel_controls{
    gap:10px;
    margin-top:16px;
  }
  .work-carousel_btn{
    width:32px;
    height:32px;
    font-size:14px;
  }
  .work-carousel_dot{
    width:7px;
    height:7px;
  }
}