/*
 Dynamic Listings v2.16 — Transparent container + tilt panels + muted tabs + white cards
*/

:root {
  --dl-accent:    #00d2ff;
  --dl-text:      #ffffff;
  --dl-bg:        #0a0a0a;
  --dl-card-bg:   transparent;   /* container picks up theme */
  --dl-clip-path: none;          /* overridden via inline if polygon */
  --dl-shadow:    rgba(0,0,0,0.3);
  --dl-transition: all 0.3s ease;
}

/* Container & Layout */
.dl-container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 1rem;
  background: transparent;
}

/* MAIN TABS */
.dl-main-tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid rgba(0,0,0,0.1);
}
.dl-main-tab {
  background: none;
  border: none;
  color: #666;                  /* muted off‑state */
  padding: .5em 1em;
  cursor: pointer;
  position: relative;
  font-weight: 500;
  transition: color .3s;
}
.dl-main-tab.active,
.dl-main-tab:hover {
  color: var(--dl-accent);
}
.dl-main-tab.active::after,
.dl-main-tab:hover::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--dl-accent);
}

/* INNER TABS */
.inner-tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.inner-tab-btn {
  background: none;
  border: none;
  color: #666;                  /* muted off‑state */
  padding: .4em .8em;
  cursor: pointer;
  position: relative;
  transition: color .3s;
}
.inner-tab-btn.active,
.inner-tab-btn:hover {
  color: var(--dl-accent);
}
.inner-tab-btn.active::after,
.inner-tab-btn:hover::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--dl-accent);
}

/* HIDE PANELS */
.inner-panel.hidden,
.dl-card-section.hidden {
  display: none;
}

/* CARD SECTION */
.dl-card-section {
  margin-bottom: 3rem;
}

/* PROJECT CARD: white background & dark text */
.dl-project-card {
  display: flex;
  align-items: center;
  background: #fff;             /* crisp white card */
  color: #333;                  /* dark text inside */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: var(--dl-transition);
}
.dl-project-card .dl-project-content,
.dl-project-card .dl-project-content * {
  color: #fff; /*inherit;*/               /* enforce dark text inside */
  background: #023047;
}

/* alternate layout */
.dl-project-card:nth-child(even) {
  flex-direction: row-reverse !important;
}

/* VISUAL (IMAGE) */
.dl-project-visual {
  position: relative;
  flex: 1 1 55%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.dl-project-visual img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s, box-shadow .5s;
}
.dl-project-card:nth-child(even) .dl-project-visual img {
  /* flip rounding on reverse if you like */
}

/* CONTENT PANEL */
.dl-project-content {
  flex: 1 1 45%;
  background: #fff;
  padding: 2rem;
  clip-path: var(--dl-clip-path);
  margin-left: -120px;
  border-radius: 8px;
  transition: transform .5s, box-shadow .5s;
}
.dl-project-card:nth-child(even) .dl-project-content {
  margin-left: 0;
  margin-right: -120px;
}

/* TILT ON HOVER */
.dl-project-card:hover .dl-project-visual img {
  transform: rotateY(-8deg) translateZ(10px);
}
.dl-project-card:hover .dl-project-content {
  transform: rotateY(8deg) translateZ(20px);
  box-shadow: 0 20px 40px rgba(0,200,200,0.2);
}

/* TYPOGRAPHY INSIDE CARD */
.project-label {
  display: inline-block;
  font-size: .85rem;
  color: var(--dl-accent);
  text-transform: uppercase;
  margin-bottom: .5em;
}
.project-title {
  font-size: clamp(1.5rem,4vw,2rem);
  margin: .5em 0;
  color: var(--dl-accent);
}
.project-description {
  line-height: 1.5;
  margin-bottom: 1em;
}
.project-meta div {
  margin-bottom: .5em;
}
.project-status {
  display: inline-block;
  margin-bottom: .8em;
}
.dl-btn-primary {
  display: inline-block;
  padding: .75em 1.5em;
  background: var(--dl-accent);
  color: #fff;
  border-radius: 25px;
  text-decoration: none;
  transition: background var(--dl-transition);
}
.dl-btn-primary:hover {
  background: #008ecc;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .dl-project-card,
  .dl-project-card:nth-child(even) {
    flex-direction: column !important;
  }
  .dl-project-content {
    clip-path: none;
    margin: 1rem 0 0;
  }
  .dl-project-visual img {
    border-radius: 0;
  }
}