/* =========================================================
   portfolio.css
   Portfolio index layout
   Two-column rows: image left, text right
   Button styling lives in ug.css (this file handles layout only)
   Dreamweaver-safe
   ========================================================= */

/* --- Intro block --- */
.portfolio-intro{
  margin-top: 4px;
  margin-bottom: 10px;
}

.portfolio-intro p{
  margin: 0;
}


/* Mobile: stack label above links (single instance) */
@media (max-width: 780px){

  .portfolio-subnav-inner{
    display: block;
  }

  .portfolio-subnav-line{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    margin: 10px 0;
  }

  .portfolio-subnav-head{
    width: auto;
  }

  .portfolio-subnav-links{
    justify-content: center;
  }
}

/* --- List wrapper --- */
.portfolio-list{
  margin-top: 10px;
}

/* --- Each row --- */
.portfolio-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* --- Image column --- */
.portfolio-media{
  width: 220px;
  flex: 0 0 220px;
}

.portfolio-img{
  display: block;
  width: 100%;
  height: auto;
}

/* --- Text column --- */
.portfolio-body{
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 30px;
}

/* --- Separator line + dot (base definition) --- */
.portfolio-sep{
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.portfolio-sep:before{
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  background: rgba(0,0,0,0.12);
}

.portfolio-sep .dot{
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-left: 10px;
  background: rgba(0,0,0,0.35);
}

/* --- Title + copy --- */
.portfolio-title{
  margin-top: 0;
  margin-bottom: 8px;
  letter-spacing: 0.06em;
}

.portfolio-copy{
  margin: 0;
  max-width: 62ch;
}

.portfolio-note{
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 0.95em;
  opacity: 0.85;
  max-width: 62ch;
}

/* --- Button placement only (styling lives in ug.css) --- */
.portfolio-link{
  float: right;
  margin-top: 8px;
  margin-left: 20px;
}

/* =========================================================
   Mobile: stack image above text
   ========================================================= */
@media (max-width: 780px){

  .portfolio-row{
    flex-direction: column;
    align-items: center;   /* centre the stack */
    gap: 14px;
  }

  .portfolio-media{
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  .portfolio-body{
    text-align: center;    /* centre title + copy */
  }

  .portfolio-link{
    float: none;           /* kill desktop float */
    display: inline-block;
    margin: 14px auto 0;
  }

  .portfolio-copy,
  .portfolio-note{
    max-width: none;
  }
}

/* =========================================================
   Bottom "Back" button wrapper (centred)
   ========================================================= */

.portfolio-back{
  text-align: center;
  margin: 2.5rem 0 0;
}

.portfolio-back .portfolio-link{
  float: none;
}

/* =========================================================
   PORTFOLIO ONLY:
   Remove separator line + dot
   (Services page remains untouched)
   ========================================================= */

.portfolio-sep{
  display: none;
}